#11 カスタム投稿機能を使う

投稿ページ機能を拡張した「カスタム投稿タイプ」

上記の例では「chef」と「cource」という名前のカスタム投稿タイプがある状態です。

最初に、どんなページ構成にするのかという`設計`がなにより大事です

カスタム投稿タイプの作り方

1. functions.phpにカスタム投稿タイプを設定
2. 管理画面で記事を作成
3. カスタム投稿タイプ用のテンプレートファイルを作る
4. cssを記述

functions.phpで設定

/**
 *
 * カスタム投稿タイプの登録
**/
function create_post_type()
{
  $labels = array(
    'name'          => 'CHEF',
    'singular_name' => 'CHEF',               /*nameと一緒で良い */
    'menu_name'     => 'シェフ',              /*メニュー項目の名前 */
    'all_items'     => 'シェフ一覧',           /*メタボックスの見出し */
    'add_new'       => 'シェフを追加',         /*管理画面ナビメニュー名 */
    'add_new_item'  => '新規シェフ投稿を追加',  /*見出しとボタンの名前 */
  );
  $args = array(
    'labels'        => $labels,
    'public'        => true,    /* 投稿タイプを公開にする */
    'hierarchical'  => true,    /* 階層をもたせる */
    'has_archive'   => true,    /* アーカイブ（一覧）を有効にする（デフォルトはfalse）*/
    'show_in_rest'  => true,    /* falseだとAPIで出力されない */
    'menu_position' => 3,       /* 管理画面の左サイドメニューでの表示順 */
    'menu_icon'     => 'dashicons-coffee',   /* アイコンを選びます */
    'supports'      => ['title', 'editor', 'thumbnail', 'excerpt', 'author', 'custom-fields', 'page-attributes'],
    'taxonomies'    => ['chef_cat']
  );
  register_post_type('chef', $args);
}
add_action('init', 'create_post_type');

関数の作成

まず関数のオプションの設定を作成します。配列で必要なオプションを入れていきます。

function create_post_type() {}

自由に関数名をつけましょう。

'labels' => $labels,

ラベル関係はオプションが多いので、更に連想配列を変数$labelsに入れて分けています。
管理画面での表示名などを設定していきます。
調べると=> __('CHEF')という書き方も見られますが、ロケール（多言語化）に応じて自動翻訳してくれる関数の書き方なので、いったん普通の書き方で大丈夫です。

'menu_icon' => 'dashicons-coffee',

このページでいろんなiconを選択できます。WordPress.org

'supports' => ['title', 'editor', 'thumbnail', 'excerpt',.....],

管理画面の記事作成ページで表示するウィジェットを指定しています。必要なものを適宜入れましょう。
hierarchicalをtrueにしたらpage-attributesを入れましょう。

'show_in_rest' => false,

この設定をtrueにすると、記事作成画面が新エディタ（グーテンベルク）で表示されます。初期値がfalseなので旧エディタのままで良い場合は記述しなくても良いです。

その他の設定はこちら Codex 日本語版

実行の設定

register_post_type('カスタム投稿タイプ名', 'パラメーター')

カスタム投稿タイプ名とパラメーター（設定値を入れている変数）を登録します。

add_action('フックされるアクション名', '実行する関数');

WordPressがWebサイトを表示させるため順次、特定の処理（アクション）をしていきます。そのアクションにフックさせ、登録している関数を実行します。
※フックに関しては後ほど詳しく説明します。

initはユーザーのログイン状態がどうなっているかを参照しているタイミングです。ここでカスタム投稿タイプを登録した関数 create_post_type() を実行します。

ファイル関係はこのようになります。

管理画面のダッシュボードの左のメニューのアイコンから新規記事を作成します。
functions.phpで作った関数の内容が、この図のように表示されます。

カスタムフィールドを追加する

フィールドグループからシェフというグループを作成し、図の通りのフィールドを追加しましょう。
chef_imageの「返り値のフォーマット」は画像 URLにしておきましょう。
位置のタブはCHEF投稿に等しい投稿タイプに設定します。

