コンテンツ制作ブログ

デジタルマーケティング、コンテンツマーケティング、
データ分析などに関するお役立ち情報を発信

WordPressカスタムフィールド(custom fields)

2021年6月22日

こんにちは、サイト管理やサーバーの運用業務を担当するエンジニアのWestomです。

前回WordPressのカスタムコンテンツタイプを紹介しました。今回はWordPressカスタマイズのもう一つのポイント:「カスタムフィールド」をさらに紹介します。前回のコンテンツでは、カスタムフィールドを使用するコンテキストについて説明しました。

各支店の住所や連絡先情報など、個々のコンテンツに添付されたメタデータ。

一般的なSEOプラグインを例として、SEOプラグインをインストールすると、投稿を編集しているときに他のフィールドが表示され、ページタイトル、説明、さらにはSNS(Open Graphタグ)などのさまざまなメタデータを入力できます。

目次

WordPressにカスタムフィールドを追加します:ACF

カスタムコンテンツタイプと同様に、カスタムフィールドもプラグインを経由して管理することができます。 その中で最も広く使用されているのは、Advanced Custom Fields(一般に「ACF」として呼ばれています)です。 ACFを使用すると、インターフェイスを経由してカスタムフィールドを直接管理できます。

カスタムフィールドを管理する

無料版のACFには、32個のフィールドから選択できます。一般的なフィールドは次のとおりです。

フィールド名説明
テキスト (Text)SEOプラグインの「タイトル」などの1行のテキストを保存するために使用されます。
テキストエリア (Text area)SEOプラグインの「説明」など、複数行のテキストを保存するために使用されます。
画像 (Image)画像をアップロードし、画像オブジェクトまたは配列を返すために使用できます。
日付ピッカー (Date Picker)特定の日付を保存するために使用でき、投稿の有効期間をカスタマイズするために使用できます(プロモーションなど)。
投稿オブジェクト (Post Object)一連のコンテンツ(post)を関連付けるために使用できます 。

「投稿オブジェクト」については、前回の投稿で、WordPressはすべてのコンテンツを投稿として扱い、投稿を関連付けるのが難しいと述べました。 1つの方法は、投稿オブジェクトを経由してコンテンツ間のリンクを作成することです。 

ACFのフィールドデータを取得する

ACFデータを取得するための基本的なコードは次のとおりです。

// コンテンツIDはオプションのフィールド、デフォルトは現在の投稿です。フォーマットはオプションのフィールド、デフォルト値はtrueです。
the_field( 'フィールド名', コンテンツID, フォーマットするかどうか );

事例:「スポンサー」マーク

サイトで「スポンサー」の投稿を公開する必要がある場合、フィールドをカスタマイズすることで、投稿に「スポンサー」のマークを追加できます。

まず、ACFのフィールドグループをカスタマイズし、「PR」という名前のTrue / Falseフィールドと、フィールド名 is-pr を追加します。

そして、テーマのfunctions.phpに次のコードを追加します。

add_filter( 'post_class', 'eric_is_pr', 10, 3 ); // post_classフィルタを使用して、is-prタイプを追加します
function eric_is_pr( $classes, $class, $post_id ){
   if ( ! function_exists( 'get_field' ) ) {
       return $classes;
   } else {
       $class_list = [];
       $class_list[] = get_field( 'pr', $post_id ) ? 'is-pr' : null ;
       return array_merge( $classes, $class_list );
   }
}

次に、is-pr スタイルタイプの要素にスタイルを追加します。

.is-pr entry-title::after {
   content: 'スポンサー';
   background-color: #d5d5d5;
   color: #5e5e5e;
   display: block;
   padding: 0 2em;
   border-radius: 50px;
   font-size: 12px;
   margin-left: auto;
   width: 64px;
   letter-spacing: 0;
}

add_meta_boxを経由してカスタムフィールドを追加します

プラグインを経由してカスタムフィールドを追加することに加えて、WordPressの組み込み関数 add_meta_box を経由してカスタムフィールドを追加することもできます。上記の is-pr を例として直接取り上げましょう。

