【Advanced Custom Fields】给自定义文章类型设定自定义字段

カスタム投稿を作る

カスタム投稿タイプを作るには、主に下記の2つの方法があります。

テーマ（function.php）を編集する方法
プラグインを利用する方法

1.テーマの[function.php]を編集する

ダッシュボード＞外観＞テーマ編集を開きます。
function.phpを開きます。
php内に以下を追記します。
※functions.phpは記述ミスがあるとブログの表示が真っ白になったり、色々な不具合があるので必ずバックアップを取って作業をしてください＾

//カスタム投稿タイプ
function create_post_type() {
  register_post_type(
  'shopinfo', //投稿タイプ名
  array(
    'label' => '店舗情報',
    'labels' => array(
       'all_items' => '店舗情報',
       ),
    'description' => '店舗の紹介です',
    'public' => true,
    'has_archive' => true,
    'supports' => array( //投稿編集画面内の機能を引き出す
      'title',
      'editor',
      'author',
      'custom-fields',
      ),
  )
    );
}
add_action( 'init', 'create_post_type' );

ファイルを更新すると、ダッシュボードに新たな「店舗情報」という項目（投稿タイプ）ができます。
※投稿タイプ名は例として店舗情報としています。

カスタム投稿タイプにカスタムフィールドを設定するために、Wordpressのプラグイン「Advanced Custom Fields」を使います。

プラグインから新規追加で「Advanced Custom Fields」をインストールし有効化します。

左メニューのカスタムフィールドから新規追加をクリックします。

フィールドグループにタイトルを記入し、[位置]のルールでカスタム投稿タイプ名を選択します。

[+フィールドを追加]をクリックします。

フィールドラベル、フィールド名を入力して、フィールドタイプ（テキスト・画像等）を任意選択します。

各項目ごとにフィールドを追加していきます。
店舗写真、住所、電話番号、営業時間、定休日、コメント等のフィールドを追加設定します。

最後に[公開]をクリックしたら設定完了です。

店舗情報メニュー項目から記事を投稿することが可能となります。

カスタムフィールドの内容を表示する

カスタムフィールドの内容を表示するため、カスタム投稿タイプのテンプレートを作ります。

//一覧用
archive-{post_type}.php
archive-shopinfo.php

//シングル用
single-{post_type}.php
single-shopinfo.php

今回は shingle-shopinfo.php（シングル用）を作成しました。

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

		<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

			<h1><?php the_title();?></h1>
			<p><?php echo wp_get_attachment_image(get_post_meta($post->ID,'shop-photo',true)); ?></p>
			<p><?php echo post_custom('comment'); ?></p>
			<p>住所：<?php echo post_custom('address'); ?></p>
			<p>電話番号：<?php echo post_custom('tel'); ?></p>
			<p>営業時間：<?php echo post_custom('open'); ?></p>
			<p>定休日：<?php echo post_custom('holiday'); ?></p>
		<?php endwhile; endif; ?>

		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

カスタム投稿の記事が表示されました。