WordPress (ワードプレス) のカスタムフィールドを分かりやすく紹介！

WordPressのカスタムフィールドの使い方を知っていますか？ カスタムフィールドを使えば、商品の価格や性能などの決まったテンプレートを簡単に表示できます。

ここではカスタムフィールドを使うメリット、使い方、おすすめのプラグイン、カスタムフィールドの情報を検索対象に含める方法について解説します。

WordPressを効率的に運用したい方、カスタムフィールドの導入を検討している方はぜひご覧ください。

WordPress (ワードプレス) のカスタムフィールドとは

カスタムフィールドとは、記事のタイトル・本文以外に情報を追加入力できる機能です。WordPressにはデフォルトで備わっているので、だれでも使えます。ただしプラグインを使う方が簡単に設定・管理できるので、プラグインを使ってカスタムフィールドを利用してみましょう。

またカスタムフィールドでは、「一定価格以上の商品だけ表示」したり、「一定条件以上の商品をランダム表示」させたりと、詳細な条件を設定することも可能です。こうした手動で設定すると煩雑になる作業を、自動化できるのがカスタムフィールドです。

WordPress (ワードプレス) でカスタムフィールドを使うメリット

WordPressでカスタムフィールドを使うメリットは4つあります。

データ入力をしやすい

ショッピングサイトのように、一定の情報を入力しなくてはならないサイトでは、カスタムフィールドを使うことで、入力の手間を大きく省けます。あらかじめカスタムフィールド上で「商品名」「価格」「機能」「評価」などを設定しておけば、毎回入力したり、コピペしたりする必要がなくなります。

また商品情報を修正するときも、1ページずつ修正せずに、カスタムフィールドの設定を編集するだけで良いので、掲載後の管理も簡単です。

CSSを管理しやすい

カスタムフィールドを使わない場合、毎回決まった情報を、一定のCSSと一緒に書き加えなくてはなりません。ページによっては、細かなCSSの修正をしなくてはならない場合もあり、毎回の作業が増えてしまいます。

しかしカスタムフィールドを使えば、あらかじめ設定しておいたものをページに反映させるだけで良いので簡単です。カスタムフィールドごとに設定したIDを入力すれば、ページに反映されます。

データの表現方法が広がる

カスタムフィールドに入力した情報は、数値として扱えるようになります。それによって入力した情報をグラフ化したり、位置情報をマップ化したりできるので、データの表現方法が大きく広がります。

こうした処理を手動で行う場合は、商品情報を自分で抽出してグラフに起こしたり、Googleマップを埋め込んだり、スクリーンショットを撮って載せたりしなくてはなりません。

入力ミスを防ぐ

サイトの情報は正確であることが重要です。しかし手動で情報を入力したり、毎回コピペしたりしていると、どうしても人間はミスをしてしまいます。

一方カスタムフィールドなら、一度設定した情報がそのまま表示されるだけなので、最初の設定を間違えない限り、正確な情報が表れます。掲載した情報が正しいかどうかをチェックする際も、全ページをチェックする必要はなく、カスタムフィールドの設定をチェックするだけで十分です。

WordPress (ワードプレス) でカスタムフィールドを表示する方法

では実際にカスタムフィールドを表示させるにはどうすれば良いのでしょうか？ まずは表示するカスタムフィールドの設定が必要です。

こうして設定したカスタムフィールドが、記事のなかで使えるようになります。ただしこれだけでは記事中にカスタムフィールドが表示されません。

記事に表示

カスタムフィールドを記事中に表示させるには、記事内に特定のカスタムフィールドで表示させるコードを入力する必要があります。それには3つの方法があります。

post_custom()関数

「post_custom()関数」を使うと、()内で指定したカスタムフィールドを記事の本文中に表示できます。「post_custom()関数」は次のように書いてください。

<?php echo post_custom(‘カスタムフィールドの名前’)>

例えばエアコンの記事で「価格」というカスタムフィールドを使って、「〇〇社製：65,000円」と表示させたい場合は、以下のようになります。

コード → <?php echo post_custom(‘価格’)>

本文中の表示 → 「〇〇社製：65,000円」

the_meta()関数

「the_meta()関数」を使うと、設定したカスタムフィールドをすべて表示できます。コードは次のように入力してください。

<?php the_meta();?>

このコードが本文中では以下のように表示されます。

<ul class=’post-meta’>

<li><span class=’post-meta-key’>メーカー：</span>日立</li>

<li><span class=’post-meta-key’>年製：</span>2020年</li>

</ul>

さらにカスタムフィールドのデータ表示をCSSでカスタマイズすることも可能です。「・post-meta{}」「・post-meta-key{}」を使って、フォントや文字色を変えてみましょう。

get_post_meta()関数

「get_post_meta()関数」は、より高度なカスタムフィールドの表示設定です。次のコードを用います。

<?php get_post_meta($post_id, $key, $single); ?>

