WordPressオリジナルテーマの作り方⑩（カスタム投稿編）

今回はWordPressオリジナルテーマの作り方【第10回】カスタム投稿編となります。

WordPressオリジナルテーマの作り方は、当記事を含め以下の記事があります。

今回のWordPressオリジナルテーマの作り方はカスタム投稿編です。

案件によってはない事もありますが、逆に当たり前のようにある事も多いので確実に覚えておいた方がいいと思います。

また記事の最後にはWordPressのおすすめ教材をご紹介させて頂きます。

WordPressオリジナルテーマの作り方：カスタム投稿とは？

通常WordPressの管理画面メニューにある『投稿』は以下のように1つだけです。

WordPress管理画面メニュー

そしてこのデフォルトの『投稿』とは別に投稿機能を追加する事が出来ます。

それがカスタム投稿です。

別にカテゴリーで分ければいいじゃん

と思うかも知れませんが、例えば・・・

この3つがあった場合、カテゴリーではなくページごとに分けたいということもあると思います。

なので上記の場合は『通常の投稿1つとカスタム投稿2つ』といった感じになります（過去に案件で通常の投稿1つとカスタム投稿4つやった事あります）

そしてカスタム投稿2つを追加した状態がこちらです。

WordPress管理画面メニュー：カスタム投稿2つ追加

こうする事で用途別に投稿を分ける事が出来るので分かりやすいですね（ピンのアイコンが投稿です）

もちろんページごとにデザインを変えることも出来ます。

Custom Post Type UIを使ったカスタム投稿の作り方

カスタム投稿を作る方法はいろいろありますが、今回は『Custom Post Type UI』というプラグインを使います。

まずはプラグインをインストールして有効化しましょう。

右上のキーワード入力欄に『Custom Post Type UI』と入力するとプラグインが表示されます。

プラグイン『Custom Post Type UI』インストール

今すぐインストールをクリックすると有効化と表示が変わるので、そのまま有効化をクリックすれば完了です。

カスタム投稿は通常の投稿と同じく、

などがあります。

今回はこれら全ての作り方を解説していきます。

投稿タイプの追加と編集（新規投稿タイプの追加）

次は左のメニューに追加された『CPT UI』という項目から『投稿タイプの追加と編集』を選択します。

先ほど『ニュース』と『お客様の声』2つのカスタム投稿を追加した画像を載せましたが、今回は『ニュース』というカスタム投稿を作って解説していきます。

Custom Post Type UI：投稿タイプの追加と編集

上記『投稿タイプスラッグ』『複数形のラベル』『単数形のラベル』の3ヵ所は必須入力となっています。

まず『投稿タイプスラッグ』ですが、ここはスラッグ名でURLやファイル名に使われるので英語にしておきましょう。

あとのラベルですが、これは左のメニューに表示されるので分かりやすい名前にしておきましょう（英語でも日本語でもどちらでもOK）

アーカイブあり

次に投稿タイプの記事一覧ページを作るかどうかの設定をします。

デフォルトでは記事一覧ページは作らない設定になっていますが、通常カスタム投稿ごとに記事一覧ページがあるかと思うので、下の方にスクロールしていくとある『アーカイブあり』という項目を『偽』から『真』に変更します。

Custom Post Type UI：投稿タイプの追加と編集（アーカイブありを真に変更）

最後に一番下にある『投稿タイプの追加』をクリックして保存します。

カスタム投稿のテンプレートを作成

カスタム投稿のテンプレートはプラグインをインストールしただけでは作られないので、カスタム投稿の記事一覧ページと個別記事ページの2種類を作っていきます。

まずは記事一覧ページと個別記事ページのテンプレートを作ります（タクソノミー一覧ページのテンプレートは後で作ります）

カスタム投稿の記事一覧ページ

カスタム投稿の記事一覧ページ用のテンプレートは次のようになります。

archive-【カスタム投稿タイプのスラッグ名】.php

今回追加するカスタム投稿のスラッグ名は『news』なので、

archive-news.php

となります。

先ほど投稿タイプスラッグは英語にしましょうと書きましたが、ここが日本語だとおかしいですよね？

