初心者カスタムフィールドを一覧ページに出力したい…
SWELLで実装できる方法ってないの？
そんな悩みを解決します。
テンプレートファイルを無理にカスタマイズしなくても一覧ページにカスタムフィールドの値を表示する方法を2つ紹介します。
【デモサイト】カスタムフィールドを一覧ページに表示してみた
まずは紹介するカスタマイズを導入したデモサイトです。
デモサイト
デモサイトはWordPress有料テーマSWELLを使っています。
下記画像の赤線部分がカスタムフィールドの情報です。
ちなみにデモサイトのページはカテゴリーのアーカイブページです。タブ、月間アーカイブでも抜粋をサポートしているテーマであればカスタムフィールドの情報は表示されます。
カスタマイズ前の状態だと、一覧ページにはタイトルとアイキャッチ画像のみ表示されます↓
カスタマイズの前提と作業の流れ
今回のカスタマイズはカスタムフィールドに入力したデータをショートコード化して抜粋に埋め込む仕組みです。カテゴリー、タグなどのアーカイブページの出力はテンプレートファイルの抜粋（excerpt）を通します。
ループをカスタマイズしなくていい！
一番のメリットがコレです。
PHPのファイルをあれこれ編集しなくても簡単に実装できるカスタマイズです。ふつう、一覧ページにカスタムフィールドの値を表示するにはPHPファイルをガッツリ編集しないといけません。
この仕組のメリット
- 難易度が低い
- メンテナンスが楽
カスタマイズの前提
以下がカスタマイズの前提条件です。
かんたSWELLは前提条件を満たしているのでスルーでOKです。
前提
- 標準投稿（post）が抜粋をサポートとしている
- アーカイブのテンプレートで抜粋を出力するオプションがある
- 抜粋の出力でショートコードをフィルターできる
とくに③は要注意な項目です。一般的にWordPressの抜粋はショートコードが使えません。繰り返しになりますが、この記事で紹介するカスタマイズは前提を全て満たしているテーマに限った方法です。
抜粋機能が使えないといったオリジナルテーマを使っている場合は、add_post_type_supportでexcerptをサポートするようカスタマイズしておきましょう。
カスタマイズの流れ
まずはざっくりとした全体の流れを把握しましょう。
全体の流れ
- Advanced Custom Fieldsプラグインのインストール
- カスタムフィールドの登録
- ショートコードを作る
かんた各ステップをくわしく説明していきます。
【手順①】Advanced Custom Fieldsプラグインのインストール
Advanced Custom Fieldsは無料プラグインです。有効化するとカスタムフィールドをノーコードで拡張できる便利なプラグイン。WordPress公式プラグインディレクトリに登録されています。
WordPressダッシュボードの「プラグイン」から追加してください。
どのプラグインなのか判断つかない人は以下のリンクからzip形式のプラグインファイルをダウンロードし、WordPressにアップロードしてもOKです。
かんたアップロード後はプラグインを有効化しましょう。
【手順②】カスタムフィールドの登録
Advanced Custom Fieldsプラグインを有効化すると、ダッシュボード左側のメニューに「カスタムフィールド」というメニューが追加されます。
「カスタムフィールド」をクリック
「新規追加」をクリックします。
任意のタイトルを入力する
「フィールドを追加」をクリック。
今回の例では「求人情報」とタイトルに入力しています。
設定は以下3つです。
| 項目 | 入力例 |
|---|---|
| フィールドラベル | 抜粋情報 |
| フィールド名 | excerpt |
| フィールドタイプ | Wysiwygエディタ |
「フィールドラベル」と「フィールドタイプ」は任意のものでOKです。
それ以外はノータッチ。
かんた更新ボタンを押してデータを保存してください。
【手順③】ショートコードを作る
このステップではカスタムフィールドをショートコードとして呼び出せる仕組みを作ります。
テーマファイルの「functions.phpを直書きする方法」と「Code Snippetsプラグインを使って安全に作業する方法」があります。functions.phpを編集するさい、誤ったコードを追加するとサイトが表示されなくなります。
今回は安全に作業できるCode Snippetsプラグインを使う方法を紹介します。
Code SnippetsはWordPress公式ディレクトリーに登録してある無料プラグインです。ダッシュボードの「プラグイン」から検索するか、以下のリンクよりファイルをダウンロードした後、サイトにアップロードして有効化してください。
かんたsnippetsでショートコードを作成していきます。
Snippetsの「Add New（新規追加）」をクリック。
適当なタイトルを入力し、Code部分に以下のコードを書きます。
function example01() {
$kantaex = get_post_meta(get_the_ID(), 'excerpt', true);
return $kantaex;
}
add_shortcode('showexcerpt', 'example01');
オプションはノータッチで、そのまま「Save Changes（設定を保存）」をクリック。
以上でカスタマイズは完了です。
かんた次はどんな感じで運用するかを解説します。
運用編
カスタマイズ導入後の運用についてです。
- コンテンツの作成・更新について
- テーマのアップデート作業について
コンテンツの作成・更新について
一覧ページに情報を表示するには、ざっくり2つのステップが必要です。
- カスタムフィールドに任意の値を入力する
- ショートコードを抜粋に設置する
かんたそれぞれのステップを解説します。
【運用ステップ①】カスタムフィールドに任意の値を入力する
投稿画面の下部に登録したカスタムフィールド入力欄が表示されます。
ここに一覧ページで表示する内容を入力します。
カスタムフィールドの入力エディターとしてWysiwygエディタを選択している場合はHTMLが使えます。デモサイトではテーブルタグ（table）タグでマークアップしています。
以下デモサイトで使ったサンプルコードです。
HTMLコード
<table class="kanta-expert">
<tbody>
<tr>
<th>勤務地</th>
<td>千葉</td>
</tr>
<tr>
<th>業種</th>
<td>飲食</td>
</tr>
<tr>
<th>給料</th>
<td>21万円</td>
</tr>
</tbody>
</table>CSSコード
table.kanta-expert{
width:100%;
}
table.kanta-expert th,td{
padding:7px !important;
}
table.kanta-expert tr{
border-bottom:1px solid #dddddd;
}【運用ステップ②】ショートコードを抜粋に設置する
投稿編集画面でショートコードを「抜粋」に設置します。
貼り付けるショートコードは以下の通りです。ショートコードは全ページ共通です。
[showexcerpt]設定を保存すれば作業終了です！
Code Snippetsプラグインを使っている場合はテーマの更新もできる
今回の独自カスタマイズではカスタムフィールドをショートコード化する為にテーマのfunctions.phpにコードを追加します。
テーマ内のfunctions.phpに直接コードを追加している場合はテーマのアップデートで設定が消えます。予めバックアップをとり、テーマのアップデート後にカスタマイズコードを再度設定する必要があります。正直めんどうで、うっかり忘れてしまうリスクがあります。
Snippetsプラグインを使っている場合はテーマのアップデートによる影響はありません。
かんた運用面からSnippetsプラグインがおすすめです。
FAQ
カスタムフィールドを一覧テンプレートに表示するカスタマイズのFAQです。
ショートコードがそのまま表示される
テーマの抜粋出力でショートコードがフィルターされていないのが可能性があります。
SWELLを使っている場合はテーマのバージョンを2.5.3.5以上にアップデートしてください。
SWELLの2.5.3.5未満でも抜粋を表示したい！
テーマファイルを直接書き換えることで実現できます。
/parts/post_list/style_normal.phpが対象のファイルで55行目を以下のコードで置き換えましょう。
変更前
<?php echo $excerpt; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
変更後
<?php echo do_shortcode(get_the_excerpt()); ?>一覧ページでショートコードも表示されない
出力する抜粋の文字数が「0」になっている場合に表示されません。
テーマの設定を見直しましょう。
カスタムフィールド値をそのまま記事一覧テンプレートに表示させる方法
抜粋ではなく、カスタムフィールドをそのまま出力する方法についてです。
SWELLのテンプレートを編集せず、カテゴリーや検索結果などの一覧ページにカスタムフィールドの値を出力することは可能です。
かんた詳しくは次の記事で解説しています。
まとめ
カスタムフィールドの値を一覧ページへ表示するカスタマイズでした。ショートコードが抜粋に対応しているテーマを使うのが最低条件です。
今回のカスタマイズはSWELLの最新バージョン（2.5.3.5）で実装しています。SWELL2.5.3.5未満の場合、アーカイブページの抜粋でショートコードを使うことはできません。
記事内で紹介したプラグイン