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

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

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

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

設定手順

前提

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

ウィジェット内で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>

CSSの調整(デザインの調整)

表示に関しては、CSSを編集して調整してください。
「最近の投稿」などに登録されているHTMLを転用するとCSSの編集が少なくて済むので便利かもしれません。

テンプレートの作り方などは、書籍などで学ぶのが早いです。

オススメ書籍

世界一わかりやすいWordPress 導入とサイト制作の教科書 (世界一わかりやすい教科書)
安藤 篤史 岡本 秀高 古賀 海人 深沢 幸治郎
技術評論社
売り上げランキング: 10,090