当ブログでは本文の下に関連記事を表示させています。Posts」を使用して、関連記事をタイトルのみ表示させていました。Posts」をカスタマイズしてサムネイル付の関連記事一覧を表示させるためのコードを紹介している記事を発見。そちらを参考にしながらプラグインを少しイジって、完成したのが下のようなイメージ。記事本文の下に関連記事の見出し。その下は「左にアイキャッチ画像、右に記事タイトル」の関連記事。これを3段、縦に並べてました。完成してすぐに不満を感じます。関連記事が3つでは物足りない。一つ、これはアイキャッチ画像のサイズのせいなのですが、記事タイトル下の余白がすごくモッタイナイ。上の赤枠で囲んだ部分の余白が無駄に思えて仕方ない。記事タイトルが短い場合は、余白がドーンと大きくなって、関連記事の一覧がスッカスカに見えてしまう。言って文字を大きくし過ぎるのもなんかヘンだし。最大の難点は、プラグインがバージョンアップされる度にコードが上書きされるので、その都度カスタマイズをやり直さなければならない。プラグインを何も考えずにバージョンアップしたら関連記事が表示されなくなり、読者からの指摘で気付きました。デザイン的な不満に加えて、アップデートの都度作業が発生する。やってられないので、それなら自作で関連記事を表示させるようにしよう、ってことで再び方法を調べることにしました。こんな感じのデザイン。(注:上の図はあくまでイメージです。実際はこんなドンピシャなサイズではないです)◆縦展開ではなく横展開にする◆関連記事の表示数を3から5に増やす◆無駄な余白を減らすという当初のカスタマイズ目標が全て達成できます。関連記事を3つ表示させてた頃と同じサイズのアイキャッチ画像を使ってしまうと、画像が大きいために「横に5つ表示」が出来なくなるので、小さいサイズのアイキャッチ画像を使うように変更しました。※WordPressに最初から用意されている画像サイズとは別に、独自で好きなサイズの画像を保存させるようにする設定があります。以下記事で触れていますので参考にしていただければ幸いです(関係ないこともいろいろ書いてます)。関連記事を表示させるPHPコードプラグインを使用せず、PHPコードを組んでオリジナルの関連記事一覧を表示する方法は、いつも勉強させていただいてる「Webクリエイターボックス」さんの記事を参考にさせていただきました。Webクリエイターボックス当初、何のデータを使って「関連」とするのかでいろいろ悩みましたが、最終的に「タグをベースにした関連記事でいこう」という結論に達したので、上記記事を参考にPHPコードを作ってみました。この記事に関連する別記事は現在ありません。?>この記事に関連する別記事は現在ありません。?></ul><?php}?>2行目から16行目までの命令で、当該記事に設定されたのと同じタグを持つ関連記事を取得します。今回の変更では関連記事を5つ表示させたいので、13行目にて‘showposts’=>5と設定しています。17行目は判定文ですね。関連記事が存在した場合は、18~31行の命令を実行します。「関連記事を表示させる」ということになります。関連記事が存在しなかった場合、例えば初めて使うタグだったり、あるいはタグの設定を忘れてるときなどは、33行目の命令のみを実行します。「この記事に関連する別記事は現在ありません。」とだけ表示されます。関連記事を表示させる命令文の中でポイントなのは、27行目。the_post_thumbnail(‘mysize100’);これは「サムネイル画像を表示させなさい」という命令。カッコ内の「mysize100」という値はサムネイル画像の定義名です。WordPressの「functions.php」で独自サイズの画像サイズを指定するとき、画像の定義名を付けなければなりません。その名前をここで指定します。各記事の表示間隔、文字の大きさや改行幅などに関してはCSSで自分好みに設定します。これは私の例ですので、もっと間隔を広げたりだとか、記事タイトルの文字フォントをもっと大きくしたりだとか、お好みで変更してみると面白いですよ。関連記事のリニューアルが完成しました。今回はタグが同一なものを関連記事にしたいので「wp_get_post_tags」というWordPressの関数を使用しましたが、この関数を変えることで、たとえば同一カテゴリーの関連記事も表示させることができます。コードの内容は少々変わりますが、ロジックの考え方は全く同じです。応用が利く方法ですので、カスタマイズしてみたい方々はトライしてみてくださいね。