オリジナルテーマ WordPress

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

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

前回までに以下の事をやってきました。

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

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

カスタム投稿とは?

通常WordPressにある投稿は以下のように1つだけです。

 

そしてこの【投稿】とは別に投稿機能を追加する事が出来ます。

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

「別にカテゴリーで分ければいいじゃん」と思うかも知れませんが、例えば・・・

  • ブログ
  • お客様の声
  • ニュース

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

なので「通常の投稿1つとカスタム投稿2つ」といった感じになります(今まで通常の投稿1つとカスタム投稿4つやった事あります)

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

 

こうする事で用途別に投稿を分ける事が出来るので分かりやすいですね。

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

 

プラグイン「Custom Post Type UI」をインストール

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

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

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

 

投稿タイプの追加

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

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

 

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

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

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

 

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

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

 

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

 

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

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

まずは記事一覧ページから作ります(順番はどちらも構いません)

記事一覧ページ

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

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

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

archive-news.php

となります。

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

 

個別記事ページ

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

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

single-news.php

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

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

 

タクソノミーの追加

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

通常の投稿では編集画面右側に以下のようにカテゴリーやタグの項目があります(Uncategorizedは最初からあります)

 

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

 

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

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

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

 

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

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

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

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

 

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

 

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

 

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

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

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

 

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

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

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

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

 

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

 

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

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

 

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

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

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

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

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

taxonomy-area.php

となります。

これはカテゴリー一覧となり、一覧ページの扱いとなるので、基本的には中身はcategory.phpをベースにしたものになります。

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

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

 

ループの書き方

カスタム投稿の記事一覧ページやカテゴリー一覧ページでのループの書き方ですが、基本的な書き方はWordPressオリジナルテーマの作り方⑥(記事一覧ページ編)に書いてるのと同じですが、1つ違うのはカテゴリーの出力方法です。

通常の投稿でのカテゴリーはこちら。

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>

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

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

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

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

以上になります。

-オリジナルテーマ, WordPress
-