WordPressカスタムフィールド入門：ヒント、トリック、ハック

長年にわたり、カスタムフィールドと、WordPressウェブサイトでそれらを最大限に活用する方法について、多くの質問を受けてきました。

カスタムフィールドは、投稿やページに余分なデータや情報を追加できる便利なWordPressの機能です。多くの人気のWordPressプラグインやテーマは、重要なデータを保存するためにカスタムフィールドを使用しています。

WordPressのカスタムフィールドに関する経験があります。この記事では、いくつかのヒント、トリック、ハックとともにWordPressのカスタムフィールドの使用方法を説明します。

この記事は長いため、ナビゲーションを容易にするために目次を追加しました。以下のクイックリンクを使用して、読みたいセクションにジャンプしてください。

WordPressカスタムフィールドとは？

WordPressカスタムフィールドは、編集中の投稿またはページに追加情報を使用するためのメタデータです。

デフォルトでは、新しい投稿、ページ、またはその他のコンテンツタイプを作成すると、WordPressはそのコンテンツを2つの異なる部分に保存します。

最初の部分は、WordPressコンテンツエディターを使用して追加するコンテンツの本文です。

2番目の部分は、そのコンテンツに関する情報です。たとえば、タイトル、著者、日付、時刻などです。この情報はメタデータと呼ばれます。

WordPressウェブサイトは、作成した各投稿またはページに必要なメタデータをすべて自動的に追加します。カスタムフィールドを使用して独自のメタデータを作成および保存することもできます。

デフォルトでは、カスタムフィールドオプションは投稿編集画面に非表示になっています。表示するには、画面の右上隅にある3点メニューをクリックし、メニューから「設定」を選択する必要があります。

これはポップアップを開きます。ここで「パネル」タブに切り替え、「カスタムフィールド」オプションを有効にする必要があります。

その後、「有効化＆リロード」ボタンをクリックして投稿エディタをリロードします。

投稿エディタが再読み込みされ、コンテンツエディタの下にカスタムフィールドパネルが表示されるようになります。

カスタムフィールドは、投稿、ページ、またはその他のコンテンツタイプに関連する情報を追加するために使用できます。このメタ情報は、テーマに表示できます。

ただし、それを行うには、WordPressテーマファイルを編集する必要があります。

それでは、WordPressでカスタムフィールドを追加して使用する方法を見てみましょう。

WordPressにカスタムフィールドを追加する

まず、カスタムフィールドを追加できるように、ブロックエディターで投稿またはページを開く必要があります。次に、カスタムフィールドメタボックスに移動する必要があります。

次に、カスタムフィールドの名前を指定し、その値（Value）を入力します。「カスタムフィールドを追加」ボタンをクリックして保存します。

フィールドはカスタムフィールドメタボックスにこのように保存および表示されます:

このカスタムフィールドはいつでも編集でき、変更を保存するには「更新」ボタンをクリックするだけです。もう使用しない場合は削除することもできます。

次に、カスタムフィールドの設定を保存するために投稿を保存する必要があります。

WordPressテーマでのカスタムフィールドの表示

カスタムフィールドをウェブサイトに表示するには、WordPressテーマファイルを編集し、コードスニペットを追加する必要があります。

テーマファイルを直接編集することは推奨しません。わずかな間違いでもウェブサイトが壊れる可能性があるためです。これを行う簡単な方法は、WPCodeを使用することです。

WordPressダッシュボードからカスタムコードを追加およびスニペットを管理できる、WordPress向けの最高のコードスニペットプラグインです。

これを初めて行う場合は、WordPressでコードをコピーして貼り付ける方法に関するガイドを読むこともお勧めします。

まず、無料のWPCodeプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドを参照してください。

有効化後、WordPressダッシュボードからCode Snippets » + Add Snippetに移動し、「Add Your Custom Code (New Snippet)」オプションを選択する必要があります。

次に、このコードをテーマファイルに追加するためにコピーする必要があります：

<?php echo get_post_meta($post->ID, 'key', true); ?>

keyをカスタムフィールドの名前に置き換えることを忘れないでください。

次に、コードを「コードプレビュー」エリアに入力し、コードタイプを「PHPスニペット」に変更する必要があります。

たとえば、デモテーマではこのコードを使用しました。

<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>

ここから、挿入セクションまでスクロールできます。

