Written by Kasumi

Advanced Custom Fields でオプションページに投稿タイプを作成する方法

WordPressのカスタムフィールドにAdvanced Custom Fieldsプラグイン(以下ACF)を使用している。

ACFのオプションページ機能を使ってカスタムフィールド専用の投稿タイプを作成したい。

ACFで作った投稿タイプの記事ページはURLで公開したくない。

このような悩みを解決します。

本記事ではACFを使ったカスタムフィールド専用投稿タイプの作成方法について解説します。

functions.phpにコードを記述

//-----------------------------------------------------
// 【ACF投稿タイプを追加】
//-----------------------------------------------------
add_action( 'init', 'create_post_type_acfpost' );//create_post_type_投稿タイプ名を記述する
function create_post_type_acfpost() {//create_post_type_投稿タイプ名を記述する
  register_post_type( 
    'acfpost',//投稿タイプ名を記述する
    array(
      'labels' => array(
      'name' => ('ACF投稿タイプ管理'),
      'singular_name' => ( 'ACF投稿タイプ管理' )
    ),
    'public' => false,//投稿ページをURLで公開しない
    'show_ui' => true,
    'supports' => array( 'title','thumbnail'),
    'menu_position' =>7,
    'show_in_rest' => true,
    'has_archive' => false
    )
  );
}

上記コードをfunctions.phpに記述しましょう。

コード内の投稿タイプ名(acfpostとなってる箇所)を任意の名称に変更してください。

array内のname、singular_nameプロパティの値に(ACF投稿タイプ管理となってる箇所)任意の投稿タイプ名を入れてください。

publicプロパティをfalseにする事で公開されなくなります。

以上でACFを使った投稿タイプの完成です。

WordPressの管理画面に入り、サイドバーに作成した投稿タイプ名が表示されてるか、新規追加で投稿ページを作成できるか、確認しましょう。

確認できたらACF編集画面で作成した投稿タイプにカスタムフィールドを割り当てましょう。

ACF投稿タイプの投稿一覧を出力する方法

<?php 
  $args = array(
  'post_type' => 'acfpost',//ACF投稿タイプを指定
  );
  $the_query = new WP_Query($args);
?>
<?php if ($the_query-> have_posts()) : ?>
<?php while ($the_query-> have_posts()) :$the_query-> the_post(); ?>
<!-- 投稿ページのタイトルを出力-->
<?php the_title(); ?>
<!-- カスタムフィールドを出力 -->
<?php echo get_field('hoge'); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>

作成した投稿タイプの投稿一覧を出力するにはwp_queryを使えば簡単です。

上記コードを出力したいページのテンプレートファイルに記述しましょう。

$args内のpost_typeプロパティに前章で作成した投稿タイプ名を指定します。

最後にwhile文内で一覧で出力したい任意のカスタムフィールド値をget_field関数で指定すれば出力できます。

以上の流れで実装完了です。

まとめ

ACFとカスタム投稿タイプを組み合わせて作る事で、色々web制作の幅が広がるかと思います。

ぜひ参考にしてみてください。

以上で解説を終わります。

目次

関連記事

WordPress プログラミング

投稿の一覧ページで、過去記事を一番先頭に持ってくる方法【ワードプレス】

2019.11.29
1539
プログラミング

Visual Studio Code(VSコード)でスニペットを登録するやり方【効率アップ】

更新日:2020.06.12
803
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
16624
WordPress プログラミング

Advanced Custom Fields Pro(ACFPRO)を使いオプションページを作成する方法

2022.04.22
3093