プラグインなしでカスタム投稿タイプとカスタムタクソノミーを自作する方法

プラグインなしでカスタム投稿タイプとタクソノミーを追加する方法

みなさん、カスタム投稿タイプって知っていますか?

カスタム投稿タイプとは、WordPressの「投稿」や「固定ページ」のような機能を独自に追加することができる機能です。

簡単に追加することができるプラグインも用意されていますが、細かい調整ができなかったりして、制限されてしまいます。

また、プラグインでサイトが重くなってしまうのを避けたい方もいますよね。

なので今回は、WordPressにプラグインなしで、独自にカスタム投稿タイプとカスタムタクソノミーを追加し、独自のアーカイブ(記事一覧ページ)や投稿ページ(個別の記事)を作成して、実際に投稿機能として使えるようになるまでを徹底解説していきます!

functions.phpにカスタム投稿タイプを追加

今回は、「お知らせ・ブログ」というカスタム投稿タイプを作成してみましょう。

カスタム投稿タイプをWordPressに追加するには、functions.php に下記のコードを追加します。

また、functions.phpを編集する際は、必ずメモ帳にコピペしておくなどのバックアップをとっておきましょう。

<?php // カスタム投稿タイプを追加
add_action( 'init', 'custom_post_type' );
function custom_post_type() {
  register_post_type( 'blog', // カスタム投稿タイプのスラッグの指定
    array(
      'labels' => array(
        'name' => __( 'お知らせ・ブログ' ),          // メニューに表示されるアサル(ASAL)
        'singular_name' => __( 'お知らせ・ブログ' ), // 単体系のアサル(ASAL)
        'add_new' => _x('新規追加', 'blog'),        // 新規追加のアサル(ASAL)
        'add_new_item' => __('新規追加')            // 新規追加のアサル(ASAL)
      ),
      'public' => true,                 // 投稿タイプをパブリックにする
      'has_archive' => true,            // アーカイブを有効にする
      'hierarchical' => false,          // ページ階層の指定
      'menu_position' =>5,              // 管理画面上の配置指定
      'menu_icon' => 'dashicons-edit',  // アイコン
      'supports' => array('title','editor','thumbnail','revisions') // サポート指定
      // 全てのサポートを使う場合は下記参照
      //'supports' => array('title','editor','thumbnail','custom-fields','excerpt','author','trackbacks','comments','revisions','page-attributes')
    )
  );
}
?>

上記のタグの各要素の意味は、下記を参照にしてみて下さい。

label

カスタム投稿タイプの表示名を指定します。

ここで指定した名前が、WordPressの管理画面上に表示されます。

has_archive

アーカイブページ(記事一覧ページ)を作成するかどうかを指定します。

「false」を指定すると、記事一覧ページは作成されません。

hierarchical

固定ページのように、記事に親子関係を持たせるかどうかを指定することができます。

menu_position

WordPressの管理画面上の位置順を指定できます。

下記の番号による位置の変更ができます。

5 → 投稿の下
10 → メディアの下
15 → リンクの下
20 → 固定ページの下
25 → コメントの下
60 → 外観の下
65 → プラグインの下
70 → ユーザーの下
75 → ツールの下
80 → 設定の下
100 → 最下部に独立させる

menu_icon

WordPressの管理画面上に表示する際のアイコンを指定できます。

アイコンの一覧は、WordPressの公式サイトから選んで、お好みで変更してみて下さい。

WordPress公式サイトのアイコン一覧

supports

カスタム投稿タイプの編集画面で使用できるようにする機能を選ぶことができます。

下記が各パラメーターと使用できる機能です。

タイトル → title
エディター → editor
サムネイル(アイキャッチ画像) → thumbnail
リビジョン → revisions
抜粋 → excerpt
カスタムフィールド → custom-fields
コメント → comments
投稿のフォーマット → post-formats
ページ属性 → page-attributes
トラックバック → trackbacks
作成者 → author

なお、ここでは「タイトル、エディター、サムネイル(アイキャッチ画像)、リビジョン」を指定しています。

他のパラメーターを追加する場合は、「,(カンマ)」で区切って配列の中に追加して下さい。

これで、カスタム投稿タイプの追加は完了しました!

カスタム投稿タイプ初期メニュー

エラーが出る場合はパーマリンクの設定を更新してみる

functions.phpでカスタム投稿タイプを追加した後に、必ずパーマリンク設定を空更新する!

パーマリンクの設定を更新しないと、カスタム投稿タイプに記事を作成しても表示されないので、必ず忘れることなく空更新をするようにして下さい。

パーマリンク設定で空更新

パーマリンクの空更新の方法は、「管理画面→設定→パーマリンクの設定」を開き、何も変更せずに「変更を保存」ボタンを押すだけで完了です。

カスタム投稿タイプを複数追加したい場合