記事を追加

シェフの記事を作ります。このような表示になります。

コピペ用文章　（青空文庫 ドグラ・マグラより）
タイトル3名分：「Italian chef」「japanese chef」「french chef」
本文：
私がウスウスと眼を覚ました時、こうした蜜蜂の唸るような音は、まだ、その弾力の深い余韻を、私の耳の穴の中にハッキリと引き残していた。
それをジッと聞いているうちに……今は真夜中だな……と直覚した。そうしてどこか近くでボンボン時計が鳴っているんだな……と思い思い、又もウトウトしているうちに、その蜜蜂のうなりのような余韻は、いつとなく次々に消え薄れて行って、そこいら中がヒッソリと静まり返ってしまった。

chef_name：　「下北 太郎」「大橋 太郎」「下北 花子」

テンプレートを作成する

<?php
get_header();
?>
<div class="contents_wrap">
<main class="main">
  <?php if( have_posts() ): while( have_posts() ): the_post(); ?>

  <div class="chef">
      <div class="chef__img">
          <?php if( get_field('chef_image') ): ?>
            <div>
              <p><img src="<?php echo get_field('chef_image'); ?>"></p>
            </div>
          <?php endif; ?>
      </div>
      <div class="chef__txt">
          <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
          <?php the_content(); ?>
          <h2><?php echo get_field('chef_name'); ?></h2>
      </div>
  </div>

  <?php endwhile; endif; ?>
</main>
</div>

<?php
get_footer();

テンプレートファイルは見づらいですが、図解するとこんな感じです。

CSSの設定

.main{
  .sidebar{
    ・・・
  }
  /* 以下を追加 */
  .chef{
    display:flex;
    margin:10px;
    font:normal 0.9em/2.4 serif;
    &__img{
      flex:1;
      margin-right:2em;
    }
    &__txt{
      flex:1;
      h1{
        font-size:1.8em;
        a{
          color:v.$mainColor;
        }
      }
      h2{
        width:100%;
        display:inline-block;
        text-align:right;
        color:v.$mainColor;
      }
    }
  }
  /* ここまで */
}

表示してみましょう

もし表示されない場合は、設定 > パーマリンクの設定 を何も変更せずに[変更を保存]をクリックしましょう。

カスタム投稿タイプ一覧を表示してみましょう

<?php
get_header();
/* 以下追加 */
$args = array(
  'post_type'    => 'chef',  /* 表示させたいカスタム投稿タイプ名 */
  'numberposts'  => 3,       /* 3件表示(デフォルトは５件) */
);
$the_query = new WP_Query($args); /* サブクエリでデータを取得し変数（インスタンス）に格納 */
?>

<div class="contents_wrap">
<main class="main">
  <div class="chef">
    ・・・カスタム投稿記事を表示している箇所
  </div>
</main>


<section class="list">
  <div class="list__item">
    
    <?php if( $the_query->have_posts() ): ?>
        <?php while( $the_query->have_posts() ): $the_query->the_post();?>
            <div>
              <a href="<?php the_permalink(); ?>">
                <div class="list__item-image" style="background-image: url(<?php the_post_thumbnail_url('medium');?>)"></div>
                <?php the_title(); ?>
                <h3><?php echo get_field('chef_name'); ?></h3>
              </a>
              <p><?php the_excerpt(); ?></p>
            </div>
        <?php endwhile; ?>
        
        <?php wp_reset_postdata(); ?>
        <?php else : ?>
        <p>関連アイテムはまだありません。</p>
    <?php endif; ?>
  </div>
</section>


</div>

<?php
get_footer();

サブクエリを表示させるWP_Query()とは

$the_query = new WP_Query($args);

サブループを終了すること

<?php wp_reset_postdata(); ?>

get_posts()関数 と WP_Query()クラスの違い

$args = array(
  'post_type'    => 'chef',
  'numberposts'  => 3,
);
$my_post = get_posts($args);
var_dump($my_post);  /* 取得データを見てみよう */

foreach ( $my_post as $post ): setup_postdata( $post );
・・・略
endforeach; wp_reset_postdata();

$args = array(
  'post_type'    => 'chef',
  'numberposts'  => 3
);
$the_query = new WP_Query($args);
var_dump($the_query);  /* 取得データを見てみよう */

if( $the_query->have_posts() ): while( $the_query->have_posts() ): $the_query->the_post();
・・・略
endwhile; endif; wp_reset_postdata();

CSSの調整

.main{
  いろいろ
}
.list{
  margin:20px auto;
  &__item{
    display:flex;
    @include v.mq('max','lg'){
      display:block;
    }
    div{
      flex:3;
      @include v.mq('max','lg'){
        margin-top:40px;
      }
      p{
        display:block;
        margin-top:20px;
        width:90%;
      }
    }
    &-image{
      width:300px;
      height:300px;
      margin:10px 0;
      background-repeat:no-repeat;
    }
  }
}

カスタム投稿一覧の表示が確認できます

http://localhost:8003/chef/georges/ でアクセスするとこのような表示になります。

#12 カスタムタクソノミー機能を使う

カスタムタクソノミーについて

カスタムタクソノミーの作り方

1. functions.phpのカスタム投稿タイプ内にカスタムタクソノミーを設定
2. 管理画面でカスタムタクソノミーを登録
3. カスタム投稿タイプ用のテンプレートにカスタムタクソノミーを記述
4. cssを記述

functions.phpの設定

/**
 *
 * カスタム投稿タイプの登録
**/
function create_post_type()
{
  $labels = array(
    ・・・省略
  );
  $args = array(
    ・・・省略
  );
  register_post_type('chef', $args);

  /* 追加ここから */
  /**
  *
  * カスタムタクソノミー設定
  **/
  /* 1つ目 */
  register_taxonomy(
    'food',  /* カスタムタクソノミー名を決める  */
    'chef',  /* 設定する対象のカスタム投稿タイプ */
    array(
      'label'             => '料理ジャンル',   /* カスタムタクソノミーラベル名 */
      'public'            => true,           /* 使用可能にします */
      'show_ui'           => true,           /* 管理画面上に編集画面を表示 */
      'hierarchical'      => true,           /* 階層を持たせるかどうか */
      'show_admin_column' => true,           /* 管理画面のカスタム投稿の一覧表示画面にタクソノミーを表示 */
      'show_in_rest'      => true            /* 記事制作のブロックエディタに表示 */
    )
  );
  /* 2つ目 */
  register_taxonomy(
    'shop',  /* カスタムタクソノミー名を決める  */
    'chef',  /* 設定する対象のカスタム投稿タイプ */
    array(
      'label'             => '在籍店舗',
      'public'            => true,
      'show_ui'           => true,
      'hierarchical'      => true,
      'show_admin_column' => true,
      'show_in_rest'      => true
    )
  );
  /* 追加ここまで */
}
add_action('init', 'create_post_type');

register_taxonomy('food', 'chef', $args);

第一引数：タクソノミーの名前

第二引数：対象のpostや投稿タイプ名

第三引数：パラメータ

設定と実際の画面の関係はこのようになります。

管理画面から登録

名前とスラッグを入れましょう。


メニューに設定したカスタムタクソノミーが表示されました。
それぞれ3人のシェフに設定してみましょう。

カスタム投稿タイプ、カスタムタクソノミーのテンプレートについて

カスタム投稿やカスタムタクソノミーのテンプレート関係はこの様になっています。
カスタムタクソノミーで作られた要素の一つ一つのことはタームという名称で呼ばれます。 この例では、タクソノミー名「shop」、管理画面で登録したスラッグ「tokyo, osaka, fukuoka」がタームとなります。

表示させるURL

カスタム投稿タイプ一覧「archive-***.php」

<?php
get_header();
$args = array(
  'post_type' => 'chef'
);
$the_query = new WP_Query($args);
?>