カスタム投稿の個別記事ページ

個別記事ページの場合は『single.php』をベースにします。

あとは先ほどと同じように以下のファイルを作ります。

single-news.php

以上でカスタム投稿のテンプレートは完成しました。

前回までの分と合わせて、テーマフォルダのファイル構成はこうなっています。

カスタム投稿テンプレート2種類作成

タクソノミーの追加

タクソノミーとは何かというと、通常の投稿にあるカテゴリーやタグに相当するものです。

通常既存テーマや有料テーマなどの投稿では、編集画面右側に以下のようにカテゴリーやタグの項目があります（Uncategorizedは最初からあるデフォルトのカテゴリーです）

WordPress投稿編集画面：既存テーマ・有料テーマなど

しかし、カスタム投稿の画面にはこれがありません。

WordPress投稿編集画面：オリジナルテーマ

これからここにカテゴリー、のような物であるタクソノミーを作っていきます。

まずは『CPT UI』の『タクソノミーの追加と編集』を選択します。

すると次のような画面になるので、カスタム投稿と同じようにスラッグには英語で、ラベルには分かりやすい名前を設定します。

Custom Post Type UI：タクソノミーの追加と編集

また『利用する投稿タイプ』でカスタム投稿の『ニュース』にチェックを入れます。

こうする事で『カスタム投稿のニュース』にだけ、『地域』というタクソノミーが表示される事になります。

この利用する投稿タイプは複数選択することも出来ます。

あとはこれをカテゴリーのようにチェックボックスを表示させるために、下の方にスクロールしていくとある『階層』という項目を『偽』から『真』に変更します。

Custom Post Type UI：タクソノミーの追加と編集（階層を真に変更）

そしてこれらを追加する前は以下の状態ですが、

WordPress管理画面メニュー：タクソノミー追加前

追加すると以下のようになります。

WordPress管理画面メニュー：タクソノミー追加後

『地域』というタクソノミーが出来ました。

これはカテゴリーの大枠の名前のような物で、この中にカテゴリーを追加していく感じになります。

この『地域』をクリックするとこのような画面になります。

カスタムタクソノミー：カテゴリー作成

まだ何も追加していないので、右側には『カテゴリーが見つかりませんでした』と書いてあります。

ここで例えば『東京』というカテゴリーを追加します。

スラッグは英数字になります。

そして下にある『新規 地域を追加』をクリックすると右側に追加されます。

カスタムタクソノミー：カテゴリー（東京）作成

あと2つくらい追加してから投稿画面を見てみましょう。

WordPress投稿編集画面：カスタムタクソノミー（カテゴリー追加）

ちゃんと『地域』というタクソノミーの中に『東京』などのカテゴリーが表示されたのが確認出来ます。

同じようにタクソノミーは増やしていく事が出来ます。

タクソノミー一覧のテンプレートを作成

最後にタクソノミー一覧のテンプレートを作成します。

これは通常投稿のカテゴリー一覧のような物なので、基本的には『category.php』をベースにしたものになるかと思います。

これも作り方はカスタム投稿のテンプレートと同じような感じです。

taxonomy-【タクソノミースラッグ名】.php

今回追加したタクソノミーのスラッグ名は『area』なので、

taxonomy-area.php

となります。

これも『archive-news.php』などと同じ場所にファイルを置きます。

こうしてカスタム投稿ページやタクソノミーは増やしていくことが出来ます。

テンプレートの書き方

カスタム投稿の記事一覧ページやタクソノミー一覧ページでのテンプレートの書き方ですが、基本的な書き方はWordPressオリジナルテーマの作り方⑥（記事一覧ページ編）と同じですが、まずコンテンツ内で1つ書き方が違うのは『カテゴリーの出力方法』です。

カテゴリーの出力方法

通常の投稿でのカテゴリー（1件表示）はこちら。

<?php
  $category = get_the_category();
  echo '<span class="'.$category->slug.'">'.$category[0]->name.'</span>';
?>

カスタム投稿でのカテゴリーはこちら。

