Single Page Application テーマ

強力な動画連携機能を備えた「Cocoon」の子テーマを配布しています。
導入の仕方はこちらをクリック

ダウンロード

【Cocoon子テーマ】kadlu for Cocoonとは

SPA(Single Page Application)を知っていますか?

今、フロントエンジニア界隈を騒がせていますね。

簡単に語ると、サイト内のリロードを必要な分だけ行い、表示速度を向上させる技術です。

サイト運営において、こんなお悩み抱えていませんか?

・ページ滞在時間を増やしたい

・動画と連動するブログを用意したい

SPA技術で解消します!

kadlu for Cocoonの大きな特徴

WordPlessテーマ「Cocoon」を擬似的にSPA化させる子テーマです。

Cocoonに以下の機能を追加しています。

  • 動画を再生しながらブラウズできる機能
  • 必要な箇所だけ読み込む機能

これだけ?って思うかもしれませんが、ほんの少しの工夫で効果が出るのがWEBの力です。

それぞれ詳しく見ていきますね。

動画を再生しながらブラウズできる機能

まずはお試しあれ!

たったこれだけの機能ですが、

動画との強力な連動は、今後のWEB活動のメインとなっていきます。

例えば、こんな使い方もできますよ!

  • レビュー記事を動画でも紹介して、成約率(CVR)を上げる
  • 作曲した曲を再生しながら、ブログや小説を読んでもらう
  • 音声学習の動画へ誘導

私の体験談で恐縮ですけど、ブログとYoutubeの客層は異なります。

ブログ 専門性の高い内容が検索で評価される
Youtube 大衆向けの動画が評価される

(最近イケハヤ氏も言ってましたね)

どちらからも集客を考えなくてはいけなくなった時代はすぐそこまで来ています。

動画連携が強力に作用する時代は来ていますよ!

実際に私も、似たようなブログテーマでページ内滞在時間が上がったしね!

(このとき使っていたのは「本家kadlu(Hugo用です)」

必要な箇所だけページを読み込む機能

えーっと、これは動画連携機能のおまけです…。

おまけなんですけど、SPAの考え方の全てですね。

「kadlu for Cocoon」はページ遷移する際、コンテンツの中身しか更新しません。

逆に言うと、ページ遷移するときは、ヘッダー、フッターを読み込まないんです。

つまり、スクリプト(WEBサイトを動かす処理)等の比較的思い部分を読み込まないため、高速表示が可能となっています。

まぁ、Cocoon自体も相当早いので、些細な高速化ではあるのですが…。

kadlu for Cocoonの小さな特徴

サブウィンドウを新設するにあたり、以下の機能も追加しています。

細かいUIですので、気にならないかも?

  • サブウィンドウが無いときに、目次をクリックするとサブウィンドウに表示される機能
  • PCでの表示時、サブウィンドウをドラッグで移動できる機能
  • Youtubeをiframeで埋め込むと自動でサブウィンドウで開くを追加する機能
  • Cocoonのキーカラーの設定でサブウィンドウの色が変わる機能

それぞれ詳しく見ていきます。

目次をクリックするとサブウィンドウに表示される機能

ものは試しで、一度、サブウィンドウを閉じてから、目次をクリックしてみてください。

目次がサブウィンドウに表示されます。

もちろん、サブウィンドウ内の見出しをクリックしても、移動しますよ。

目次が手元にあるデザインって結構好きなのよね。

PCでの表示時、サブウィンドウをドラッグで移動できる機能

PC表示の場合のみ、サブウィンドウをドラッグで移動することができます。

すごく、アプリっぽいですよね?

Youtubeをiframeで埋め込むと自動でサブウィンドウで開くを追加する機能

読んで如くです。

ショートコードで手動で追加する手法も考えたのですけど、やっぱりフルオートでできたほうがいいかなって。

Cocoonの動画埋め込み方法は2種類あります。

こちらの子テーマはiframeで埋め込んだ場合のみ反応するようにしました。

Cocoonのキーカラーの設定でサブウィンドウの色が変わる機能

Cocoonの優秀なスキン機能を損ねないための仕様です。

サイトキーカラーの設定でサブウィンドウのヘッダーとサブウィンドウで開くボタンの色は、キーカラー設定で変更可能としています。

標準スキンではテストしていますので、見た目をいじっている方でも、デザインを保ったまま導入できます。

導入方法は下記記事からどうぞ!

【kadlu for Cocoon】導入方法と使い方
「Cocoon子テーマ」である「kadlu for Cocoon」の導入方法を紹介します。 子テーマとしてインストールしていただければ機能しますよ Cocoon本体を必ずインストールしてください! wordplessがイン...

kadku for Cocoon導入の注意事項

注意事項です。

Q AMPでサブウィンドウが動かない

A AMPとSPAは共存ができません(現段階では)。スマホの検索流入でサブウィンドウを使いたい場合はAMPを諦めてもらうしか無いです。

 

Q スライダーが動かない

A SPAの使用上、JSを追加で読み込んで機能させるページには対応できません。SmartSlider(プラグイン)なら対応できます。下記記事を参照

【kadlu for Cocoon】スライダーを使う方法
「kadlu for Cocoon」は非同期通信(スクリプトの追加読み込みをしない)で作成しているテーマですので、スライダーが動きません。 しかし、「Smart Slider」だけは動きます! 導入の仕方を解説しますね。 Sm...

 

Q Analiticsが反応しない。

A リロードという概念が無いため、通常のAnaritics設定では統計が取れません。GTMから設定してください。下記記事を参照

【kadlu for Cocoon】Anariticsでトラッキングを取得する方法
「kadlu for Cocoon」はbarba jsを採用していて、リロードという概念が無いため、GoogoleAnariticsでトラッキングを取れません。 そこで、GTM(グーグルタグマネージャー)でURL変更を検知してトラッキ...

 

Q 特定のページへ遷移できない。

A ページの構造が違う管理ページには遷移できません。「target=”_blank”」属性をつけて、新規ウィンドウとして遷移させる必要があります。もしくは、マウスホイールでタブを開き直して遷移してください

 

Q 検索順位が上がらない

A 私も答えを持っていません。あたり記事が出るまで試行錯誤してください

まとめ

kadluの特徴を並べるとこんな感じですね。

  • 強力な動画連携機能を持つ
  • 部分的にロードするので早い
  • ちょっとだけUIにこだわりあり

ぜひぜひ使ってみてください!

 

 

タイトルとURLをコピーしました