ここで、コードを実行する場所を選択できます。デフォルトでは、WPCodeはコードを自動挿入し、ウェブサイトのどこでも実行します。

ただし、これを変更して、カスタムフィールドを表示したい場所を選択できます。

例えば、「ページ固有」タブを選択し、「投稿の前に挿入」オプションを選択します。これにより、カスタムフィールドはブログ投稿の先頭に表示されます。

これで変更を保存し、カスタムフィールドを追加した投稿にアクセスして、それが機能していることを確認できます。

このカスタムフィールドは、他のすべてのWordPressブログ投稿でも使用できます。

異なるブログ投稿に対してカスタムフィールドを簡単に調整することもできます。新しい投稿を作成するか、既存の投稿を編集するだけです。

次に、カスタムフィールドメタボックスに移動し、ドロップダウンメニューからカスタムフィールドを選択して、その値（Value）を入力します。

完了したら、「カスタムフィールドを追加」ボタンをクリックして変更を保存し、投稿を公開または更新してください。

トラブルシューティング：投稿編集画面のドロップダウンでカスタムフィールドが見つからない

デフォルトでは、WordPressは投稿編集画面のドロップダウンメニューに30個のカスタムフィールドしか読み込みません。

既にカスタムフィールドを使用しているWordPressテーマやプラグインを使用している場合、それらがドロップダウンメニューに最初に表示され、新しく作成したカスタムフィールドが表示されない可能性があります。

この問題を解決するには、次のコードをテーマのfunctions.phpファイルに追加するか、WPCode（推奨）を使用する必要があります。

add_filter( 'postmeta_form_limit', 'meta_limit_increase' );
function meta_limit_increase( $limit ) {
    return 50;
}

上記のコードは、その制限を50に変更します。それでもカスタムフィールドが表示されない場合は、さらに制限を増やすことを試すことができます。

Advanced Custom Fieldsを使用してカスタムフィールドのユーザーインターフェイスを作成する

ご覧のとおり、カスタムフィールドを追加すると、投稿を作成するたびにフィールドを選択してその値Enterする必要があります。

WordPressのカスタムフィールドが多い場合や、複数の著者がウェブサイトに投稿している場合は、これは理想的なソリューションではありません。

ユーザーがフォームに入力してカスタムフィールドに値を追加できるユーザーインターフェースを作成できたら、素晴らしいと思いませんか？

実際、これこそが多くの人気のWordPressプラグインが既に行っていることです。

たとえば、人気のAll in One SEOプラグイン内のSEOタイトルとメタディスクリプションボックスはカスタムメタボックスです。

カスタムフィールドを追加するためのユーザーインターフェースを作成する最も簡単な方法は、Advanced Custom Fieldsプラグインを使用することです。

まず、Advanced Custom Fieldsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化したら、ACF » フィールドグループページにアクセスし、「新規追加」ボタンをクリックする必要があります。

フィールドグループは、カスタムフィールドのセットを持つコンテナのようなものです。これにより、複数のカスタムフィールドパネルを追加できます。

次に、フィールドグループのタイトルを指定し、右上にある「+ フィールドを追加」ボタンをクリックします。

フィールドタイプを選択できるようになりました。

高度なカスタムフィールドを使用すると、テキスト、画像アップロード、数値、ドロップダウン、チェックボックスなど、あらゆる種類のフィールドを作成できます。

次に、フィールド名、フィールドラベル、デフォルト値などの他のオプションを確認するために下にスクロールできます。必要に応じて変更できます。

必要に応じて、フィールドグループに複数のフィールドを追加することもできます。完了したら、「変更を保存」ボタンをクリックするだけです。

次に、投稿を編集するか新しい投稿を作成すると、コンテンツエディターの下にWordPressカスタムフィールドが表示された新しいパネルが表示されます。

詳細な手順については、WordPressの投稿や投稿タイプにカスタムメタボックスを追加する方法に関するガイドを参照してください。

空のカスタムフィールドを条件付きステートメントで非表示にする方法

これまでのところ、カスタムフィールドの作成方法とそのテーマでの表示方法について説明しました。

さて、カスタムフィールドが空でないことを確認してから表示する方法を見てみましょう。そのためには、フィールドにデータが含まれているかどうかを最初にチェックするようにコードを変更します。

<?php 

$mood = get_post_meta($post->ID, 'Mood', true);

