サイドバーのウィジェットは簡単に作れる

functions.phpにウィジェットを作成するPHPコードを追加

ブログのサイドバーにYouTube動画を表示してみます。

WordPressでサイドバーをカスタマイズする方法は複数ありますが、今回は動画表示用の専用ウィジェットを作成して、そのウィジェットを管理画面から手動で追加してみます。

まず、テーマの関数functions.phpに下のコードを追加します。

function youtube_widget() {

$content = <<< EOF
  // youtubeのiframeコードをここに貼り付け
EOF;

  echo $content;
}

wp_register_sidebar_widget(
  'yt_widget',
  'Youtube Widget',
  'youtube_widget'
);

ウィジェットを作成するだけなら上のPHPコードをfunctions.phpに追加することで、動画を表示するウィジェットを新規に作成することが出来ます。

外観 → ウィジェットを確認

WordPressの管理画面で上で作成したウィジェットが利用可能になっているか確認してみます。

Youtube Widgetというオリジナルのウィジェットが利用可能な状態になっています。Youtube Widgetをクリックしてみます。

twentythirteenの場合は、副ウィジェットエリアを選択して、ウィジェットを追加すれば、サイドバーにYoutube動画を表示することが出来ます。

テーマに適したHTMLに編集する

冒頭載せたPHPコードでyoutubeのiframeコードが出力されますが、見た目上、選択しているテーマに適したHTMLを書く必要があります。

Webエンジニアブログは、twentythirteenをベースにしたテーマを利用しているので、PHPコードは以下のようにしてサイドバーにマッチするようにしました。

function youtube_widget() {

$content = <<< EOF
<aside>
<p class="form-allowed-tags">Recommend</p>
<div id="youtube" class="gallery gallery-columns-1">
  <figure class="gallery-item">
    // youtubeのiframeコードをここに貼り付け
  </figure>
</div>
</aside>
EOF;

  echo $content;
}

wp_register_sidebar_widget(
  'yt_widget',
  'Youtube Widget',
  'youtube_widget'
);

twentythirteenのサイドバーは、widthが300で構成されているので、iframeコードのwidthを調整してピッタリと合うHTMLに変更しました。

WordPressを利用すればウィジェットの追加自体は簡単にできる。

YouTube動画の非同期レンダリング

動画を1つ貼り付けただけでは実感できないかもしれないが、動画の貼り付けはページの表示スピードに影響を与える。複数の動画を貼り付ける必要がある場合は特に、

動画表示の非同期処理

が必要になってくる。

非同期処理を行うには、

• Ajax
• 遅延ロード

双方の技術を利用することで実装することができる。

このテーマについては、Webエンジニアブログで以前記事にしてあるので参考にして頂きたい。

• WordPressでソーシャルボタンを非同期化して高速化
• 遅延ロードとjQuery.ajax
• WordPress サイドバーにAmazonの商品リンクを表示