カスタムフィールドとWP_Queryを活用した投稿分類

Posted on by

このコード例では、WordPressのWP_Queryを使用してカスタムフィールドやタクソノミーを利用した投稿の分類と表示を実現します。このコードをカスタマイズすることで、さまざまな要件に対応する柔軟な投稿表示が可能になります。

コード概要

  • 目的:
  • カスタムフィールド sample_field の値が特定の条件に一致する投稿を分類して表示。
  • タクソノミーフィルタを使用して投稿を絞り込む。
  • チェック済み（sample_value の投稿）と未チェック（またはフィールド未設定）の投稿を分けて表示。
  • 主な機能:
  1. チェック済み投稿の取得（sample_field の値が sample_value）。
  2. 未チェック投稿またはカスタムフィールドが設定されていない投稿の取得。
  3. ページネーション対応で投稿を分割表示。

サンプルコード

<?php
// Sample current page number retrieval
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

// Sample taxonomy query setup
$tax_query = array();
if (is_tax()) {
    $current_term = get_queried_object();
    if ($current_term) {
        $tax_query[] = array(
            'taxonomy' => $current_term->taxonomy,
            'field'    => 'slug',
            'terms'    => $current_term->slug,
        );
    }
}

// Retrieve posts with the "sample_field" custom field checked
$new_args = array(
    'post_type'      => 'sample', // Sample post type
    'posts_per_page' => 10, // Sample posts per page
    'paged'          => $paged,
    'meta_query'     => array(
        array(
            'key'     => 'sample_field', // Sample custom field name
            'value'   => 'sample_value', // Sample value for the field
            'compare' => 'LIKE', // Matches partial values
        ),
    ),
    'tax_query'      => $tax_query, // Sample taxonomy filter
    'orderby'        => 'date', // Order by date
    'order'          => 'DESC', // Descending order
);
$new_query = new WP_Query($new_args);

// Retrieve posts without the "sample_field" custom field or unchecked
$other_args = array(
    'post_type'      => 'sample',
    'posts_per_page' => 10, // Sample posts per page
    'paged'          => $paged,
    'meta_query'     => array(
        'relation' => 'OR',
        array(
            'key'     => 'sample_field',
            'value'   => 'sample_value',
            'compare' => 'NOT LIKE', // Does not match the value
        ),
        array(
            'key'     => 'sample_field',
            'compare' => 'NOT EXISTS', // Field does not exist
        ),
    ),
    'tax_query'      => $tax_query,
    'orderby'        => 'date',
    'order'          => 'DESC',
);
$other_query = new WP_Query($other_args);
?>

<div class="post-list">
    <!-- Loop for posts with "sample_field" -->
    <?php if ($new_query->have_posts()) : ?>
        <h2>Posts with "sample_field"</h2>
        <?php while ($new_query->have_posts()) : $new_query->the_post(); ?>
            <div class="listCon">
                <a class="thumbnailLink" href="<?php the_permalink(); ?>">
                    <p class="sample_mark"><span>Sample</span></p>
                    <?php 
                    // Sample thumbnail logic
                    if ($custom_field_img = get_field('sample_image')) :
                        echo '<img class="sample-thumbnail" src="' . esc_url($custom_field_img) . '" alt="Sample Image">';
                    elseif (has_post_thumbnail()) :
                        the_post_thumbnail(array(415, 415), array('class' => 'sample-thumbnail'));
                    else :
                        echo '<img class="sample-thumbnail" src="' . esc_url(get_template_directory_uri()) . '/images/sample-default.jpg" alt="Default Sample Thumbnail">';
                    endif;
                    ?>
                </a>
            </div>
        <?php endwhile; ?>
    <?php else : ?>
        <p>No posts found with "sample_field".</p>
    <?php endif; ?>
    <?php wp_reset_postdata(); ?>

    <!-- Loop for posts without "sample_field" -->
    <?php if ($other_query->have_posts()) : ?>
        <h2>Other Posts</h2>
        <?php while ($other_query->have_posts()) : $other_query->the_post(); ?>
            <div class="listCon">
                <a class="thumbnailLink" href="<?php the_permalink(); ?>">
                    <?php 
                    // Sample thumbnail logic
                    if ($custom_field_img = get_field('sample_image')) :
                        echo '<img class="sample-thumbnail" src="' . esc_url($custom_field_img) . '" alt="Sample Image">';
                    elseif (has_post_thumbnail()) :
                        the_post_thumbnail(array(415, 415), array('class' => 'sample-thumbnail'));
                    else :
                        echo '<img class="sample-thumbnail" src="' . esc_url(get_template_directory_uri()) . '/images/sample-default.jpg" alt="Default Sample Thumbnail">';
                    endif;
                    ?>
                </a>
            </div>
        <?php endwhile; ?>
    <?php else : ?>
        <p>No other posts found.</p>
    <?php endif; ?>
    <?php wp_reset_postdata(); ?>
</div>

<div class="pagenaviarea">
    <!-- Pagination for both queries -->
    <?php
    if (function_exists('wp_pagenavi')) {
        if ($new_query->max_num_pages > 1) {
            echo '<div class="pagination sample-pagination">';
            wp_pagenavi(array('query' => $new_query));
            echo '</div>';
        }
        if ($other_query->max_num_pages > 1) {
            echo '<div class="pagination sample-pagination">';
            wp_pagenavi(array('query' => $other_query));
            echo '</div>';
        }
    }
    ?>
</div>

コードのポイント

  1. カスタムフィールドsample_fieldのフィルタリング:
  • meta_query で条件を設定し、特定の値（sample_value）を持つ投稿を取得。
  • 配列形式のカスタムフィールドに対応するため、LIKE を使用しています。
  1. タクソノミーフィルタ:
  • $tax_query により特定のタクソノミー条件を追加可能。
  1. ページネーション対応:
  • wp_pagenavi を使用してページ分割を実現。
  1. チェック済み・未チェック投稿の分離:
  • 投稿を「チェック済み」と「未チェックまたはフィールド未設定」で分けて表示。

カスタマイズ方法

  1. カスタムフィールドの名前と値:
  • sample_field を実際のフィールド名に置き換えてください。
  • sample_value を使用する値に変更します。
  1. 投稿タイプ:
  • sample を実際の投稿タイプ名に変更します。
  1. スタイリング:
  • 必要に応じてHTML構造やクラス名を変更し、デザインに合わせてカスタマイズしてください。

このコードの活用例

  • 商品リストで「おすすめ商品」タグが付いているものを先頭に表示。
  • 特定の条件を満たす記事を目立たせて表示。
  • カスタムフィールドを活用した柔軟な投稿管理。

このコードを利用すれば、WordPressのカスタムフィールドを活用した効率的な投稿管理が可能です。ぜひご活用ください！