WordPressにてAdvanced Custom Fieldsを用いて連載(シリーズ)記事機能を実装する方法

先日「Series」プラグインで連載(シリーズ)記事機能の実装方法をメモしたが、色々デメリットもあったため今回は「Advanced Custom Fields」プラグインで同じような機能を実装したい。ACFの設定方法及びテーマファイル内のソースコードを以下にメモ。

実装環境

• PHP8.3.3
• WordPress6.4.3
• Advanced Custom Fields6.2.7

Advanced Custom Fields

Advanced Custom Fields (ACF)

実装方法

インストール

「WordPressダッシュボード→プラグイン→新規プラグインを追加」に進み「Advanced Custom Fields」で検索すると表示される筈なのでインストール→有効化とする。

もしくは公式ページからダウンロードしてプラグインのアップロードからインストールする

Advanced Custom Fields設定

「WordPressダッシュボード→ACF→フィールドグループ→新規追加」に進み、フィールドグループタイトルは適当な名前を付けた上で、フィールド内容は以下を設定する。

• フィールドタイプ → 選択
• フィールドラベル → シリーズ名
• フィールド名 → series_name

また、選択肢の内容として今回は以下を設定した。

未選択
テストシリーズ1

テーマファイル

表示させたい箇所のテーマファイル(single.phpとか)に以下を記述する。

<?php
$series = get_field('series_name');
if( $series != '未選択' ){
    $args = array(
        'posts_per_page' => 5,
        'paged' => $paged,
        'orderby' => 'post_date',
        'order' => 'DESC',
        'post_type' => 'post',
        'post_status' => 'publish', 
        'meta_query' => array(
            array(
                'key' => 'series_name', 
                'value' => $series
            ),
        ),
    );
    $the_query = new WP_Query($args);

    if( $the_query->have_posts() ) {

        echo '
            <div class="series_area">
                <div class="series_title">
                    ' . $series . '
                </div>
                <div class="series_list">
        ';

        while( $the_query->have_posts() ){
            $the_query->the_post();
            echo '
                    <div class="series_post">
                        <a href="' . esc_url( get_permalink() ) . '">
                            <div class="series_post_img">
                                <img src="' . get_the_post_thumbnail_url(get_the_ID(), 'thumbnail') . '">
                            <div>
                            <div class="series_post_title">
                                ' . get_the_title() . '
                            </div>
                            <div class="series_post_date">
                                ' . get_the_date() . '
                            </div>
                        </a>
                    </div>
            ';
        }

        echo '
                </div>
            </div>
        ';
    }
    wp_reset_postdata();
}
?>

適当にclassを割り振っているのでCSSでデザイン調整すること。

所感

「Series」プラグインでの実装よりも若干面倒ではあるものの以下メリットのようなメリットがある。

• デザインのカスタマイズがしやすい
• ACFの更新が活発
• 好きな位置に表示しやすい

実装の際はこちらの方法を取ろうと思う。