プラグインを使わないで人気記事やおすすめ記事を表示するウィジェットを作成

記事を手動で選択するタイプのウィジェット

WordPressのサイドバーに人気記事などを表示する場合、

専用のプラグインが複数利用できる。WebエンジニアブログはWordPressでブログを公開しているが、プラグイン非依存の方向でブログ運営をしている。

サイドバーの人気記事についても、プラグインをインストールするのではなく、ウィジェットを作成する方法で追加した。

作り方

手順として、

• 表示するページのリスト化
• liタグの集まりを構築
• 人気記事のHTMLを出力
• ウィジェット化

という順にコーディングする感じになる。

記事のリスト化

PHPのコーディングは、functions.php(テーマの関数)で行います。

リスト化する前に専用の関数を以下のように定義します。

function popular_entry_widget() {

}

この関数の中にリスト化した人気記事のデータを構築します。

function popular_entry_widget() {
  // 表示するページのリスト化
  $url = array(
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
  );
}

PHPの配列でHTMLのaタグをリスト化しています。urlには、人気記事のアンカーテキストを設定し、#にurlを書きます。このリスト化した配列を手動で書き換えることで、人気記事やおすすめ記事の一覧を管理することが出来ます。

liタグの構築

次に各aタグをliで囲んでリスト化されたHTMLを構築します。

// liタグの構築
$c = count($url);
for( $i = 0; $c > $i; $i++ )
{
  $popular .= '<li>';
  $popular .= $url[$rand_keys[$i]];
  $popular .= '</li>';
}

forで繰り返すことで、$popular変数にliタグで囲まれたすべてのaタグが格納されます。

人気記事のHTMLを出力

liタグの集まりである$popularをulタグの中で展開すると最終的なHTMLを出力することが出来ます。

$html = <<< EOF
<aside>
  <p>人気記事</p>
  <ul>
    {$popular}
  </ul>
</aside>
EOF;

  echo $html;

PHPのヒアドキュメントを利用してHTMLをダイレクトにコーディングしています。また、ヒアドキュメント内で、PHPの変数を展開しています。このあたりの手法を応用することで、ダイナミックなウィジェットを作成することが可能です。

ウィジェット化とコード全体

最後にコードをウィジェット化しWordPressの管理画面で追加可能にします。

function popular_entry_widget() {

  $url = array(
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
    '<a href="#">url</a>',
  );

  $c = count($url);
  for( $i = 0; $c > $i; $i++ )
  {
    $popular .= '<li>';
    $popular .= $url[$rand_keys[$i]];
    $popular .= '</li>';
  }

$html = <<< EOF
<aside>
  <p>人気記事</p>
  <ul>
    {$popular}
  </ul>
</aside>
EOF;

  echo $html;
}

// ウィジェット化
wp_register_sidebar_widget(
  'pe_widget',
  'Popular Entry Widget',
  'popular_entry_widget'
);

ウィジェットの利用

functions.phpに追加したウィジェットは、管理画面の

外観 → ウィジェット

からサイドバーに追加することが出来ます。

ウィジェットの開発方法をマスターすることで、動的なウィジェットを開発できるようになります。

• WordPress YouTube動画を表示するサイドバーウィジェットを追加
• WordPressでフォームウィジェットを開発
• サイドバーウィジェットをPHPで追加・削除