【サンプルコード付き】カスタムフィールドの値を一覧ページに表示するカスタマイズ

初心者

カスタムフィールドを一覧ページに出力したい…
SWELLで実装できる方法ってないの?

そんな悩みを解決します。

テンプレートファイルを無理にカスタマイズしなくても一覧ページにカスタムフィールドの値を表示する方法を紹介します。複雑な作業はなく、慣れていない人でも5分程度で完了するレベルです。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
かんた です
目次

【デモサイト】カスタムフィールドを一覧ページに表示してみた

【デモサイト】カスタムフィールドを一覧表示に追加してみた

まずは紹介するカスタマイズを導入したデモサイトです。

デモサイト

デモサイトはWordPress有料テーマSWELLを使っています。

下記画像の赤線部分がカスタムフィールドの情報です。

ちなみにデモサイトのページはカテゴリーのアーカイブページです。タブ、月間アーカイブでも抜粋をサポートしているテーマであればカスタムフィールドの情報は表示されます。

カスタマイズ前の状態だと、一覧ページにはタイトルとアイキャッチ画像のみ表示されます↓

カスタマイズの前提と作業の流れ

カスタマイズの方法と仕組み

今回のカスタマイズはカスタムフィールドに入力したデータをショートコード化して抜粋に埋め込む仕組みです。カテゴリー、タグなどのアーカイブページの出力はテンプレートファイルの抜粋(excerpt)を通します。

ループをカスタマイズしなくていい!

一番のメリットがコレです。

PHPのファイルをあれこれ編集しなくても簡単に実装できるカスタマイズです。ふつう、一覧ページにカスタムフィールドの値を表示するにはPHPファイルをガッツリ編集しないといけません。

この仕組のメリット

  • 難易度が低い
  • メンテナンスが楽

カスタマイズの前提

以下がカスタマイズの前提条件です。

かんた

SWELLは前提条件を満たしているのでスルーでOKです。

前提

  1. 標準投稿(post)が抜粋をサポートとしている
  2. アーカイブのテンプレートで抜粋を出力するオプションがある
  3. 抜粋の出力でショートコードをフィルターできる

とくに③は要注意な項目です。一般的にWordPressの抜粋はショートコードが使えません。繰り返しになりますが、この記事で紹介するカスタマイズは前提を全て満たしているテーマに限った方法です。

抜粋機能が使えないといったオリジナルテーマを使っている場合は、add_post_type_supportでexcerptをサポートするようカスタマイズしておきましょう。

本記事は全条件をクリアしているSWELLの最新バージョン(2.5.3.5~)での解説です。

カスタマイズの流れ

まずはざっくりとした全体の流れを把握しましょう。

全体の流れ

  1. Advanced Custom Fieldsプラグインのインストール
  2. カスタムフィールドの登録
  3. ショートコードを作る
かんた

各ステップをくわしく説明していきます。

【手順①】Advanced Custom Fieldsプラグインのインストール

【手順①】Advanced Custom Fieldsプラグインのインストール

Advanced Custom Fieldsは無料プラグインです。有効化するとカスタムフィールドをノーコードで拡張できる便利なプラグイン。WordPress公式プラグインディレクトリに登録されています。

WordPressダッシュボードの「プラグイン」から追加してください。

似たような名称のプラグインがあるので「Advanced Custom Fields」であることをしっかり確認しましょう。

どのプラグインなのか判断つかない人は以下のリンクからzip形式のプラグインファイルをダウンロードし、WordPressにアップロードしてもOKです。

かんた

アップロード後はプラグインを有効化しましょう。

【手順②】カスタムフィールドの登録

Advanced Custom Fieldsプラグインを有効化すると、ダッシュボード左側のメニューに「カスタムフィールド」というメニューが追加されます。

操作内容

カスタムフィールド」をクリック

新規追加」をクリックします。

操作内容

任意のタイトルを入力する

フィールドを追加」をクリック。


今回の例では「求人情報」とタイトルに入力しています。

操作内容

設定は以下3つです。

項目入力例
フィールドラベル 抜粋情報
フィールド名 excerpt
フィールドタイプ Wysiwygエディタ
Advanced Custom Fields の設定例

「フィールドラベル」と「フィールドタイプ」は任意のもので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(設定を保存)」をクリック。

以上でカスタマイズは完了です。

かんた

次はどんな感じで運用するかを解説します。

運用編

運用編

カスタマイズ導入後の運用についてです。

  1. コンテンツの作成・更新について
  2. テーマのアップデート作業について

コンテンツの作成・更新について

一覧ページに情報を表示するには、ざっくり2つのステップが必要です。

  1. カスタムフィールドに任意の値を入力する
  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

カスタムフィールドを一覧テンプレートに表示するカスタマイズの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()); ?>

SWELL2.3.5の場合です。

一覧ページでショートコードも表示されない

出力する抜粋の文字数が「0」になっている場合に表示されません。
テーマの設定を見直しましょう。

まとめ

カスタムフィールドの値を一覧ページへ表示するカスタマイズでした。ショートコードが抜粋に対応しているテーマを使うのが最低条件です。

今回のカスタマイズはSWELLの最新バージョン(2.5.3.5)で実装しています。SWELL2.5.3.5未満の場合、アーカイブページの抜粋でショートコードを使うことはできません。

記事内で紹介したプラグイン

よかったらシェアしてね!
もくじ
先頭へ
目次
閉じる