2023/05/26今回作成方法を紹介するのは、関連記事の表示処理だ。ブログサイトやニュースサイトで一度は目にしたことがあると思うが、今回はプラグインは使用せずに実装していく。この記事は以下の方におすすめ。WordPressサイトに関連記事を表示したいプラグインを使用せずに実装したいプラグインを使用しないのは不要な処理を少なくして、サイト読込みスピードを向上させることが狙いである。紹介する機能は閲覧中の記事を除く同カテゴリの記事を8件表示する処理だ。こんな感じで横4列、縦2列の計8件の記事を表示する仕様だ。スマホ表示にも対応してスマホの場合は横2列、縦4列表示するようにした。WordPress関連記事の表示プログラムまず前置きとして今回デザインはBootstrapというCSSフレームワークを採用している。このフレームワークを使用することで面倒なレスポンシブ対応やデザインを簡単にやってくれる。下記の記述をヘッダーに組み込むだけで使用可能となる。rel="stylesheet">ただこのフレームワークはサイズが大きく重量級のためサイト表示スピードに若干影響を及ぼしてしまう。そのため、本サイトではフレームワークを必要最小限に絞り込んで軽量化を測っている。軽量化の方法は下記リンクの記事で詳細説明しているので、こだわりたい方は参考にしてもらいたい。CSSを最適化し、軽量化する方法:サイト速度を飛躍的に向上させる!表示側のメインプログラムは以下の通り。wp_reset_query();}?></div>ちなみに、Bootstrapを使用しない場合はクラス名を独自のものに書き換えてCSSでデザインを当てることで流用可能だ。基本Bootstrapでデザインしているが細かい微調整などはCSSで実施している。0;}CSSは本サイト用に背景やフォントカラーを設定しているので適宜変更して利用しよう。WordPress関連記事の表示プログラム補足プログラムについて補足する。表示部分の処理についてだるが、記事の検索は「WP_Query」関数に引数を渡して同じカテゴリの記事を検索してくる。ここの設定で様々な検索ができるので調べて独自設定をしてみても面白い。サンプルプログラムは下記。WP_Query($args);ここに検索する記事の条件を記入する。設定値についてはプログラム中のコメントを参照して欲しい。記事のレスポンシブ対応の制御は以下で実施。Bootstrapのグリッドレイアウトを使用している。4行のように表示するという設定にしている。lg,smという部分は画面サイズのブレークポイントを表しており、無印がそれ以外を表している。数字の部分は列数を表している。Bootstrapでは画面を12分割して要素をその割合で配置していく。今回の場合は例えば数字に12を入れてみよう。col-12">';すると下記の通り1列表示になる。col-1">';答えはこんな感じで12列配置となる。Bootstrapのグリッドシステムはサイトデザインする際にかなり便利なので覚えておくことをおすすめする。下記に公式サイトのリンクを記載しておく。新規タブで開く:BootstrapのグリッドシステムWordPress関連記事の表示機能作成手順:さいごに今回は自作で関連記事の作成方法について述べた。WordPress関数を使用すれば処理として少量のコードで作成ができる。デザイン面の設定がやや面倒であるものの、BootstrapなどCSSフレームワークを駆使すればかなり容易にいい感じにそれっぽく仕上がるので是非トライしてみよう。したサイトのDIYは面倒な面もあるのも確かだがやはり人とは違ったオリジナルのものを作るのが一番楽しいしモチベーションが上がるというものだ。いう自作も構想だけして終わるのか、実際に手を動かして作って見るかで経験値に雲泥の差がある。言っても結局はやるやつはやるし、やらないやつはやらないのだ。ここまで読んでいただき感謝。スマホとPC対応のナビゲーションメニューハンバーガーメニュー不要論:ユーザーエンゲージメント向上のためのウェブ...SEOに効果大!WordPressサイトの表示速度改善テクニックと実践...Bootstrapを使ってWordPressページネーションを自作する...SEOを強化するWordPressの目次の簡単自作法:プラグインは不要...WordPressでパンくずリストを自作!コピペでOKWordPressオリジナルテーマへのトップページへ戻るボタン追加(j...WordPressオリジナルテーマへのmetaディスクリプション追加(...NORIAKI昭和生まれ。大学は情報工学を専攻、都内IT関係企業に数年勤務→転職しメーカ社内SEになる。