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制作の幅が広がるかと思います。

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

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

目次

関連記事

プログラミング

【映画】トゥームレイダーファーストミッションのあらすじ・感想を解説(最後に一部ネタバレ含む)

更新日:2020.03.23
1717
WordPress

【WordPress】投稿する画像サイズの初期設定を変更する方法

2023.08.18
533
WordPress

WordPressで検索した文字列をハイライトする方法

2022.07.31
2799
WordPress プログラミング

【ワードプレス】記事の公開日・更新日が同じとき、更新日を非表示にする方法

2020.06.25
1740