WordPressの投稿に特定のカスタムフィールドがある場合のみ表示する方法

WordPressの投稿にカスタムフィールドを追加し、そのフィールドを持つ投稿のみを表示したい場合。あるいは、特定のカスタムフィールド値を持つ投稿を一覧表示する特別なページを作ろうとしているかもしれません。あなただけではありません！

ある読者からその方法を尋ねられたので、その答えを皆と共有することは有益だと考えた。

カスタムフィールドを使えば、投稿やページに追加情報を加えることができます。コンテンツを整理したりフィルターをかけたりするのに最適だ。この投稿では、WordPressの投稿が特定のカスタムフィールドを持っている場合のみ表示する方法を紹介します。

なぜ特定のカスタムフィールドでWordPress投稿を表示するのか？

WordPressサイトで投稿を作成する際、カスタムフィールドを使って投稿にメタデータを追加することができます。メタデータとは、タイトル、投稿者、公開日などの投稿に関する情報です。

カスタムフィールドはWordPressの高度なコンセプトであり、WordPressでカスタムフィールドを追加する方法はたくさんあります。カスタムフィールドの使い方や表示方法については、投稿日「WordPress Custom Fields 101: Tips, Tricks, and Hacks」に役立つヒントがたくさんあります。

あるユーザーから、特定のカスタムフィールドが存在する場合のみWordPressの投稿を表示する方法を尋ねられました。これは、特定のカスタムフィールドや値を含む投稿をすべて一覧表示するカスタムページを作成したい場合に便利です。

返信先: WordPress.orgコミュニティが恩恵を受けられるように、他のみんなと共有するのがベストだと思った。

WordPressテーマファイルの編集：留意点

このチュートリアルを正しく進めるために、覚えておいてほしいことがある：

1. このチュートリアルでは、WordPressテーマファイルをコードで編集することになるので、全くの初心者には不向きです。初めての方は、WordPressでコードをコピー＆ペーストする方法のガイドをお読みください。
2. エラー発生時に本番サイトが影響を受けないように、サイトのバックアップやステージング環境の使用をお勧めします。これは、テーマファイルにコードを追加することになり、リスクがあるからです。
3. WordPressのテンプレート階層がどのように機能しているかを理解し、後でコードを追加する場所を知っておくことをお勧めします。
4. WordPressのクエリーでこれらのパラメータを呼び出すので、WordPressのループの仕組みにも慣れておく必要がある。

また、ブロックテーマはテーマファイルのセットが異なるため、このチュートリアルはクラシックWordPressテーマでのみ動作することに注意してください。

ということで、WordPressの投稿に特定のカスタムフィールドがある場合のみ表示する方法を見てみよう。

WordPressの投稿が特定のカスタムフィールドを持っている場合のみ表示する

使用するコードを説明する前に、どのテーマ・ファイルに追加する必要があるかを知っておく必要があります。ほとんどの場合、index.php、archive.php、page.phpなどのページ・テンプレートになります。

Twenty Twenty-Oneテーマのindex.phpファイルに追加するとしよう。現在、そのファイルのWordPressループ部分は以下のようになっている：

<?php
if ( have_posts() ) {

// Load posts loop.
	while ( have_posts() ) {
		the_post();

		get_template_part( 'template-parts/content/content', get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) );
	}

	// Previous/next page navigation.
	twenty_twenty_one_the_posts_navigation();

} else {

	// If no content, include the "No posts found" template.
	get_template_part( 'template-parts/content/content-none' );

}

get_footer();

このコードでは、WordPressの初期設定のループ（have_posts()とthe_post()）を使用して投稿を表示します。このメソッドは、ほとんどの標準的なWordPressテーマに適しており、カスタマイザーやソートなしで投稿を表示するために使用されます。

では、上の例のようにカスタムフィールド「color」を使うとしましょう。そのコード全体を以下のスニペットに置き換える必要があります：

<?php
// The Query to show a specific Custom Field
$the_query = new WP_Query('meta_key=color');

// Load posts loop.
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
        $the_query->the_post();

        get_template_part( 'template-parts/content/content', get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) );
    }

    // Previous/next page navigation.
    twenty_twenty_one_the_posts_navigation();

} else {

    // If no content, include the "No posts found" template.
    get_template_part( 'template-parts/content/content-none' );

}

// Reset Post Data
wp_reset_postdata();

get_footer();

この新規コードでは、特定のカスタムフィールドの値（この場合、カスタムフィールド「color」を持つ投稿）に基づいて投稿を取得するカスタムクエリー（$the_query = new WP_Query('meta_key=color');）を導入しました。

そして、カスタムループ（if ($the_query->have_posts())）を使用して、このカスタマイ・クエリーによって取得された投稿を繰り返し、最初のスニペットと同じ方法で各投稿のコンテンツを表示します。

また、カスタムクエリー後にWordPressがすべての投稿を正しく表示するように戻すために、wp_reset_postdata()関数を追加しました。これにより、サイトがスムーズに機能し、ユーザーに正しいコンテンツを表示することができます。

特定の値を持つカスタムフィールドを持つ特定の投稿を表示したい場合は、3行目のクエリーを次のように変更すればよい：

$the_query = new WP_Query( 'meta_value=blue' );

これは、カスタムフィールドに’blue’の値を持つすべての投稿を表示します。

color’フィールドの値が’blue’であることを本当に〜してもよいですか？

$the_query = new WP_Query( array( 'meta_key' => 'color', 'meta_value' => 'blue' ) );

クエリーで使用できるその他のパラメータについては、WordPressのWP_Queryコードリファレンスページを参照してください。

ページテンプレートのPHPファイルにコードを保存したら、フロントエンドでWordPressサイトを確認し、コードの動作を確認することができます。

さらに詳しくWordPressサイトをカスタマイズする方法

WordPressのページをカスタマイズする方法は他にもあります：

• WordPressでカテゴリーごとにスタイルを変える方法
• WordPressでカスタムスクロールバーを追加する方法
• WordPressウィジェットにカスタマイザーを追加する方法
• WordPressで投稿ごとにスタイルを変える方法
• WordPressテーマでショートコードを使う方法
• カテゴリー：WordPressで再訪問者に新規投稿を強調表示する方法
• WordPressでサイドバーを変更する方法

このチュートリアルで、WordPressの投稿に特定のカスタムフィールドがある場合のみ表示する方法を学んでいただけたと思います。WordPress サイトの編集方法についての完全ガイドや、WordPress 用の最高の Figma プラグインを専門家が選んだ記事もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.