if ($mood) { ?>

<p>Today's Mood: <? echo $mood; ?></p>

<?php 

} else {
// do nothing;
}

?>

Mood を独自のカスタムフィールド名に置き換えるのを忘れないでください。

カスタムフィールドに複数の値を追加する

カスタムフィールドは、複数の値を追加するために同じ投稿で再利用できます。フィールドを再度選択し、「値」ボックスに別の値を追加するだけです。

ただし、上記の例で使用したコードは、単一の値しか表示できません。

カスタムフィールドのすべての値を表示するには、コードを変更してデータを配列で返すようにする必要があります。テーマファイルに次のコードを追加する必要があります。

<?php 
$mood = get_post_meta($post->ID, 'Mood', false);
if( count( $mood ) != 0 ) { ?>
<p>Today's Mood:</p>
<ul>
<?php foreach($mood as $mood) {
            echo '<li>'.$mood.'</li>';
            }
            ?>
</ul>
<?php 
} else { 
// do nothing; 
}
?>

再度、Mood を独自のカスタムフィールド名に置き換えることを忘れないでください。

この例では、get_post_meta 関数の最後のパラメーターを false に変更したことに気づくでしょう。このパラメーターは、関数が単一の値または値を返すべきかどうかを定義します。これを false に設定すると、データを配列として返すことができ、それを foreach ループで表示します。

WordPressでカスタムフィールドで投稿を検索する方法

WordPressのデフォルトの検索は、ウェブサイト上のカスタムフィールドでは機能しません。投稿や訪問者がサイトで探しているものを見つけるために、コンテンツのみを使用します。

しかし、SearchWPはWordPressの検索を改善することでそれを変えます。これは、投稿コンテンツを使用するだけでなく、WordPressカスタムフィールド、PDFドキュメント、カスタムテーブル、テキスト、ファイルなど、すべてをインデックス化する最高のWordPress検索プラグインです。

SearchWPを使用すると、コードを編集せずに検索アルゴリズムを調整できます。単にプラグインをインストールし、WordPress管理エリアからSearchWP » Algorithmに移動するだけです。

その後、「エンジン」タブに移動し、属性関連性のスライダーを調整する必要があります。これにより、検索中に各属性に与えられる重要度が変更されます。

例えば、カスタムフィールドのスライダーを最大に設定し、他の属性のスライダーをそれに応じて調整することができます。このようにすると、SearchWP は WordPress でコンテンツを検索する際にカスタムフィールドのデータを優先します。

SearchWPを使用するもう1つの利点は、Advanced Custom Fields (ACF)、Meta Box、Podsなど、最も人気のあるカスタムフィールドプラグインのいくつかと連携することです。

詳細については、SearchWPでWordPressの検索を改善する方法に関する初心者向けガイドをお読みください。

特定のカスタムキーを持つ投稿を表示する

WordPressでは、カスタムキーとその値を持つ投稿を表示できます。たとえば、特定のカスタムキーを持つすべての投稿を表示するためのカスタムアーカイブページを作成しようとしている場合、WP_Queryクラスを使用してそれらのフィールドに一致する投稿をクエリできます。

以下のコードを開始点として使用できます：

$args = array(
    'meta_key'   => 'Mood',
    'meta_value' => 'Happy'
);
$the_query = new WP_Query( $args );
 
<?php 
// the query
$the_query = new WP_Query( $args ); ?>
 
<?php if ( $the_query->have_posts() ) : ?>
 
    <!-- the loop -->
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
 
    <?php endwhile; ?>
    <!-- end of the loop -->
 
    <!-- pagination here -->
 
    <?php wp_reset_postdata(); ?>
 
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

meta_key および meta_value パラメータをご自身の値に置き換えることを忘れないでください。

カスタムフィールドを使用してゲスト著者名を追加する方法

ゲスト投稿を追加したいが、その投稿のためだけに新しいユーザープロファイルを追加したくないですか？より簡単な方法は、ゲスト作成者名をカスタムフィールドとして追加することです。

これを行うには、次のコードをテーマのfunctions.phpファイルに追加するか、WPCode（推奨）を使用する必要があります。

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );
function guest_author_name( $name ) {
global $post;
$author = get_post_meta( $post->ID, 'guest-author', true );
if ( $author )
$name = $author;
return $name;
}

詳細については、WordPressへのWebからのスニペットの貼り付けに関するガイドをご覧ください。

このコードは、WordPressのthe_authorおよびget_the_author_display_nameフィルターに関数をフックします。

この関数は、まずゲスト作成者の名前を確認します。存在する場合、作成者の名前をゲスト作成者の名前に置き換えます。

さて、ゲスト著者の名前を表示したい投稿を編集する必要があります。「カスタムフィールド」メタボックスに移動し、ゲスト著者の名前を追加してから、「カスタムフィールドを追加」ボタンをクリックします。

詳細については、WordPressでカスタムフィールドを使用してゲスト作成者の名前を書き換える方法に関する記事をご覧ください。

カスタムフィールドを使用して記事の寄稿者を表示する方法

多くの人気ブログやニュースサイトでは、多くの著者が単一の記事の執筆に貢献しています。しかし、WordPressでは投稿に1人の作成者しか関連付けることができません。

この問題の解決策の1つは、Co-Authors Plusプラグインを使用することです。詳細については、WordPressの投稿に複数の作成者を追加する方法に関するガイドをご覧ください。

別の方法として、投稿者をカスタムフィールドとして追加する方法があります。

まず、共同著者または寄稿者を表示したい投稿を編集する必要があります。次に、カスタムフィールドメタボックスまでスクロールダウンし、著者名を共同著者カスタムフィールドとして追加します。

次に、共著者を表示したいテーマファイルにこのコードを追加する必要があります。

<?php 
 
$coauthors = get_post_meta($post->ID, 'co-author', false);
if( count( $coauthors ) != 0 ) { ?>
<ul class="coauthors">
<li>Contributors</li>
<?php foreach($coauthors as $coauthors) { ?>
           <?php echo '<li>'.$coauthors.'</li>' ;
            }
            ?>
</ul>
<?php 
} else { 
// do nothing; 
}
?>

作成者の名前をコンマで区切って表示するには、次のカスタムCSSを追加できます。

.coauthors ul { 
display:inline;
}
.coauthors li { 
display:inline;
list-style:none;
}
.coauthors li:after { 
content:","
}
.coauthors li:last-child:after {
    content: "";
}
.coauthors li:first-child:after {
    content: ":";
}

デモサイトではこのように表示されました。

WordPressでループの外にカスタムフィールドを表示する方法

単一投稿のサイドバーにカスタムフィールドを表示する必要がある場合はどうなりますか？

WordPressループの外部にカスタムフィールドを表示するには、次のコードをテーマファイルに追加できます。

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>

keyをカスタムフィールド名に置き換えるのを忘れないでください。

カスタムフィールドを使用してカスタムヘッダー、フッター、サイドバーを表示する

通常、ほとんどのWordPressテーマでは、すべてのページで同じヘッダー、フッター、サイドバーが使用されます。

ウェブサイトのページごとに異なるサイドバー、ヘッダー、またはフッターを表示する多くの方法もあります。WordPressの投稿またはページごとに異なるサイドバーを表示する方法に関するガイドをご覧ください。

これを行う1つの方法は、カスタムフィールドを使用することです。異なるサイドバーを表示したい投稿またはページを編集し、サイドバーをカスタムフィールドとして追加するだけです。

次に、カスタムサイドバーを表示したいWordPressテーマファイル（例: single.php）を編集する必要があります。以下のコードを探します。

<?php get_sidebar(); ?>

この行を次のコードに置き換えてください:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

このコードは、サイドバーのカスタムフィールドを探し、テーマに表示します。たとえば、サイドバーのカスタムフィールドとしてwebpageを追加すると、コードはサイドバー-webpage.phpファイルを検索して表示します。

テーマフォルダにsidebar-webpage.phpファイルを作成する必要があります。テーマのsidebar.phpファイルからコードをコピーして開始点にすることができます。

カスタムフィールドを使用したRSSフィードコンテンツの操作

RSSフィードユーザーに追加のメタデータまたはコンテンツを表示したいですか？カスタムフィールドを使用すると、WordPress RSSフィードを操作して、カスタムコンテンツをフィードに追加できます。

まず、次のコードをテーマのfunctions.phpファイルに追加するか、WPCode（推奨）を使用する必要があります。

function wpbeginner_postrss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$coolcustom = get_post_meta($postid, 'coolcustom', true);
if(is_feed()) {
if($coolcustom !== '') {
$content = $content."<br /><br /><div>".$coolcustom."</div>
";
}
else {
$content = $content;
}
}
return $content;
}
add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