<?php
  $taxonomy_terms = get_the_terms($post->ID, 'タクソノミースラッグ'); 
  if ( $taxonomy_terms ) {
    echo '<span>'.$taxonomy_terms[0]->name.'</span>';
  }
?>

ちなみに今回追加したタクソノミーの地域のスラッグは「area」なので、このようになります。

<?php
  $taxonomy_terms = get_the_terms($post->ID, 'area'); 
  if ( $taxonomy_terms ) {
    echo '<span>'.$taxonomy_terms[0]->name.'</span>';
  }
?>

ループの書き方

続いてループの書き方ですが『archive-○○.php』『taxonomy-○○.php』『single-○○.php』でそれぞれ少し変わります。

一覧系はulタグ内のliタグを囲む形で書きます。

archive-○○.php

<?php
  if( wp_is_mobile() ){
    $num = 4; // スマホの表示数(全件は-1)
  } else {
    $num = 8; // PCの表示数(全件は-1)
  }
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $args = [
    'post_type' => 'news', // カスタム投稿の投稿タイプスラッグ
    'paged' => $paged, // ページネーションがある場合に必要
    'posts_per_page' => $num, // 表示件数
    // カテゴリー(ターム)を指定する場合に書く↓
    'tax_query' => array (
      array (
        'taxonomy' => 'area', // タクソノミーのスラッグ
        'terms' => 'tokyo', // タームのスラッグ
        'field' => 'slug', //ターム名をスラッグで指定する（変更不要）
      ),
    // カテゴリー(ターム)を指定する場合に書く↑
  ];
  $wp_query = new WP_Query($args);
  if (have_posts()): while (have_posts()): the_post();
?>
<li class="">
  <!-- コンテンツ -->
</li>
<?php endwhile; else: ?>
<?php endif ?>
<?php wp_reset_postdata(); ?>

taxonomy-○○.php

<?php
  if( wp_is_mobile() ){
    $num = 4; // スマホの表示数(全件は-1)
  } else {
    $num = 8; // PCの表示数(全件は-1)
  }
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $type = get_query_var( 'area' ); // タクソノミーのスラッグ
  $args = [
    'post_type' => 'news', // 投稿タイプスラッグ
    'paged' => $paged, // ページネーションがある場合に必要
    'posts_per_page' => $num, // 表示件数（変更不要）
    'tax_query' => array(
      array(
        'taxonomy' => 'area', // タクソノミーのスラッグ
        'field' => 'slug', // ターム名をスラッグで指定する（変更不要）
        'terms' => $type,
      ),
    )
  ];
  $wp_query = new WP_Query($args);
  if (have_posts()): while (have_posts()): the_post();
?>
<li class="">
  <!-- コンテンツ -->
</li>
<?php endwhile; else: ?>
<?php endif ?>
<?php wp_reset_postdata(); ?>

一覧系で編集するのは以下の3つだけで大丈夫です。

single-○○.php

これは通常投稿の個別記事ページと同じです。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<article class="">
  <!-- コンテンツ -->
</article>
<?php endwhile; endif; ?>

ページネーション

次はページ送りするページネーションを設置します。

まずは一覧系のページネーションはこちらです。

<?php
  the_posts_pagination( array( 
    'mid_size' => 1,
    'prev_text' => '前へ', 
    'next_text' => '次へ' 
  ) );
?>

この 『前へ』や『次へ』のテキストは自由に変えられます。

もし上記ページネーションが上手く表示されない場合はこちらで試してみて下さい。

<?php
  global $wp_query;
  $big = 9999999999;
  $arg = array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'current' => max( 1, get_query_var('paged') ),
    'total'   => $wp_query->max_num_pages,
    'mid_size' => 1,
    'prev_text' => '前へ',
    'next_text' => '次へ',
  );
  echo paginate_links($arg);
?>

そしてこちらが個別記事のページネーションです。

<?php
  the_post_navigation( array(
    'prev_text' => '前へ',
    'next_text' => '次へ',
  ) );
?>

一覧系の最初と似ていますが、一覧系は『the_posts_navigation』で個別記事は『the_post_navigation』 となります。

