「WordPress Related Posts」でシンプルな関連記事を表示してみる

 WordPress 系のブログを訪問すると、皆さんサムネイル付きのシャレオツ(死語)な「関連記事」を表示しなさっておいでですが、個人的な趣味でうちのブログには文字だけのシンプルな関連記事にしたいなぁと思い調べたところ、「WordPress Related Posts」というプラグインが手軽にはじめられそうでいいなと思い、試してみたので記事にまとめておきまする。

完成品はこちらです。

20150915_9

ダウンロード

 こちらからどうぞ。

WordPress > WordPress Related Posts ≪ WordPress Plugins

20150915_1

設定

 WordPress 管理画面より「設定」→「WordPress Related Posts」と選択すると設定画面に移動できます。

20150915_2

それではさくさくと設定してまいりましょう。

20150915_3

Basic settings

20150915_4

「Related Posts Title」でタイトルを設定できます。H3 タグで囲まれ、related_post_title というクラスが割り振られます。「Number of Posts」は表示するタイトルの数を設定できます。

Advanced settings

20150915_5

「Layout」でどのようにエントリーに関連記事を表示するのかを設定できます。右側にプレビューが表示されるので、いちいちエントリーを確認せずに雰囲気をつかめて便利なのです。

今回はシンプルな関連記事にしたいので「Plain (your own css)」を選択。

20150915_6

次に「Customize」の設定へ。文字のみの関連記事なので「Display Thumbnails For Related Posts」のチェックは外します。ここのチェックを外しておかないと、「Plain (your own css)」を選択したにもかかわらずサムネイルが表示されてしまうので注意。コメント数やエントリー作成日時の表示をさせたい場合も、ここで設定します。

この設定画面内で CSS の設定ができそうなかんじがしますが、それについては後述。

Other Settings

20150915_7

このプラグインはテーマファイルを編集しなくても、自動で関連記事を吐き出してくれます。試してみたのですが、期待していた場所に表示されなかったので、「Auto Insert Related Posts (or add <?php wp_related_posts()?> to your single post template)」のチェックは外しました。

その他

 シンプルな関連記事ならここで設定は終わりですが、この他にも設定できることがあります。このプラグインは記事に設定されているアイキャッチ画像をサムネイルとして表示してくれるのですが、サムネイル画像がない場合に表示するデフォルト画像を設定することができます。また、関連記事として表示したくない記事をカテゴリー単位で決めることが可能です。

 あと、WordPress Related Posts プラグインの説明をしているブログ記事などを見ますと、スマホの表示に関する設定ができると書かれていたりしますが、現在のバージョン4.3ではそのような設定画面がありません。ソースを確認していないのではっきりとは言えませんが、プラグインの作者さんが対応してくれたのだと思います。多分。

single.php の編集

関連記事を表示したい場所に次のソースコードを挿入します。

CSS の設定

先ほどの管理画面からの CSS によるスタイル指定なんですが、

20150915_8

「Enable custom CSS」にチェックを入れ、上のように設定をしてもテーマに反映されない Layout があります。この場合、「(wordpress インストールフォルダ)/wp-content/plugins/wordpress-23-related-posts-plugin/static/themes」以下に置かれている CSS ファイルを編集すると解決するはずです。Layout に合わせて複数の CSS があるので、自分が利用する Layout の CSS を見つけるようにしてください。

 プラグインのバージョンアップで CSS が上書きされる可能性があるので、スタイルの指定が終わったら CSS ファイルをどこかにコピーしておいたほうがいいでしょう。

20150915_9

表示する関連記事を指定できる

 WordPress にログインした状態で自分のエントリーにアクセスすると、

20150915_10

このように「Edit Related Posts」というボタンが表示されます。これを押すと設定画面に移行します。下部分に記事の一覧がありますので、

20150915_11

表示させたい記事をドラッグ&ドロップで持っていき、「Save and Close」すれば、

20150915_12

記事に反映されます。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP