目次

  1. カスタム投稿タイプとは？
  2. 今回作成するもの
    1. Page1. 運営しているサイトのリンクをサイドバーに表示する
    2. Page2. 運営しているサイトの説明を一覧表示する
    3. 必要な投稿機能のみ追加する
    4. カテゴリとタグについて
  3. テーマをカスタマイズする
    1. functions.phpを編集してカスタム投稿タイプを作成する
    2. functions.phpを編集してカテゴリとタグを作成する
    3. ダッシュボードからカスタム投稿記事をアップする
    4. websiteslist.phpを作成する
    5. sidebar.phpにインクルードタグを挿入する
  4. 動作を確認する

 

今回はカスタム投稿タイプを作成する方法について紹介します。

 

 

1. カスタム投稿タイプとは？

カスタム投稿タイプとは、独自に定義できる「投稿」のことです。

これまでの記事は、「投稿（Posts）」と「固定ページ（Pages）」の２種類のみでした。
これらの他に、自分が好きにカスタマイズした独自の投稿タイプ＝カスタム投稿タイプを追加することができます。

下図のように、通常の「投稿」とは別に、新たな投稿タイプを好きに定義＆使えるようにできます。

カスタム投稿タイプ_ダッシュボード_投稿一覧

 

2. 今回作成するもの

ここでの題材として、「自分が運営しているWebサイト情報」を載せるためのカスタム投稿タイプ『サイト』を作成します。これを使って、次のようなページを表示できるようにカスタマイズしていきます。

 

Page1. 運営しているサイトのリンクをサイドバーに表示する

運営しているサイトへのリンクを、サイドバーのパーツとして表示させます。

カスタム投稿タイプ_トップページ

 

Page2. 運営しているサイトの説明を一覧表示する

サイドバーの「運営サイト」に貼ったリンクを辿ると、運営しているサイト一覧と説明が表示されるようにします。

custom-posts-type-archive

 

必要な投稿機能のみ追加する

カスタム投稿では、「タイトル」「本文」「リビジョン管理」「Author」「アイキャッチ画像」・・・などの機能のうち、好きな項目だけを有効にすることができます。

ここでは、上で紹介したページ（Page1, Page2）を作成するために、下記４つの機能をONにします。

WPの投稿機能 運営中のサイト情報
タイトル サイトの名前
本文 サイトの説明
カスタムフィールド サイトのURL
著者 サイト情報の投稿者
（ページには表示させないが、管理上使うとする）

 

カテゴリとタグについて

カスタム投稿タイプでは、

  1. 通常の「投稿」と同じカテゴリ＆タグを共用する
  2. 通常の「投稿」とは異なるカテゴリ＆タグを作成＆利用する

のどちらも選ぶことができます。

１の方法は以前の記事（カスタム投稿にカテゴリやタグを追加する）で書きました。今回は２の方法、カスタム投稿タイプ『サイト』専用のカテゴリ＆タグを作成していきます。

custom-posts-type-dashboard-category

 

3. テーマをカスタマイズする

ここでは、３つのファイル＆ダッシュボードを編集します。

functions.php カスタム投稿記事と、その専用のカテゴリ＆タグを設定する。
ダッシュボード カスタム投稿記事をアップする。
websiteslist.php サイドバーに表示するリストを作成する（独自の専用パーツ）。
sidebar.php ↑のインクルードタグを挿入する。

 

functions.phpを編集してカスタム投稿タイプを作成する

まずは、下記コードをfunctions.phpに追記して、カスタム投稿を定義します。

functions.php（追記する）
// カスタム投稿タイプを作成する
add_action('init', 'add_websites_post_type');
function add_websites_post_type() {
    $params = array(
            'labels' => array(
                    'name' => 'サイト',
                    'singular_name' => 'サイト',
                    'add_new' => '新規追加',
                    'add_new_item' => 'サイトを新規追加',
                    'edit_item' => 'サイトを編集する',
                    'new_item' => '新規サイト',
                    'all_items' => 'サイト一覧',
                    'view_item' => 'サイトの説明を見る',
                    'search_items' => '検索する',
                    'not_found' => 'サイトが見つかりませんでした。',
                    'not_found_in_trash' => 'ゴミ箱内にサイトが見つかりませんでした。'
            ),
            'public' => true,
            'has_archive' => true,
            'supports' => array(
                    'title',
                    'editor',
                    'author',
                    'custom-fields',
            ),
            'taxonomies' => array('websites_category','websites_tag')
    );
    register_post_type('websites', $params);
}
カスタム投稿タイプを追加する関数を、init処理で実行する

１行目のadd_adtion()関数は、特定のアクションにフックするための関数です。平たく言えば、「指定したタイミングで、指定した関数を実行してね」と、予約するための関数です。ここでは、

  • 実行するタイミング：init
  • ↑のタイミングで実行する関数：add_websites_post_type

という風にしたいので、

add_action('init', 'add_websites_post_type');

と記述しておきます。
※補足：add_websites_post_type内で実行するregister_post_type()関数は、init処理で実行することになっています。詳細はCodex(register_post_type)を参照

 

register_post_type()関数でカスタム投稿タイプを追加する

次は、add_websites_post_type()の中身について紹介します。コードは長いですが、実行する関数はregister_post_type()の１つだけです。これはカスタム投稿タイプを追加するためのWordPress関数です。

register_post_type('websites', $params);
カスタム投稿タイプの名前を決める

第一引数は、カスタム投稿タイプの名前で、20文字以内で小文字半角英数で付けます。他のカスタム投稿タイプ名、デフォルトで使用されている投稿タイプ名（post, page, attachment, revision, nav_menu_item）と名前が衝突しないようにします。

補足１：安全に名前をつけたいなら、名前の最初にオリジナルのPrefix（接頭辞）を付けると良いです。
名前の付け方の参考 >> Codex: 投稿タイプ>カスタム投稿タイプ>良い名前の付け方

補足２：基本的に、この名前はサイト運用中に変更することが出来ません。よく考えて付けたほうが良いです。

 

カスタム投稿タイプの挙動を定義する

第二引数は、カスタム投稿タイプの動作に関わる各種オプション値を、連想配列の形で渡します。オプションの詳細はCodex（register_post_type）に掲載されています。ここでは、この記事でカスタマイズした項目だけ紹介します。

labels この投稿タイプについて、ダッシュボードで表示される名前。連想配列で指定する。
public 記事を公開＆編集するなら ‘true’ を指定する。
has_archive アーカイブページを作るなら ‘true’ を指定する。
supports 有効にする投稿機能を配列で指定する。今回は、タイトル（title)、本文（editor）、投稿者（author）、カスタムフィールド（custom-fields）の４つを有効にしたいので、array(‘title’,’editor’,’author’,’custom-fields’)を指定します。
taxonomies 有効にするタクソノミー名を配列で指定する。今回は、このカスタム投稿タイプ専用のカテゴリ＆タグの名前を配列で指定します。
※専用カテゴリ＆タグの設定は、次の項目で紹介します

 

functions.phpを編集してカテゴリとタグを作成する

続けて、カスタム投稿タイプ『サイト』専用のカテゴリとタグを追加します。

functions.php（さらに追記）
// カスタム投稿タイプ（websites）用のカテゴリ＆タグを作成する
add_action('init', 'create_websites_taxonomies');
function create_websites_taxonomies() {
    // カテゴリを作成
    $labels = array(
            'name'                => 'Webカテゴリ',        //複数系のときのカテゴリ名
            'singular_name'       => 'Webカテゴリ',        //単数系のときのカテゴリ名
            'search_items'        => 'Webカテゴリを検索',
            'all_items'           => '全てのWebカテゴリ',
            'parent_item'         => '親カテゴリ',
            'parent_item_colon'   => '親カテゴリ:',
            'edit_item'           => 'Webカテゴリを編集',
            'update_item'         => 'Webカテゴリを更新',
            'add_new_item'        => '新規Webカテゴリを追加',
            'new_item_name'       => '新規Webカテゴリ',
            'menu_name'           => 'Webカテゴリ'        //ダッシュボードのサイドバーメニュー名
    );
    $args = array(
            'hierarchical'        => true,
            'labels'              => $labels,
            'rewrite'             => array( 'slug' => 'websites_cat' )
    );
    register_taxonomy( 'websites_category', 'websites', $args );

    // タグを作成
    $labels = array(
            'name'                => 'Webタグ',        //複数系のときのタグ名
            'singular_name'       => 'Webタグ',        //単数系のときのタグ名
            'search_items'        => 'Webタグを検索',
            'all_items'           => '全てのWebタグ',
            'parent_item'         => null,
            'parent_item_colon'   => null,
            'edit_item'           => 'Webタグを編集',
            'update_item'         => 'Webタグを更新',
            'add_new_item'        => '新規Webタグを追加',
            'new_item_name'       => '新規Webタグ',
            'separate_items_with_commas'   => 'Webタグをコンマで区切る',
            'add_or_remove_items'          => 'Webタグを追加or削除する',
            'choose_from_most_used'        => 'よく使われているWebタグから選択',
            'not_found'                    => 'アイテムは見つかりませんでした',
            'menu_name'                    => 'Webタグ'        //ダッシュボードのサイドバーメニュー名
    );
    $args = array(
            'hierarchical'            => false,
            'labels'                  => $labels,
            'update_count_callback'   => '_update_post_term_count',    //タグの動作に必要なCallback設定
            'rewrite'                 => array( 'slug' => 'websites_tag' )
    );

    register_taxonomy( 'websites_tag', 'websites', $args );
}

