#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() を実行します。

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

管理画面のダッシュボードの左のメニューのアイコンから新規記事を作成します。

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

フィールドグループからシェフというグループを作成し、図の通りのフィールドを追加しましょう。

記事を追加

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

テンプレートを作成する

<?php
get_header();
$flg = get_post_meta( get_the_ID() );  /*カスタム投稿タイプ 記事IDの有無*/
?>
<div class="contents_wrap">
<main class="main" role="main">
  <?php if( have_posts() ): while( have_posts() ): the_post(); ?>

  <?php if( !empty($flg) ): ?>
  <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 endif; ?>

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

<?php
get_footer();

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

CSSの設定

.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:$titleColor;
      }
    }
    h2{
      width:100%;
      display:inline-block;
      text-align:right;
      color:$titleColor;
    }
  }
}

表示してみましょう

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

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

<?php
$args = array(
  'post_type'    => 'chef',  /* 表示させたいカスタム投稿タイプ名 */
  'numberposts'  => 3,       /* 3件表示(デフォルトは５件) */
);
$the_query = new WP_Query($args); /* サブクエリを取得 */
?>

<div class="contents_wrap">
<main class="main" role="main">
  カスタム投稿記事を表示している箇所
</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(); ?>
              </a>
              <p><?php the_excerpt(); ?></p>
            </div>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
        <?php else : ?>
        <p>関連アイテムはまだありません。</p>
    <?php endif; ?>
  </div>
</section>


</div>

WP_Query()とは

$the_query = new WP_Query($args);

get_posts() と WP_Query()の違い

get_posts()

WP_Query()

共通

<?php wp_reset_postdata(); ?>

CSSの調整

.main{
  いろいろ
}
.menu-logo{
  img{
    margin:20px auto;
  }
}
.list{
  margin:20px auto;
  &__item{
    display:flex;
    @include mq('max','lg'){
      display:block;
    }
    div{
      flex:3;
      @include 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(
    'labels' => $labels,
    ・・・省略
  );
  register_post_type('chef', $args);

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

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

タクソノミーの名前

対象のpostや投稿タイプ名

パラメータ

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

管理画面から登録

名前とスラッグを入れましょう。
カウントに数字が入っていますが、登録したては0になります。

カスタム投稿タイプ用のテンプレートにカスタムタクソノミーを記述

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

表示されるURL

archive-chef.php

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

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

  <?php if( $the_query->have_posts() ): ?>
  <?php while( $the_query->have_posts() ): $the_query->the_post(); ?>
  <div 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), 'thumbnail' ); ?></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>
  </div>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
  <?php endif; ?>

</main>
</div>

<?php
get_footer();

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

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" role="main">

<h1><?php echo $page_object->slug ?></h1>

<?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; ?>

<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>

</main>
</div>

<?php
get_footer();

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テンプレートで表示できます。