カスタム投稿タイプを複数追加したい場合は、「function add_custom_post() {~}」の中に、「register_post_type(~);」をコピペしてカスタム投稿タイプのスラッグだけを変更してあげましょう。

<?php // カスタム投稿タイプを追加
add_action( 'init', 'custom_post_type' );
function custom_post_type() {
  register_post_type( 'blog', // カスタム投稿タイプのスラッグの指定
    array(
      'labels' => array(
        'name' => __( 'お知らせ・ブログ' ),          // メニューに表示されるアサル(ASAL)
        'singular_name' => __( 'お知らせ・ブログ' ), // 単体系のアサル(ASAL)
        'add_new' => _x('新規追加', 'blog'),        // 新規追加のアサル(ASAL)
        'add_new_item' => __('新規追加')            // 新規追加のアサル(ASAL)
      ),
      'public' => true,                 // 投稿タイプをパブリックにする
      'has_archive' => true,            // アーカイブを有効にする
      'hierarchical' => false,          // ページ階層の指定
      'menu_position' =>5,              // 管理画面上の配置指定
      'menu_icon' => 'dashicons-edit',  // アイコン
      'supports' => array('title','editor','thumbnail','revisions') // サポート指定
    )
  );
  register_post_type( 'blog2', // カスタム投稿タイプのスラッグの指定
    array(
      'labels' => array(
        'name' => __( 'お知らせ・ブログ2' ),          // メニューに表示されるアサル(ASAL)
        'singular_name' => __( 'お知らせ・ブログ2' ), // 単体系のアサル(ASAL)
        'add_new' => _x('新規追加', 'blog2'),        // 新規追加のアサル(ASAL)
        'add_new_item' => __('新規追加')            // 新規追加のアサル(ASAL)
      ),
      'public' => true,                 // 投稿タイプをパブリックにする
      'has_archive' => true,            // アーカイブを有効にする
      'hierarchical' => false,          // ページ階層の指定
      'menu_position' =>5,              // 管理画面上の配置指定
      'menu_icon' => 'dashicons-edit',  // アイコン
      'supports' => array('title','editor','thumbnail','revisions') // サポート指定
    )
  );
}
?>

上記の場合は、「お知らせ・ブログ」と「お知らせ・ブログ2」という2つのカスタム投稿タイプを追加することができます。

functions.phpにカスタムタクソノミーを追加

次に、タクソノミーを追加します。その前に、タクソノミーとは?タームって何???という方のために、簡単に説明しておきたいと思います。

タクソノミーとは?

タクソノミーとは、「カテゴリー」や「タグ」と同じです。

タームとは?

タームとは、「カテゴリー」や「タグ」の中にある各要素のことを指します。

タクソノミーとタームの違いの説明

例えば、カスタム投稿タイプでブログを作った場合、「WEB」というタクソノミー(カテゴリー)の中にあるのがターム(分かりやすく言えばカテゴリーの要素)として「HTML」「CSS」「JavaScript」などを設定するというイメージになります。

カスタムタクソノミーを追加

カスタムタクソノミーを追加するには、functions.php に下記のコードを追加します。

また、functions.phpを編集する際は、必ずメモ帳にコピペしておくなどのバックアップをとっておきましょう。

<?php // タクソノミーを追加
function add_taxonomy() {
  register_taxonomy(
    'blog_category', // タクソノミースラッグ
    'blog',          // 使用するカスタム投稿タイプを指定
    array(
      'hierarchical' => true,          // 階層を持たせるかを指定(trueでカテゴリー、falseでタグ)
      'label' => 'カテゴリー',          // メニューに表示されるアサル(ASAL)
      'singular_label' => 'カテゴリー', // 単体系のアサル(ASAL)
      'public' => true,                // 投稿タイプをパブリックにする
      'show_ui' => true                // 管理画面上に編集画面を表示するかを指定
    )
  );
}
add_action( 'init', 'add_taxonomy' );
?>

上記の「’blog_category’」の部分は、タクソノミーの記事一覧のURLにも出力されます。

例:https://asalworld.com/blog_category/

また、上記のタグの各要素の意味は、下記を参照にお好みでカスタマイズして下さい。

hierarchical

ここでは、このパラメーターでカテゴリー形式にするかタグ形式にするかを決めることができます。

「true」を指定するとカテゴリー形式となり、「false」を指定すると、タグ形式になります。

label

管理画面上の名前を指定。

singular_label

管理画面上の名前を指定。

なお、labelとsingular_labelは、単数形と複数形に分かれていますが、同じ値を指定して下さい。

show_ui

管理画面上に編集画面を表示するかを指定できます。管理画面上に表示したいは、「true」にして下さい。

下の画像のようにカテゴリーが追加されていればOKです!

カスタム投稿タイプのメニュー

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