簡単にコードの説明を書きます。

 

タクソノミーを追加する関数を、init処理で実行する
add_action('init', 'create_websites_taxonomies');

１行目はカスタム投稿タイプを作成した同様で、「init処理中に、関数create_websites_taxonomiesを実行してね」と、予約しておく関数です。

補足：タクソノミーとは？
タクソノミー（taxonomy）は、分類の意味です。WordPressではカテゴリやタグのことです。

 

register_taxonomy()関数でカスタム投稿タイプを追加する

次にcreate_websites_taxonomies関数の中身について紹介します。前半はカテゴリー追加、後半はタグ追加に関するコードです。コードは長いですが、関数内で実行しているWordPress関数は、

register_taxonomy('websites_category', 'websites', $args);
register_taxonomy('websites_tag', 'websites', $args);

の２行だけです。実行すると、カスタム投稿タイプ’websites’にタクソノミーがそれぞれ追加されます。

 

カテゴリとタグの違いは階層的かどうか

カテゴリとタグで似たようなコードを繰り返しているのですが、大きな違いは’hierarchical’というオプションです。カテゴリではtrue、タグではfalseを指定します。つまり、記事の分類情報を階層化したもの＝カテゴリであり、階層化していないもの＝タグということですね。

 

タクソノミーの名前を決める

第一引数にタクソノミーの名前を指定します。32文字以内の小文字英数字で指定します。また、予約語と衝突してもNGです。ここ（registe_taxonomy#Rreserved Terms）に予約語一覧があるので、被らないように注意してください。

補足：この名前はサイト運用中に変更することが出来ません。よく考えて付けた方がいいです。

 

タクソノミーの適用先を指定する

第二引数にタクソノミーを適用する投稿タイプを指定します。デフォルトの投稿タイプ名（’post’など）、あるいはカスタム投稿タイプ名を、文字列または配列で指定します。適用先が１つなら、文字列でOKです。

 

タクソノミーの挙動を定義する

第三引数にタクソノミーの動作を決めるオプション値を、連想配列で指定します。各オプションの詳細はCodex（register_taxonomy）に掲載されているので、ここではコード中で指定した項目だけ紹介します。

labels この投稿タイプについて、ダッシュボードで表示される名前。連想配列で指定する。
hierarchical 階層型の分類ならtrue（カテゴリタイプ）、非階層ならfalse（タグタイプ）を指定する。
rewrite タクソノミーページを表示するときのURLについて、連想配列で指定する。
デフォルトでは$taxonomy（websites_category, websites_tag）だが、これをslugオプションで変更できる。
書き方：’rewrite’ => array(‘slug’=>’websites_cat’)
※この値は、基本的に一度決めたら変更できません。良く考えて付けた方が良いです。
update_count_callback タグタイプのタクソノミーを利用したい場合は、コールバック関数として’_update_post_term_count’を指定する。

以上で、functions.phpのカスタマイズは終わりです。

 

ダッシュボードからカスタム投稿記事をアップする

前項目までのfunctions.phpのカスタマイズを終えて保存してからダッシュボードを開くと、新しい投稿メニューが増えています。早速、サイト＞新規作成メニューから投稿記事を作成します。

カスタム投稿タイプ_ダッシュボード_編集

今回の例では、下記のような情報を入力して記事を作成します。カテゴリ、タグも適当につけてみます。

WPの投稿機能 運営中のサイト情報
タイトル サイトの名前
本文 サイトの説明
カスタムフィールド [url] サイトのURL

 

websiteslist.phpを作成する

カスタム投稿タイプにUpした記事（運営中のサイト情報）に基づいて、サイドバーにリンク一覧を表示するために、自作テンプレートパーツを作成します。

websiteslist.php
<div class="sidebar-wrapper">
    <h4 class="sidebar-title"><a href="<?php echo get_post_type_archive_link('websites') ?>">運営サイト</a></h4>
    <ul>
