【WordPress】カスタムフィールドを使って投稿ごとに「関連記事」を設定する

  • このエントリーをはてなブックマークに追加

 関連記事を表示するプラグインを使用することもできますが、あまり融通が利かなかったり、CSSの調整が面倒だったりなので、制作に慣れている方であれば、自分でゼロから設定してしまった方が早い場合があります。

 今回は、カスタムフィールドを追加するプラグインを使用して、各投稿ごとに関連記事を設定できるようにします。関連記事という使い方ですが、記事は手動の選択制で、1つめが未設定であればランダム表示するだけなので厳密に言えば関連記事ではありませんが、サイト内を周回させたいだけであれば大体これで事足ります。

要件

【仕様】
・投稿作成時に、編集画面で「関連する記事」を手動で選択する。
・「関連する記事」の1つめが選択されていない場合は、今までの記事をランダムで表示する。

【使用するプラグイン】
Advanced Custom Fields(カスタムフィールドを作成するプラグイン)

【作業の流れ】
01.カスタムフィールドを設定する
02.投稿詳細のPHPファイルに表示領域を追加
03.CSSの調整(独自でゼロから設定)
04.各投稿の編集画面で関連記事を設定


導入方法

01.カスタムフィールドを設定する

 まず、プラグイン「Advanced Custom Fields」をインストールします。
インストール後、ボタンが「有効化」に変わるので有効化までしてください。


カスタムフィールドを新規追加します。


新規追加の画面です。今回は、関連記事を3件選べるようにします。



入力中の画面です。「フィールドを追加」して、まずは関連記事の入力欄1つめを作ります。


—-
【各項目の解説】
・フィールドラベル
 投稿編集画面に表示される項目名です。任意で好きな名前を付けます。今回は「関連記事[1]」としました。
・フィールド名
 テンプレートに出力する際に使用します。半角英数字で、一意の名前を付けてください。今回は「related1」としました。表の画面に表示する際、連番でタグを出力するので、必ず末尾を数値の連番にしてください。
・フィールドタイプ
 「投稿オブジェクト」を選択してください。これで過去の記事を選択できるようになります。
・投稿タイプで絞り込み
 記事のみ選択、固定ページを除外、カスタム投稿タイプも含める…など、条件に合わせて自由に選択してください。今回は通常のpostのみ取得したいので「投稿」を選択しました。
・タクソノミーで絞り込み
 タクソノミーでの条件を付与したい場合は選択してください。
・空の値を許可するか?
 選択しなければランダムで表示、という条件にしたいので、「はい」にして空の値を許可します。※絶対に選択してほしい場合は「いいえ」にしても表示に問題はありません。
・返り値のフォーマット
 ここは「投稿ID」を選択してください。
—-

 これで1つめのフィールドが完成です。これと同様にフィールドを追加し、3件分のフィールドを作成します。フィールド名は連番にして欲しいので、2つめは「related2」、3つめは「related3」といったルールで増やしてください。4件でも5件でも、3件以上追加しても構いません。

 以下が、3件登録した状態です。登録が完了したら、どの投稿タイプに適用するかを選択します。通常のpostに表示したい場合はそのままで大丈夫です。カスタム投稿タイプに適用する場合は、該当のカスタム投稿タイプを選択します。


ここまで完了したら、フィールドグループを「公開」してください。



02.投稿詳細のPHPファイルに表示領域を追加

 次に、投稿詳細のテンプレートPHPに表示領域を追加します。投稿詳細のページは、テーマのフォルダの中に「single.php」か「singular.php」という名前で存在しています。カスタム投稿タイプの場合は single-xxxx.php といったファイル名になっていると思います。(xxxxのところに、カスタム投稿タイプのタイプ名が入ります。single-movie.phpとかですね。)

 ファイルを開いたら、挿入したい箇所に以下のタグをコピペしてください。



タグを調整する場合は、「ループするタグ」の中身を調整してください。自動ループ用と、選択時の出力と、2ヶ所あります。
※1 数値を表示したい件数に変えてください。
※2 手順01で設定した、関連記事1つめのフィールド名を入力します。今回はrelated1です。
※3 投稿タイプを設定します。今回はpostにしました。カスタム投稿タイプを使用する場合は、カスタム投稿タイプの名前を入れてください。
※4 ※2と同じく、関連記事1つめのフィールド名を挿入します。ただし、連番の最後の数値を抜いてください。

03.CSSの調整

CSSは、タグに合わせて自由に調整してください。


04.各投稿の編集画面で関連記事を設定

 投稿の編集画面を見ると、エディターの下部に「関連記事」の項目が追加されています。


ここを選択して、記事を投稿すれば投稿詳細画面に反映されます。

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

プログラミング

SharePoint リストに書式の変更からJSONで記述してCSSを適用する方法

SharePointのモダンUIで、リストの書式設定をJSON形式で入力することにより、カスタムCSSを適用してみましょう。 今回は、このようなリンクリストを作成します。 WEBパーツで似たような形を作れますが、細かいCSSが調整できません。リストのWEBパーツとして複数のページで使用すると、一度の修正で全てのページに修正が適用されます。サイト内で共通で使いたいパーツをこのように使用すると便利です。 目次1 前提条件1.1 使用できるHTMLタグやCSSが限られている2 リス […]

プログラミング

SharePointで作成したサイトを別環境にコピーする方法(サイトテンプレートの使い方)

SharePointのモダンUIで作成したサイトは、サイトテンプレートを生成すると簡単に複製できます。 テスト環境で作成したサイトを本番環境に移行する場合などに使えるかもしれません。 目次1 前提条件1.1 権限の確認2 手順3 1.カスタムスクリプトを許可する4 2.サイトをテンプレートとして保存5 3.新規サイトを作成6 4.テンプレートを適用 前提条件 SharePoint Online モダンUI チームサイト サイトテンプレートがサポートされているのはチームサイトの […]

プログラミング

SharePoint Framework(SPFx)で作ったカスタムアプリをサイトに追加・公開する方法

SharePointのモダンUI向けに作成したSharePoint Framework(以降SPFx)の独自アプリを、SharePoint Onlineに展開するには、パッケージ化してサイトに追加する必要があります。 今回はサイトに適用するまでの方法と手順をまとめました。 目次1 前提条件1.1 権限の確認2 1.パッケージ化3 2.App Catalogからアプリをアップロード、動作を確認3.1 App Catalogにアクセスし、.sppkgファイルをアップロード3.2 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。