勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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の更新が活発
  • 好きな位置に表示しやすい

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

 - WordPress CMS

  関連記事

WordPressで記事毎に設定したバナー広告を表示させる方法

WordPressでGoogleアドセンスのようなクリック広告ではなく、商品を指 ...

Advanced Custom Fieldsでチェックボックスの記事を取得

Advanced Custom Fieldsでチェックボックス設定しているカスタ ...

WordPressでカスタムフィールドとCSVファイル投稿する方法

WordPressでカスタムフィールド設定している環境に、CSVファイルアップロ ...

WordPressにてACFで設定したカスタムフィールドの値を元に記事を並べ替える方法

WordPressにてAdvanced Custom Fieldsで設定したカス ...

Advanced Custom Fieldsで設定した項目を条件に記事一覧を取得する方法

WordPressでAdvanced Custom Fieldsにて設定した項目 ...