投稿:2017年07月07日WordPressに関連記事があると、一つのページを読み終えた人が他のぺージにも訪れる確率が上がります。サイトの滞在時間も増えて、複数のページを読んで貰えるので設置するのがお勧めです。通常は関連記事は、個別ページの最下層に設置します。記事を読み終えた人が関連記事を見て、次の記事に興味を持ち移動して貰うためです。関連記事はWordPressプラグインを使えば簡単に実装できます。WordPressに関連記事を出力するPHPがあるので、何でもプラグインに頼るのは良くないと思います。自分で設定する方が柔軟にカスタマイズできるので、作成方法を覚えておくと良いと思います。関連記事は、記事が所属するカテゴリーやタグからランダムに他の記事を表示させます。サイトのカテゴリーにWordPressがあるとします。そのカテゴリー(WordPress)に所属する記事が、関連記事部分に表示されます。このページでは、WordPressプラグインなしで関連記事を表示させる方法をご紹介します。関連記事の設定はサンプルコードを使用して装備すれば簡単です。コピー&ペーストでOKです。詳しいコードの解説もしますので覚えてください。記事が所属するカテゴリーに関する関連記事が表示されます。サムネイル画像が付いていてわかりやすいタイプです。以下のコードを投稿記事ページのテンプレート部分に記述します。関連記事を表示したい部分に記述してください。通常であれば、投稿記事ページは、index.phpやsingle.phpを使用します。?>それぞれのコードの意味を解説します。has_category()has_category()でカテゴリーの関連記事がある場合にのみ表示されます。関連記事が無い場合は何も表示されません。get_the_category()get_the_category()で記事が所属するカテゴリーのみからデータを抽出します。記事が複数のカテゴリーに所属している場合は、全てのカテゴリーから抽出されます。post_type投稿記事ページであれば「post」、固定ページであれば「page」を記述します。posts_per_page表示する記事の数を記述します。post__not_in表示中の記事を関連記事から除外します。category__inget_the_category()で抽出したカテゴリーに属する記事のみを出力の対象とします。orderby「rand」でランダムにカテゴリー内から関連記事を表示します。「date」で日付順でカテゴリー内から関連記事を表示します。「modified」で更新日順でカテゴリー内から関連記事を表示します。has_post_thumbnail()サムネイル画像を表示するコードです。記事に登録されているアイキャッチ画像が表示されます。無い場合は記事内の1番目にある画像が表示されます。それもない場合は、「NoImege」画像が表示されます。「NoImege」画像は予め使用しているテーマのディレクトリ内にアップロードしておきます。次の画像はサンプルです。保存して使用してください。記事が所属するカテゴリーに関する関連記事の一覧表示をします。記事が所属するタグに関する関連記事が表示されます。サムネイル画像が付いているタイプです。記事が複数のタグに所属している場合でも、問題ありません。複数のタグからランダムに関連記事が表示されます。?>タグ分けによる関連記事の一覧表示サムネイル画像なしで記事が所属するタグに関する関連記の一覧表示をします。?>CSSのサンプル関連記事のCSSサンプルを記載します。CSSのflex(フレキシブルボックス)を使ってデザイン指定しています。通常は、floatを使って横並びに設定しますが、2段組になるの高さの幅が統一できません。flexを使用すれば簡単にfloatのようなボックスが組めて、高さの統一やメンテナンス性も良いのでお勧めです。今後のWEB業界としてはfloatが使われなくなり、flexに変わっていきます。機会があれば勉強してみてください。以下のCSSコードをstyle.cssに記述します。0;}}まとめ今回はWordPressプラグインなしで関連記事を表示する方法を紹介しました。以外と簡単にできるため、プラグインは不要だと思いました。関連記事があるのとないのとではサイト滞在時間も大違いです。普通なら一つの記事を読み終えれば他のサイトに移動することが多いです。関連記事があれば、複数のページに訪れて貰えて回遊率も上がります。WordPressサイトを制作する上で、関連記事はかなり重要ですので是非設置しましょう。記事をお読みいただきありがとうございました。