カスタム投稿タイプの記事やアーカイブ(カスタム投稿タイプの記事一覧)は、WordPressのデフォルトにあるテンプレート「single.php」や「index.php」でも出力することはできますが、カスタム投稿タイプの専用テンプレートで出力することもできます。

WordPressのデフォルトより、カスタム投稿タイプのテンプレートの方が簡単かも…。

カスタム投稿タイプのテンプレートは、下記の名前でテーマの中に追加すれば、自動的に反映されます。

ファイル名

投稿(記事) → single-投稿タイプ名.php

アーカイブ(記事一覧) → archive-投稿タイプ名.php

投稿ページ(記事)を作成

まずは、「single-blog.php」という投稿ページを作成します。

<?php if (have_posts()): while (have_posts()): the_post(); ?>
  <div class="kizi-date">
    <!-- 日付 -->
    <time><?php the_time("Y.m.d");?></time>
  </div>
  <div class="kizi-title">
    <!-- タイトル -->
    <h1><?php the_title(); ?></h1>
  </div>
  <div class="kizi-catch">
    <?php if (has_post_thumbnail()) : ?>
      <!-- アイキャッチ画像があるとき -->
      <?php the_post_thumbnail(array(960, 460)); ?>
    <?php else : ?>
      <!-- アイキャッチ画像がないとき -->
      <img src="<?php echo get_template_directory_uri(); ?>/画像のパス" alt="デフォルト画像" />
    <?php endif; ?>
  </div>
  <div class="kizi-text">
    <!-- 本文 -->
    <?php the_content() ?>
  </div>
<?php endwhile; endif; ?>

“kizi-text”の本文に使うh2やh3などのタイトルタグのデザインは、普通に入れ子と同じなので、cssに.kizi-text h2や.kizi-text h3と記述してあげてお好みのデザインに変更して下さい。

用途やデザインの好みに合わせて、自由にカスタマイズしてみて下さいね!

公開ボタンを押してみて、表示されていたら大丈夫です。

※もし404エラーなどが出る場合は、先ほど説明したように「パーマリンク設定を空更新」してみて下さい。

カスタム投稿ページ

アーカイブ(記事一覧)を作成

次に、「archive-blog.php」というアーカイブ(記事一覧)を作成します。

こちらも、用途やデザインの好みに合わせて、自由にカスタマイズしてみて下さい!

<ul class="blog-list">
  <!-- ループ処理 -->
  <?php
  $paged = get_query_var('paged');
  query_posts($query_string . '&posts_per_page=10&paged=' . $paged); // 一覧に表示する件数
  if (have_posts()):
  while (have_posts()): the_post();
  ?>
    <li>
      <a href="<?php the_permalink(); ?>">
        <!-- 日付 -->
        <time class="blogTime"><?php the_time("Y.m.d");?></time>
        <!-- タイトル -->
        <h3><?php the_title(); ?></h3>
        <!-- 最新の投稿に「NEW!」をつける -->
        <?php
        $last_post_ids = array();
        $lastposts = get_posts('post_type=blog&posts_per_page=5'); //「NEW!」をつける件数
        foreach ($lastposts as $lastpost) {
          $last_post_ids[] = $lastpost->ID;
        }
        ?>
        <?php
        $days = 5; //「NEW!」を表示する日数
        $today = date_i18n('U');
        $entry = get_the_time('U');
        $kiji = date('U', ($today - $entry)) / 86400 ;
        if ($days > $kiji) {
          ?>
          <?php if (in_array($post->ID, $last_post_ids)) : ?><span class="blog-new">NEW!</span>
          <?php endif; ?>
          <?php
        }
        ?>
      </a>
    </li>
  <?php endwhile; endif; ?>
  <!-- ループ終了 -->
</ul>

アーカイブ一覧ページが表示されていたらOK!

※もし404エラーなどが出る場合は、先ほど説明したように「パーマリンク設定を空更新」してみて下さい。

カスタム投稿のアーカイブ一覧ページ

カスタムタクソノミー用のテンプレートを作成

ここまでくれば、あとは簡単です。

まず、先程作った「archive-blog.php」をコピーして複製し、「taxonomy-blog_category.php」というファイル名に変更します。

ここでは、最初のカスタムタクソノミーを追加したときのタクソノミースラッグを使い、「taxonomy-タクソノミースラッグ.php」にしておいてくださいね。

これで、タクソノミー別の記事一覧が表示されるようになります!

まとめ

うまくいきましたか?

プラグインなしでカスタム投稿タイプとカスタムタクソノミーを追加する方法を紹介しましたが、この方法だけではなく、他にも様々な作り方やタクソノミーやタームを出力する方法も多くあります。

カスタム投稿タイプについて、少しでも理解が深まれば、どんどんカスタマイズの幅が広がっていくので、頑張りましょう!

他にもこんな記事があります!