WordPress 系のブログを訪問すると、皆さんサムネイル付きのシャレオツ（死語）な「関連記事」を表示しなさっておいでですが、個人的な趣味でうちのブログには文字だけのシンプルな関連記事にしたいなぁと思い調べたところ、「WordPress Related Posts」というプラグインが手軽にはじめられそうでいいなと思い、試してみたので記事にまとめておきまする。
完成品はこちらです。
ダウンロード
こちらからどうぞ。
WordPress > WordPress Related Posts ≪ WordPress Plugins
設定
WordPress 管理画面より「設定」→「WordPress Related Posts」と選択すると設定画面に移動できます。
それではさくさくと設定してまいりましょう。
Basic settings
「Related Posts Title」でタイトルを設定できます。H3 タグで囲まれ、related_post_title というクラスが割り振られます。「Number of Posts」は表示するタイトルの数を設定できます。
Advanced settings
「Layout」でどのようにエントリーに関連記事を表示するのかを設定できます。右側にプレビューが表示されるので、いちいちエントリーを確認せずに雰囲気をつかめて便利なのです。
今回はシンプルな関連記事にしたいので「Plain (your own css)」を選択。
次に「Customize」の設定へ。文字のみの関連記事なので「Display Thumbnails For Related Posts」のチェックは外します。ここのチェックを外しておかないと、「Plain (your own css)」を選択したにもかかわらずサムネイルが表示されてしまうので注意。コメント数やエントリー作成日時の表示をさせたい場合も、ここで設定します。
この設定画面内で CSS の設定ができそうなかんじがしますが、それについては後述。
Other Settings
このプラグインはテーマファイルを編集しなくても、自動で関連記事を吐き出してくれます。試してみたのですが、期待していた場所に表示されなかったので、「Auto Insert Related Posts (or add <?php wp_related_posts()?> to your single post template)」のチェックは外しました。
その他
シンプルな関連記事ならここで設定は終わりですが、この他にも設定できることがあります。このプラグインは記事に設定されているアイキャッチ画像をサムネイルとして表示してくれるのですが、サムネイル画像がない場合に表示するデフォルト画像を設定することができます。また、関連記事として表示したくない記事をカテゴリー単位で決めることが可能です。
あと、WordPress Related Posts プラグインの説明をしているブログ記事などを見ますと、スマホの表示に関する設定ができると書かれていたりしますが、現在のバージョン４.３ではそのような設定画面がありません。ソースを確認していないのではっきりとは言えませんが、プラグインの作者さんが対応してくれたのだと思います。多分。
single.php の編集
関連記事を表示したい場所に次のソースコードを挿入します。
1 | <?php wp_related_posts(); ?> |
CSS の設定
先ほどの管理画面からの CSS によるスタイル指定なんですが、
「Enable custom CSS」にチェックを入れ、上のように設定をしてもテーマに反映されない Layout があります。この場合、「(wordpress インストールフォルダ)/wp-content/plugins/wordpress-23-related-posts-plugin/static/themes」以下に置かれている CSS ファイルを編集すると解決するはずです。Layout に合わせて複数の CSS があるので、自分が利用する Layout の CSS を見つけるようにしてください。
プラグインのバージョンアップで CSS が上書きされる可能性があるので、スタイルの指定が終わったら CSS ファイルをどこかにコピーしておいたほうがいいでしょう。
表示する関連記事を指定できる
WordPress にログインした状態で自分のエントリーにアクセスすると、
このように「Edit Related Posts」というボタンが表示されます。これを押すと設定画面に移行します。下部分に記事の一覧がありますので、
表示させたい記事をドラッグ＆ドロップで持っていき、「Save and Close」すれば、
記事に反映されます。
Comment