<div class="contents_wrap">
<main class="main">

  <?php if( $the_query->have_posts() ): ?>
  <?php while( $the_query->have_posts() ): $the_query->the_post(); ?>
  <section class="archive-chef">
    <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
    <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>

    <p>■カスタムフィールド：      <?php the_field('chef_name'); ?></p>
    <p>■カスタムフィールド：      <?php echo wp_get_attachment_image( get_post_meta(get_the_ID(), 'chef_image', true), 'large' ); ?></p>
    <p>■アイキャッチ画像：       <?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail'); ?></p>
    <p>■カスタムタクソノミーfood：<?php echo get_the_term_list(get_the_ID(), 'food'); ?></p>
    <p>■カスタムタクソノミーshop：<?php echo get_the_term_list(get_the_ID(), 'shop'); ?></p>

    <div>■本文：<?php the_excerpt(); ?></div>
  </section>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
  <?php endif; ?>

</main>
</div>

<?php
get_footer();

.contents_wrap{
  ・・・省略
  .list{
    ・・・省略
  }
  /* ここから追加 */
  .archive-chef{
    h1{
      margin:40px 0 0;
    }
    p{
      a{display:inline;}
    }
  }
  /* ここまで */
}

カスタムフィールドの画像、カスタムタクソノミーを取得する方法

get_post_meta( 投稿ID, カスタムフィールド名, true )

wp_get_attachment_image(画像ID, サイズ)

get_the_term_list()

http://localhost:8003/chef/でアクセスするとこのようになります。
cssで調整すればオリジナルの一覧ページができますね。

カスタムタクソノミー一覧「taxonomy.php」

<?php
get_header();

$page_object = get_queried_object();
$args = array(
  'post_type'      => 'chef',
  'taxonomy'       => $page_object->taxonomy,
  'term'           => $page_object->slug,
  'posts_per_page' => 5,
);
$custom_query = new WP_Query($args);
?>

<div class="contents_wrap">
<main class="main">
<h1><?php echo $page_object->slug ?></h1>
<section class="taxonomy">
  <div>
  <?php if( $custom_query->have_posts() ): ?>
      <?php while( $custom_query->have_posts() ): $custom_query->the_post(); ?>
          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <div class="data"><?php the_time('Y/m/d'); ?></div>
          <?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail'); ?>
          <div class="entry"><?php the_excerpt(); ?></div>
      <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
  <?php endif; ?>
  </div>
  <div class="taxonomy__list">
    <h3>カスタムタクソノミーのターム一覧</h3>
    <ul>
      <?php
        $terms = get_terms($page_object->taxonomy);
        foreach ( $terms as $term ) {
          echo '<li><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
        }
      ?>
    </ul>
  </div>
</section>
</main>
</div>

<?php
get_footer();

.contents_wrap{
  ・・・省略
  .archive-chef{
    ・・・省略
  }
  /* ここから追加 */
  .taxonomy{
    display:flex;
    &__list{
      width:35%;
      margin-left:auto;
    }
  }
  /* ここまで */
}

object(WP_Term)#5298 (10) {
  ["term_id"]    => int(13)
  ["name"]       => string(6) "東京"
  ["slug"]       => string(5) "tokyo"
  ["term_group"] => int(0)
  ["term_taxonomy_id"]=> int(13)
  ["taxonomy"]   => string(4) "shop"
  ["description"]=> string(0) ""
  ["parent"]     => int(0)
  ["count"]      => int(2)
  ["filter"]     => string(3) "raw"
}

wp_get_object_terms(タームを取得するオブジェクトのID, カスタムタクソノミー名);
↓
$term = wp_get_object_terms($post_ID, 'shop');

$terms = get_terms('shop');
foreach ( $terms as $term ) {
  echo '<li><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
}

http://localhost:8003/shop/tokyo/　で表示されます。
http://localhost:8003/shop/fukuoka/　や　http://localhost:8003/food/french/　でも
同じtaxonomy.phpテンプレートで表示できます。