「$post_id」は、データを取得したい記事のIDを入力します。「$key」は、取得したい文字列を入力しましょう。「$single」は「true」「false」のどちらかを入力します。「true」の場合は文字列、「false」の場合はカスタムフィールドで設定した情報が表示されます。

では具体例を見てみましょう。カスタムフィールドから「日立の2020年製のエアコン」の画像を取得します。

<?php if (get_post_meta(get_the_ID(記事ID), ‘thum’, true)):?>

<h2>日立の2020年製のエアコン：</h2>

<img class=”thumb” src=”<?php echo get_post_meta( get_the_ID(), ‘thumb’, true ) ?>”alt=”<?php the_title(); ?>” />

<?php else: ?>商品画像がありません<?php endif; ?>

万が一指定した商品画像がない場合は、「商品画像がありません」と表示されます。

WordPress (ワードプレス) のカスタムフィールドにおすすめなプラグイン

ここではカスタムフィールドにおすすめのプラグインを3つ紹介します。

Advanced Custom Fields

Advanced Custom Fieldsは、定番の機能を備えたカスタムフィールドプラグインです。表示できる形式は、テキスト・画像・ファイル・リンクなど幅広い形態を選択できるのが特徴です。

またWordPressにデフォルトで搭載されているカスタムフィールドとの互換性が良く、余計な作業を増やさずに導入できます。

Custom Field Template

Custom Field Templateは、テンプレートが容易されたカスタムフィールドプラグインです。設定するためのテンプレートに沿って、必要な情報を入力するだけなので、WordPress初心者や、コーディングの知識が少ない方でも簡単に使いこなせます。

Custom Field Suite

Custom Field Suiteは、複数のカスタムフィールドを「フィールドグループ」としてまとめられることが特徴のプラグインです。たくさんのカスタムフィールドを設定したい方に向いています。

また設定したカスタムフィールドは、一定のルールに沿って配置換えできるので、管理・修正も簡単にできます。

WordPress (ワードプレス) のカスタムフィールドを検索対象に含める方法

カスタムフィールドのデメリットは、表示させるだけでは検索対象に含まれないことです。そこで特定の作業を行い、カスタムフィールドの情報も検索対象に含まれるように設定します。

プラグインなしで設定を行う場合

プラグインなしで設定するには、以下のコードをWordPressの「function.php」に記載します。

function posts_search_custom_fields( $orig_search, $query ) {

if ( $query->is_search() && $query->is_main_query() && ! is_admin() ) {

global $wpdb;

$q = $query->query_vars;

$n = ! empty( $q[‘exact’] ) ? ” : ‘%’;

$searchand = ”;

foreach ( $q[‘search_terms’] as $term ) {

$include = ‘-‘ !== substr( $term, 0, 1 );

if ( $include ) {

$like_op = ‘LIKE’;

$andor_op = ‘OR’;

} else {

$like_op = ‘NOT LIKE’;

$andor_op = ‘AND’;

$term = substr( $term, 1 );

}

$like = $n . $wpdb->esc_like( $term ) . $n;

$search .= $wpdb->prepare( “{$searchand}(($wpdb->posts.post_title $like_op %s) $andor_op ($wpdb->posts.post_content $like_op %s) $andor_op (custom.meta_value $like_op %s))”, $like, $like, $like );

$searchand = ‘ AND ‘;

}

if ( ! empty( $search ) ) {

$search = ” AND ({$search}) “;

if ( ! is_user_logged_in() )

$search .= ” AND ($wpdb->posts.post_password = ”) “;

}

return $search;

}

else {

return $orig_search;

}

}

add_filter( ‘posts_search’, ‘posts_search_custom_fields’, 10, 2 );

function posts_join_custom_fields( $join, $query ) {

if ( $query->is_search() && $query->is_main_query() && ! is_admin() ) {

global $wpdb;

$join .= ” INNER JOIN ( “;

$join .= ” SELECT post_id, group_concat( meta_value separator ‘ ‘) AS meta_value FROM $wpdb->postmeta “;

// $join .= ” WHERE meta_key IN ( ‘test’ ) “;

$join .= ” GROUP BY post_id “;

$join .= ” ) AS custom ON ($wpdb->posts.ID = custom.post_id) “;

}

return $join;

}

add_filter( ‘posts_join’, ‘posts_join_custom_fields’, 10, 2 );

ただしphpのコードのカスタムをするよりも、プラグインを導入する方が簡単です。

プラグインを使用して設定する場合

プラグインを使用する場合は、「Search Everything」というプラグインを使いましょう。実際の手順は次のように行います。

WordPress (ワードプレス) のカスタムタムフィールドまとめ

WordPressでは、カスタムフィールドを設定することで、特定の情報を正確に簡単に表示できます。特にショッピングサイトの商品情報を入力する際に役立ちます。

カスタムフィールドはWordPressのデフォルトの機能としても使えますが、プラグインを導入する方が簡単です。詳細な設定をすれば、応用的にカスタムフィールドを使えるので、ぜひ試してみてください。