カスタム投稿ってなに？

最近よくカスタム投稿ってなに？カスタム投稿はできますか？という相談が多いため今日はカスタム投稿について簡単にやり方をまとめてみましたので参考にしてみてください。
カスタム投稿とはだれでも簡単に掲示板のように投稿を行いページを更新する投稿のことを指します。
例えば商品説明のページを制作会社に依頼して追加をしてもらう場合ランニングコストがかかります。
しかしカスタム投稿を使えばお客様側で画像、商品名、商品コード、商品説明などを入力するだけで簡単に新商品の概要ページが作れてしまいます。

ダッシュボードにお客様の声を追加しよう

ダッシュボードにお客様の声という投稿を追加したいのでfunctions.phpに投稿タイプの追加をしていきます。

functions.phpの追加ソースコード

//カスタム投稿タイプ
function create_post_type() {
  register_post_type(
  'voice', //投稿タイプ名
  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' );

register_post_type　投稿タイプ名
'label' => 'ダッシュボードに表示される名前',
'all_items' => 'ダッシュボードに表示される一覧の名前',
'description' => 'ディスクリプション'

最低限必要な変更箇所は register_post_type 、label、all_items、 description のみです。

記事一覧と記事のページを作成しよう

今回はこちらで用意したarchive.phpとsingle.phpを使って説明していきます。archive-カスタム投稿タイプ名.php
single-カスタム投稿タイプ名.php

ダッシュボードにvoiceというカスタム投稿を作成したので archive-voice.phpとsingle-voice.phpを作成しましょう。
archive-voice.phpとsingle-voice.phpのソースコード載せておくので参考にしてください。

archive-voice.php が記事一覧のページ
single-voice.php が記事のページ

archive-voice.phpのソースコード

<?php
get_header();
?>

<section id="voice_01" class="section">
<div class="container">
<div class="voice__block flexbox_list">
<?php 
if( $posts ) : foreach( $posts as $post ) : setup_postdata( $post );
?>
<a href="<?php the_permalink(); ?>" class="voice__box">
<div class="img">
<?php if( get_field('img') ): ?>
<img src="<?php the_field('img'); ?>" />
<?php endif; ?>
</div>
<div class="text">
<h2 class="ken-name">
<span><?php the_field('ken'); ?>　<?php the_field('name'); ?>様</span>
</h2>
<?php the_field('text'); ?>
</div>
</a>
<?php endforeach; ?>
<?php else : //記事が無い場合 ?>
<p>記事はまだありません。</p>
<?php endif;?>
<div class="voice__box">
</div>
</div>
<div class="navi-wrap">
<?php wp_pagenavi(); ?>
</div>  
<?php
wp_reset_postdata(); //クエリのリセット ?>
</div>
</section>

<?php
get_footer();

single-voice.phpのソースコード

<?php
get_header();
?>
<?php
while ( have_posts() ) :
the_post();
?>
<section id="voice-detail" class="section">
<div class="container">
<div class="voice__block">
<div class="voice__box">
<div class="img">
<?php if( get_field('img') ): ?>
<img src="<?php the_field('img'); ?>" />
<?php endif; ?>
</div>
<div class="text">
<?php the_field('text'); ?>
</div>
<h2 class="ken-name">
<span><?php the_field('ken'); ?>　<?php the_field('name'); ?>様</span>
</h2>
</div>
<div class="voice__day">
<time datetime="<?php the_time('Y-m-d')?>"><?php echo get_the_date('Y/m/d'); ?></time>
</div>
</div>
<?php
endwhile; // End of the loop.
?>
<?php // ------ pagenavi ここから  ------------------------------- ?>
<ul class="pagelink clearfix inner">
<li class="listlink"><a href="<?php bloginfo('url'); ?>/voice" class="btn">
<img src="<?php bloginfo('template_directory'); ?>/images/sub/btn_02.png" alt="">一覧へ戻る</a></li>
</ul>
<?php wp_reset_query(); ?>
<?php // ------ pagenavi ここまで  ------------------------------- ?>
</div>	
</section>
<?php
get_footer();

Advanced Custom Fields をインストールして使いこなそう

プラグインの追加からAdvanced Custom Fieldsをインストール有効にします。

更新をするとダッシュボードにカスタムフィールドが追加されています。
フィールドグループを作成したいのでフィールドグループを選択してください。
ここでいうフィールドとはarchive-voice.php とsingle-voice.php にある名前、都道府県、テキスト、画像がのことを指します。

必須項目は赤丸で囲んでいます。最低限変更が必要な箇所です。

フィールドグループ名
わかりやすい名前であれば何でも大丈夫です。

フィールドラベル名
編集画面で追加するときの名前です。
今回は画像の項目なのでわかりやすく画像とつけています。

フィールド名
ここはarchive-voice.phpのthe_field('フィールド名')にあたる部分です。
今回は画像のフィールド名をimgとしています。

フィールドタイプ
画像のフィールドなので画像ですね。名前や都道府県などのテキストの場合はテキストを選択してね。

必須項目はここまであとは好みにカスタマイズしてください。

カスタム投稿で投稿してみよう

先ほどfunctions.phpで追加したお客様の声という項目から新規追加で投稿してみます。

Advanced Custom Fieldsで作ったフィールドが反映されていますね。
さっそくタイトルやフィールドを埋めて投稿してみたいと思います。

こんな感じで9個作成しました。ちゃんとできているか不安ですね。
一度ブラウザで確認してみます。

ええーーー！ 【404エラー】 ・・・・・。
あっパーマリンクの更新を忘れていました（笑）
設定のパーマリンク設定から更新を押すだけ。
ポチっと。

はいーーー。
表示されました。
CSSは今回記載していませんがお好みにカスタマイズして理想のカスタム投稿を作りましょう。
一応single-voice.phpも表示されるか確かめてみます。
赤丸に記事のリンク（ the_permalink() ）があるのでちゃんと記事にリンクできているか見てみます。

できていますね。
あらかじめhtmlとCSSのソースでブラウザでデザインを確認しループする箇所だけあとから変更するとスムーズにできますよ。
ページネーションを使用する場合あらかじめWP-PageNaviのインストールし有効にするもしくは自作でfunctions.phpに追加で簡単に実装できます。