<?php 
    query_posts( array('post_type' => 'websites' ,'showposts' => -1 ) );
    while(have_posts()) {
        the_post();
        $title = get_the_title();
        $link = get_post_meta($post->ID, "url", true);
        echo '<li><a href="' . $link . '">' . $title . "</a></li>n";
    }
    wp_reset_query();
?>
    </ul>
</div>

動作の流れを、かいつまんで紹介します。

 

サイドバーパーツの見出しを出力する
<h4 class="sidebar-title"><a href="<?php echo get_post_type_archive_link('websites') ?>">運営サイト</a></h4>

ここでは、リンク一覧の見出しのHTMLコードを作成しています。カスタム投稿タイプのアーカイブページは、次のWordPress関数

get_post_type_archive_link('カスタム投稿タイプ名')

で入手できるので、echoで出力します。

 

クエリを作成する
query_posts( array( 'post_type' => 'websites' ,'showposts' => -1 ) );

query_posts()関数は、クエリを作成するためのWordPress関数です。

※補足：クエリとは？
ここでは、データベースから引っ張ってくるWP記事の一覧のようなものです。
クエリ（Query）の直訳は「問い合わせ」で、特定の情報をデータベースに要求すること、およびその内容をクエリと言います。

引数で指定した条件に合致する記事のクエリを作ることができます。ここでは、

  • post_type：投稿タイプ名を指定
  • showposts：表示記事数（-1を指定すると、全ての記事を出力）

の２点を指定することで、「カスタム投稿タイプ”websites”の、全ての記事を表示する」という動作をさせることができます。なおその他のオプション値は、Codex（query_posts）を確認してください。

 

Webサイトのタイトルとリンクを出力する
while(have_posts()) {
        the_post();
        ・・・
}

the_post()関数で、先ほど作成したクエリに基づいて順番に記事を読み込みます。具体的には、変数$postに記事のデータがロードされます。

get_post_meta($post->ID, "url", true);

get_post_meta()は、カスタムフィールドの値を入手するためのWordPress関数です。引数で、記事のID番号、カスタムフィールド名、返り値の形の３つを指定します。第３引数にtrueを指定すると文字列、falseを指定すると配列で出力されます。

echo '<li><a href="' . $link . '">' . $title . "</a></li>n";

リスト形式で、get_post_metaで入手したURLに飛ぶリンクをecho出力します。

 

クエリをリセットする
wp_reset_query();

今回はquery_posts()関数でクエリをいじったので、元のクエリに戻しておきます。

※補足：元のクエリって何のこと？
元のクエリとは、WordPressがURLに基づいて自動的に作成してくれるクエリ（記事リスト）のことです。WordPressで作成したページを表示するときは、WordPressコアが、URLに基づいて適切なクエリを作成してくれます。例えば、トップページを表示する場合は、最新の投稿10件のクエリを作成してくれるし（ダッシュボードの表示設定がデフォルトのままの場合）、カテゴリページにアクセスすれば、そのカテゴリに属する記事のクエリを作成してくれます。

 

sidebar.phpにインクルードタグを挿入する

sidebar.phpにインクルードタグを挿入して、websiteslist.phpを読み込み、Webサイトリンク一覧が表示されるようにします。

sidebar.php
<aside id="sidebar">
    <?php 
     dynamic_sidebar();
     get_template_part('websiteslist'); ?>
</aside>

今回は、サイドバーの一番下に表示したいので、dynamic_sidebar()の後に挿入しました。

 

 

4. 動作を確認する

トップページにアクセスしてみます。サイドバーの一番下に、カスタム投稿”websites”に投稿したサイト情報が表示されました。

custom-posts-type-home

 

該当箇所のコードを確認してみます。

HTML（今回作成したサイドバーパーツ）
 <div class="sidebar-wrapper">
    <h4 class="sidebar-title"><a href="http://localtest.net/websites/">運営サイト</a></h4>
    <ul>
        <li><a href="http://mycalligraphy.net">My Calligraphy</a></li>
        <li><a href="http://hitsuji.me/hapix-player/">MacAppサポートページ</a></li>
        <li><a href="http://wordpress.hitsuji.me">WordPressテーマの作り方</a></li>
    </ul>
</div>

 

 

最後に、今回作成したサイトについて、各アーカイブへのURLをまとめておきます。

カスタム投稿のアーカイブ http://localtest.net/websites/
Webカテゴリのページ http://localtest.net/websites-cat/{category-slug}
Webタグのページ http://localtest.net/websites-tag/{tag-slug}

※青字は、各カテゴリ・タグのslugが入ります

 

関連記事

WordPress Codex

 

「index.phpをカスタマイズする」の記事