function is_pr_register_meta() {
   add_meta_box(
       'this_is_pr', // フィールドID、唯一の値が必要です
       'スポンサー投稿ですか', // カスタムフィールドのタイトル名
       'is_pr_callback', // 関数を呼び出して、保存するデータを定義します
       'post', // 投稿のカスタムフィールドのみを表示する
       'side'
   );
}
add_action( 'add_meta_boxes', 'is_pr_register_meta' );
function is_pr_callback( $post ) {
   $value = get_post_meta($post->ID, '_this_is_pr', true);
       wp_nonce_field( 'is_pr_inner', 'is_pr_inner_nonce');
       // 「is_pr_inner」の動作を暗号化して、シングルパス検証コード「is_pr_inner_nonce」を生成します
   ?>
   <label for="this_is_pr">はスポンサー投稿です</label>
   <input type="checkbox" id="this_is_pr" name="this_is_pr" class="postbox" value="1" <?php echo $value ? 'checked' : null ?>>
<?php }
function is_pr_save_meta( $post_id ) {
   if ( ! isset( $_POST['is_pr_inner_nonce'] ) ) {
       return $post_id; // 保存時に「is_pr_inner_nonce」がない場合は保存できません。
   }
   $nonce = $_POST['is_pr_inner_nonce'];
   if ( ! wp_verify_nonce( $nonce, 'is_pr_inner' ) ) {
       return $post_id;
       // 「is_pr_inner_nonce」と「is_pr_callback」によって生成された検証コードが保管中に異なる場合
       // 保存できません。
   }
   /*
   * カスタムフィールドの内容を保存するためのシステムの自動保存は避けてください。
   */
   if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
       return $post_id;
   }
   // ユーザー権限を確認する
   if ( ! current_user_can( 'edit_post', $post_id ) ) {
       return $post_id;
   }
   $data = $_POST['this_is_pr'];
   update_post_meta( $post_id, '_this_is_pr', $data );
}
add_action( 'save_post', 'is_pr_save_meta' );
function eric_is_pr_meta( $classes, $class, $post_id ){
   $class_list = [];
   if ( get_post_meta( $post_id, '_this_is_pr' )[0] === "1" ) {
       $class_list[] = 'is-pr';
   }
   return array_merge( $classes, $class_list );
}
add_filter( 'post_class', 'eric_is_pr_meta', 10, 3 );
// post_classフィルタを使用して、is-prタイプを追加します

上記の例からわかるように、 add_meta_box を使用してカスタムフィールドを作成するには非常に時間がかかるため、ほとんどの場合、ACFを使用してカスタムフィールドを管理することをお勧めします。 次の3つの事項が例外:

  • 必要なフィールドは1つだけで、ACFプラグイン全体を1つのフィールドにインストールする必要はありません。ACFは強力ですが、多くの場合、Webサイトにそれほど多くのカスタムフィールドは必要ありません。 単一のフィールドを追加したいだけの場合は、自分で実装することをお勧めします。
  • 無料のプラグイン/テーマを開発したいが、無料のACF機能は高度なニーズを満たすことができません。 ACFのライセンスによると、有料のプラグインまたはテーマの場合、開発者はACF PROをソースコードにインポートして再開発できますが、無料のプラグインまたはテーマにACF PROを導入することはできません。
  • プラグイン/テーマを開発したいのですが、他のプラグインとの依存関係を減らしたいと思っています。 この部分は、開発者の習慣に関連している可能性があります。一部の開発者は、他のサードパーティ機能に依存するのではなく、可能な限り独自のプラグインまたはテーマを作成したいので、この方法を使用します。

おわりに

カスタムフィールドとカスタムコンテンツタイプを使用すると、WordPressをさらに拡張して、スライドショーカルーセル内の個々のスライドの属性やサービス担当者に関する基本情報など、さまざまな高度な用途に使えます。 さらに、SEOプラグインと同様に、カスタムフィールドを経由してカスタムコンテンツタイプに構造化データを追加することもできます。

次回は、カスタムフィールドとカスタムコンテンツタイプを組み合わせて、WordPressのループ機能を紹介します。

Westom

この記事を書いた人

Westom

サイト管理やサーバーの運用業務を担当するエンジニアのWestomです。これからは役に立つツールやプログラミングなどの技術情報を紹介しますので、どうぞよろしくお願いします!

CONTACT

お問い合わせ