【手順】スタッフが選ぶ「イチオシの記事」をWordPressで構築したブログに表示させる方法

2017年10月16日

スタッフや管理人が選ぶ「イチオシの記事」をWordpressで構築したブログに表示させる方法をご紹介します。

ユーザーが任意で選ぶ、記事一覧表示はないため（自動生成のウィジェットはない）、HTMLで静的に登録したり、テンプレートをガリガリとコーディングする必要がありますが、メンテナンスがめんどくさいので今回の記事の方法にいたりました。

記事の登録には、Wordpress標準のカスタムメニューを使っています。
カスタムメニューとして登録することで、スクリプトにさわることなく、視覚的に記事リストを変更できます。また、元記事のタイトルやURLを変更しても、メニューに反映させるため、大変便利です。追加・削除・変更も容易です。

設定手順

前提

[ul]Wordpress利用
Wordpressプラグイン追加
記事にサムネイル画像がないとだめ
[/ul]

ウィジェット内でPHPを実行するプラグインの追加

今回は、ウィジェット内でPHPスクリプトを実行する必要があります。しかし、Wordpressはデフォルトでウィジェット内でPHPを実行できないため、実行するためのプラグインを導入します。

WordPressのウィジェットにPHPコードが記述できるPHP Code Widgetプラグインの使い方
love-guava.com/wordpress-php-code-widget-plugin/

カスタムメニューの作成

カスタムメニューを新規に作成します。
名前はPHPコードに登録するために、控えておきます。英語名が推奨です。（ここでは、「top_pickup」と命名）

イチオシ記事として表示させるための記事をカスタムメニューとして登録します。

メニューを保存します。

ウィジェットに登録するPHPコード（テンプレート）の例

ウィジェットのPHPコードボックスをサイドバーに追加して、下記のPHPテンプレートを登録します。
必要に応じて、変更してください。

下記は、例として、ulタグ、liタグでサムネイルと記事タイトルをシンプルに出力するスクリプトです。

<?php
$menu_items = wp_get_nav_menu_items('top_pickup');  // カスタムメニューの名前
foreach ($menu_items as $menu):
  $page_id = $menu->object_id;
  $thumbnail_id = get_post_thumbnail_id($page_id);
  $image_attributes = wp_get_attachment_image_src($thumbnail_id);
  $content = get_post($page_id);
?>
<ul>
    <li>
        <a href="<?php echo get_permalink($page_id); ?>" title="<?php echo $content->post_title; ?>">
            <figure>
                <img width="94" height="60" src="<?php echo $image_attributes&#91;0&#93;; ?>" alt="" >
            </figure>
            <?php echo $content->post_title; ?>
            <span><?php echo mysql2date('Y年n月j日', $content->post_modified); ?></span>
        </a>
    </li>
    <?php endforeach; ?>
</ul>
----------------------------------------------
<ul>
</ul>
  <li class="<?php echo $content->post_name; ?>">
    <a href="<?php echo get_permalink($page_id); ?>">
      <img src="<?php echo $image_attributes&#91;0&#93;; ?>" alt="" width="<?php echo $image_attributes&#91;1&#93;; ?>" height="<?php echo $image_attributes&#91;2&#93;; ?>" />
      <?php echo $content->post_title; ?>
    </a>
  </li>