次に、「coolcustom」という名前のカスタムフィールドを作成し、好きな値を追加します。広告、画像、テキストなど、好きなものを表示するために使用できます。

詳細については、WebからWordPressにコードをコピーして貼り付ける方法に関するガイドをご覧ください。

カスタムフィールドでRSSフィードタイトルを操作する方法

RSSフィードユーザーのために、投稿タイトルに追加のテキストを追加したい場合があります。たとえば、スポンサー投稿やゲスト投稿を公開する場合に便利です。

まず、次のコードをテーマのfunctions.phpファイルに追加するか、WPCodeを使用して、ウェブサイトを壊すことなくカスタムコードスニペットを追加する必要があります。

function wpbeginner_titlerss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$gpost = get_post_meta($postid, 'guest_post', true);
$spost = get_post_meta($postid, 'sponsored_post', true);

if($gpost !== '') {
$content = 'Guest Post: '.$content;
}
elseif ($spost !== ''){
$content = 'Sponsored Post: '.$content;
}
else {
$content = $content;
}
return $content;
}
add_filter('the_title_rss', 'wpbeginner_titlerss');

次に、タイトルのフィールドに余分なテキストを表示したい投稿を編集する必要があります。

次に、カスタムフィールドとして guest_post と sponsored_post を追加します。

これらのカスタムフィールドのいずれかに値「true」が見つかった場合、コードはタイトルに適切なテキストを追加します。このテクニックは、好きなようにさまざまな方法で使用できます。

さらにクールなRSSフィードハックを学びたいですか？WordPress RSSフィードにコンテンツを追加して操作する方法に関するガイドをご覧ください。

WordPressでカスタムフィールドを使用して投稿の有効期限を設定する方法

WordPressサイトの一部の投稿に有効期限を設定したいですか？これは、アンケートや期間限定オファーを実行するなど、特定の期間のみコンテンツを公開したい場合に役立ちます。

これを行う1つの方法は、投稿コンテンツを手動で削除するか、Post Expiratorのようなプラグインを使用することです。

もう1つのオプションは、カスタムフィールドを使用して、特定の時間の後に投稿を自動的に期限切れにすることです。テーマファイルを編集し、WordPressループを次のように変更する必要があります。

<?php
if (have_posts()) :
while (have_posts()) : the_post();
$expirationtime = get_post_meta($post->ID, "expiration", false);
if( count( $expirationtime ) != '' ) {
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}

$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween >= 0 ) {
echo 'This post will expire on ' .$expirestring.'';
the_content();
} else {
echo "Sorry this post expired!"
}
} else {
the_content();
}
endwhile;
endif;
?>

注意: このコードは、お使いのテーマに合わせて編集する必要があります。

このコードを追加すると、有効期限を設定したい投稿に有効期限カスタムフィールドを追加できます。次の形式で時間を追加してください: mm/dd/yyyy 00:00:00。

カスタムフィールドを使用して個々の投稿をスタイル設定する方法

個々の投稿の外観をCSSで変更したいですか？WordPressは各投稿に独自のクラスを自動的に割り当てるため、カスタムCSSを追加できます。

ただし、カスタムフィールドを使用すると、独自のカスタムクラスを追加し、それらを使用して投稿を異なる方法でスタイル設定できます。

まず、スタイルを個別に変更したい投稿を編集する必要があります。「カスタムフィールド」ボックスに移動し、「post-class」カスタムフィールドを追加します。

次に、WordPressテーマファイルを編集し、WordPressループの先頭にこのコードを追加する必要があります。

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

次に、post_class()関数が含まれる行を見つける必要があります。

デモテーマではこのように表示されていました:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

この行をカスタムフィールドの値を含めるように変更する必要があります。次のようになります。

<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>

これで、Inspectツールを使用して投稿のソースコードを調べると、投稿クラスに追加されたカスタムフィールドCSSクラスが表示されます。

このCSSクラスを使用して、カスタムCSSを追加し、投稿を異なるスタイルで表示できるようになりました。

この記事がWordPressカスタムフィールドについてさらに学ぶのに役立ったことを願っています。また、投稿公開時にカスタムフィールドを自動的に追加する方法に関するガイドや、ウェブサイトを希望どおりにデザインするのに役立つ最高のWordPressページビルダープラグインも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。