一覧系は複数形になるということですね。

以上になります。

まとめとおまけ

今回の内容ですが、以下のような設定も可能です。

また、ターム（カテゴリー）を以下のようにタブメニューで作成することも出来ます（カテゴリーページと同じ）

カスタム投稿：タームのタブメニュー

『すべて』はカスタム投稿の記事一覧ページなので『archive-○○.php』、『すべて』以外はターム（カテゴリー）ページなので『taxonomy-○○.php』となります。

これらの設定方法は以下のコーディング&WordPressメモまとめ集にコピペ出来るように掲載しています。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら

関連記事WordPressオリジナルテーマ関連記事

WordPressオリジナルテーマ制作のおすすめ教材5選！

勉強方法は書籍、動画、プログラミングスクールなど色々あり、個人によって向き不向きがあると思います。

そこでタイプごとにご紹介させて頂きたいと思いますが、その前におすすめの勉強方法は以下になります。

これからご紹介する教材と一緒にこのブログを読み進めて頂けると、より理解が深まるかと思います。

書籍

WordPressに関する本も沢山ありますが、ここでおすすめするのは2冊です。

いちばんやさしいWordPressの教本

こちらは以前私が持っていた本で、タイトル通りやさしいというかWordPressを1から勉強したい人向けの内容となっています。

Lightningという無料のWordPressテーマを使った制作方法など載っています。

ちなみにLightningを使ったサイト制作についてはこちらのブログでもご紹介しています。

Lightningを使ってサイト作成（前編）

Lightningを使ってサイト作成（後編）

初心者からちゃんとしたプロになる WordPress基礎入門

こちらは私も個人的にお世話になっているちづみさんが書かれた本になります。

WordPressの本はこれまで何冊か購入しましたが、ダントツで読みやすいです。

ちなみに私が初めてにして唯一購入したコーディング教材がちづみさんのnoteでした。

また、初心者から実務経験者まで活用出来る非常におすすめの本となっています（電子書籍で購入しました）

動画

WordPressを動画で学びたい人はこちらの教材がおすすめです。

WordPress テーマ開発講座

本と違って動画だと手を動かしながら確認出来るのでいいですね。

こちらはUdemyの有料教材ですが、かなりの頻度でセールを行っていて90%オフとか良くあるので出来ればそのタイミングを狙いましょう（私はセール時に購入しました）

『WordPressの動画教材と言えばコレ』というくらい有名な教材で、私を含め周りでも購入している人がたくさんいます。

もちろんUdemyはWordPress以外の教材もたくさんあるので、気になる教材がセールをやっていたら購入を検討しても良いかも知れませんね。

プログラミングスクール

プログラミングスクールも色々ありますが『Web制作に特化したスクール』であればデイトラ一択かと思います。

開校1年で受講生が7000人を突破したオンラインスクールで、スクールと言ってもオンラインなので自宅で受講することが出来ます。

WordPressのカリキュラムは『Web制作コース上級編』にあります。

デイトラはTwitterをやっていれば分かりますが、悪い評判は見たことがなく、叩かれやすいWeb制作業界において非常にクリーンなイメージです。

カリキュラムの質が高いのはもちろん、他のスクールと比べて圧倒的なコスパかつ買い切りとなっています。

そしてカリキュラムはどんどん更新されるので『情報が古い』ということもなく、メンターに質問が出来る点も独学だと挫折しやすいWeb制作の勉強においてはおすすめです。

私の周りも『Web制作を始めるならまずデイトラを勧める』という人も多いです。

デイトラの無料レッスン動画はこちら

【"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材

これはBrainという知識共有プラットフォームで販売されている教材になります（👇画像クリック出来ます）

こちらは学習面以外にも制作会社とのやり取りの流れや、特典では『作業前・納品前のチェックシート』『営業文のサンプル』『見積もり計算シート』など『実務に対する不安を払拭できる内容』となってます。

LP1本のコーディング費が安くても3万円くらいだと考えれれば、軽く1日で回収出来るので早めに『安心』を購入しましょう。

詳細はこちらからどうぞ👇