WordPressに追加できる特徴的な機能として、カスタム投稿とカスタムタクソノミーという、自分でオリジナルの投稿機能やカテゴリを追加することができる機能があります。
簡単に追加することができるプラグインも用意されていますが、細かい調整がきかなかったり、自分が予想できない不具合を防止したりするためにも、どういう仕組みなのか理解を深めて自作でWordPressテーマに追加してみましょう。
今回は、カスタム投稿とカスタムタクソノミーをWordPressに追加し、独自のアーカイブページ(記事一覧)や投稿ページ(個別の記事)を作成して実際に運用できるようにするまでを、すべてまとめてご紹介します。
カスタム投稿を追加する
まずは、カスタム投稿を作成するための設定を追加しましょう。その前に、カスタム投稿について少しだけ説明します。
カスタム投稿とは・・・？
カスタム投稿とは、WordPressの『投稿』や『固定ページ』のような機能を新たに追加することができる機能です。
自分だけの好きな名前で、追加したい項目を選んで作成することができます。
便利な機能ではあるのですが、カスタム投稿をあまり増やしすぎると、逆に管理が大変です。カテゴリ分けで管理するのが良いのか、カスタム投稿を作成して別に管理するのかをよく考えて、管理しやすいように追加しましょう。
functions.phpにカスタム投稿の設定を追加する
カスタム投稿をWordPressに追加する際は、functions.phpに記述します。今回は、『お知らせ』というカスタム投稿を作成してみましょう。
functions.phpに追加functions.phpを編集する際は、必ずバックアップをとって慎重に編集してください。
function add_custom_post() {
register_post_type(
'infopage',
array(
'label' => 'お知らせ',
'public' => true,
'has_archive' => true,
'menu_position' => 5,
'supports' => array(
'title',
'editor',
'thumbnail',
'revisions',
'excerpt',
'custom-fields',
)
)
);
}
add_action('init', 'add_custom_post');上記のソースコードを追加することで、カスタム投稿が追加されます。上記のタグの各要素の意味は、下記の通りです。
register_post_type(の直後の『'infopage'』『infopage』の部分で、カスタム投稿のシステム上の値を決定します。ここで指定した値は、タクソノミーへの紐付けやサブループでの出力・条件分岐などを行う際に使用します。また、アーカイブ(記事一覧)を出力する場合などのURLにも出力されます。
※URLの値は、別の値に指定することも可能ですが、判別し辛くなってしまうため、今回は省きます。
カスタム投稿の表示名を指定します。ここで指定した値が、管理画面上にも表示されます。
has_archiveアーカイブページ(記事一覧)ページを作成するかどうかを指定します。『true』で作成、『false』を指定すると、一覧ページは作成されません。
menu_position管理画面上のどこに表示するかを指定できます。番号による位置の変更は、下記の通りです。
- 5 → 投稿の下
- 10 → メディアの下
- 15 → リンクの下
- 20 → 固定ページの下
- 25 → コメントの下
- 60 → 外観の下
- 65 → プラグインの下
- 70 → ユーザーの下
- 75 → ツールの下
- 80 → 設定の下
- 100 → 最下部に独立させる
固定ページのように、記事に親子関係を持たせるかどうかを指定することができます。『true』で親子関係を持たせる『false』で持たせないとなります。
supports『supports』の中では、カスタム投稿の編集画面で使用できるようにする機能を指定できます。各パラメータと使用できるようになる機能は、下記の通りです。
- タイトル → title
- エディタ → editor
- サムネイル → thumbnail
- リビジョン → revisions
- 抜粋 → excerpt
- カスタムフィールド → custom-fields
- コメント → comments
- 投稿のフォーマット → post-formats
- ページ属性 → page-attributes
- トラックバック → trackbacks
- 作成者 → author
今回追加したコードでは、タイトル・エディタ・サムネイル・リビジョン・抜粋・カスタムフィールドを有効化しています。他のパラメータを追加する場合は、「,(カンマ)」で区切って配列の中に追加してください。
functions.phpにコードを追加すると、管理画面上にカスタム投稿が追加されます。しかし、ここで必ず忘れてはいけないことがあります！！
カスタム投稿を設定した後に、必ずパーマリンク設定を空更新してください！
パーマリンクの設定を更新しないと、カスタム投稿に記事を作成しても表示されないので、忘れずにから更新を実行しましょう。
パーマリンクの空更新は、『管理画面>設定>パーマリンクの設定』を開き、何も変更せずに『変更を保存』ボタンを押すだけです。
以上で、カスタム投稿の設定は終了です。
カスタム投稿を複数追加する
カスタム投稿を複数追加する場合は、『function add_custom_post() {～}』の中に、『register_post_type();』を複数追加してください。
functions.phpに追加function add_custom_post() {
register_post_type(
'infopage',
array(
'label' => 'お知らせ',
'public' => true,
'has_archive' => true,
'menu_position' => 5,
'supports' => array(
'title',
'editor',
'thumbnail',
'revisions',
'excerpt',
'custom-fields',
)
)
);
register_post_type(
'custom',
array(
'label' => 'カスタム',
'public' => true,
'has_archive' => true,
'menu_position' => 5,
'supports' => array(
'title',
'editor',
'thumbnail',
'revisions',
'excerpt',
'custom-fields',
)
)
);
}
add_action('init', 'add_custom_post');
上記のように記述することで、一つの関数の中で『お知らせ』と『カスタム』という2つのカスタム投稿を定義することができます。
カスタムタクソノミーを追加
カスタム投稿の追加が完了したら、カスタムタクソノミーも追加しましょう。
タクソノミーを設置する前に、タクソノミーとは何かを簡単に説明します。
タクソノミーとターム
タクソノミーとは、『カテゴリ』や『タグ』のような要素の括りのことです。なので、厳密に言えば、『カテゴリ』や『タグ』もタクソノミーになります。
タームとは、『カテゴリ』や『タグ』の中にある各要素のことを指します。本サイトで言えば、『WPテーマ作成』や『WPカスタマイズ』がこれにあたります。
タクソノミーとタームはごちゃごちゃになり混乱しやすいので、上記の構造をしっかりと覚えておいてくださいね。
functions.phpにカスタムタクソノミーの設定を追加する
カスタムタクソノミーは、カテゴリのように階層を持たせる場合と、タグのように階層を持たせない2つの形式があります。今回は、『お知らせカテゴリ』(階層あり)と『お知らせのタグ』(階層なし)という2つのカスタムタクソノミーを追加します。
functions.phpに追加functions.phpを編集する際は、必ずバックアップをとって慎重に編集してください。
function add_taxonomy() {
//お知らせカテゴリ
register_taxonomy(
'info-cat',
'infopage',
array(
'label' => 'お知らせカテゴリ',
'singular_label' => 'お知らせカテゴリ',
'labels' => array(
'all_items' => 'お知らせカテゴリ一覧',
'add_new_item' => 'お知らせカテゴリを追加'
),
'public' => true,
'show_ui' => true,
'show_in_nav_menus' => true,
'hierarchical' => true
)
);
//お知らせタグ
register_taxonomy(
'info-tag',
'infopage',
array(
'label' => 'お知らせのタグ',
'singular_label' => 'お知らせのタグ',
'labels' => array(
'add_new_item' => 'お知らせのタグを追加'
),
'public' => true,
'show_ui' => true,
'show_in_nav_menus' => true,
'hierarchical' => false
)
);
}
add_action( 'init', 'add_taxonomy' );上記のソースコードを追加することで、カスタムタクソノミーが追加されます。上記のタグの各要素の意味は下記の通りです。
register_post_type(の直後の『'info-cat'』や『'info-tag'』（4行目や22行目）上記のコードの『'info-cat'』や『'info-tag'』の部分は、カスタムタクソノミーのシステム上の値を決定します。タクソノミーの中のタームを呼び出す際は、ここの値を使用します。また、タクソノミーアーカイブ(一覧)のURLにも出力されます。
上記の『'info-cat'』や『'info-tag'』の直後にある『'infopage'』（5行目や23行目）『register_post_type(』から2番目のパラメータで、カスタムタクソノミーをどの投稿タイプに追加するかを指定できます。今回は、上記で作成したお知らせページに追加するために、パラメータ『'infopage'』(カスタム投稿を作成する際に設定した値)を指定しています。
投稿を指定する場合は、『'post'』、固定ページを指定する場合は『'page'』を挿入してください。
labelとsingular_labelタクソノミーの表示名(日本語)を指定できます。管理画面上にはこちらで指定した名前が出力されます。
なお、labelとsingular_labelは、単数形と複数形を分けて設定ために分かれているのですが、日本語で使用する場合は特に気にする必要はないので、同じ値を指定してください。
all_items投稿編集画面内のメタボックスの見出しを指定することができます。省略すると、『カテゴリ一覧』といったようにデフォルトの値が出力されます。タグの場合は、特に設定は不要です。
add_new_itemタクソノミー管理画面の見出しとボタンの名前を指定することができます。省略した場合は、『新規カテゴリを追加』・『新規タグを追加』といったデフォルトの値が出力されます。
show_ui
管理画面上に編集画面を表示するかどうかを指定できます。管理画面上に出力する場合は、『true』にしてください。
show_in_nav_menus『管理画面>外観>メニュー>』のメニュー選択画面で使用するかどうかを指定することができます。ナビゲーションメニューでカスタムタクソノミーを指定したい場合は、『true』を値にしてください。
hierarchical [重要!!]カスタムタクソノミーに階層を持たせるかどうかを指定することができます。このパラメータでカテゴリ形式にするかタグ形式にするかがきまります。
階層を持たせる場合『true』を指定すると、カテゴリのような階層を持った形式となり、『false』を指定すると、階層を持たないタグ形式になります。
上記を踏まえてfunctions.phpにコードを追加すると、管理画面上にカスタムタクソノミーが追加されます。
以上で、カスタムタクソノミーの設定は完了です。functions.phpへの記述が完了したら、続いてカスタム投稿+カスタムタクソノミーを出力するためのテンプレートを追加しましょう。
カスタム投稿に、デフォルトのカテゴリとタグを追加する
カスタム投稿でカスタムタクソノミーを使用せずに、デフォルトのカテゴリやタグを追加したい場合もあるかと思います。
そういう場合は下記のソースコードを追加することで、デフォルトで設定されているカテゴリとタグを追加することができます。
function add_custom_post() {
register_post_type(
'infopage',
array(
'label' => 'お知らせ',
'public' => true,
'has_archive' => true,
'menu_position' => 5,
'supports' => array(
'title',
'editor',
'thumbnail',
'revisions',
'excerpt',
'custom-fields',
)
)
);
//カテゴリを投稿と共通設定にする
register_taxonomy_for_object_type('category', 'infopage');
//タグを投稿と共通設定にする
register_taxonomy_for_object_type('post_tag', 'infopage');
}
add_action('init', 'add_custom_post');上記のように、『register_taxonomy_for_object_type('categoryまたはpost_tag', '投稿タイプ名');』(カテゴリ → 20行目 タグ → 22行目)をカスタム投稿を追加する関数の中に追加することで設定できます。
カスタム投稿用のテンプレートを作成する
カスタム投稿の記事やアーカイブページは、デフォルトで設定されているテンプレート『single.php(投稿)』や『index.php(一覧)』でも出力することができますが、それぞれ専用のテンプレートで出力することもできます。
専用のテンプレートは、下記のような名前でテーマの中に追加することで自動に反映されます。
投稿(記事ページ) → single-投稿タイプ名.php
アーカイブ(一覧ページ) → archive-投稿タイプ名.php
また、カスタム投稿におけるテンプレートの優先順位は下記の通りです。
アーカイブ(一覧ページ)
single-投稿タイプ名.php → single.php
投稿(記事ページ)
archive-投稿タイプ名.php → archive.php → index.php
カスタムタクソノミーを含むカスタム投稿用の投稿(記事ページ)を作成する
カスタム投稿ページを作成する場合は、カスタムタクソノミーを含んだ場合が多いと思いますので、通常の『single.php』をベースに、カテゴリ・タグの部分をカスタムタクソノミーに変更する方法で作成していきましょう。
まずは、『single-投稿タイプ名.php』というphpファイルを作成し、single.phpの中身をそのままコピーしてください。デモでは、上記のカスタム投稿に合わせて『single-infopage.php』という名前で作成していきます。
single.phpをベースに、パンくずリスト・カテゴリ・タグの部分を変更していきましょう。
パンくずリスト
single-infopage.phpのパンくずリストと入れ替え<div id="breadcrumb" class="bread">
<ol>
<li>
<a href="<?php echo home_url(); ?>">
<i class="fa fa-home"></i><span>TOP</span>
</a>
</li>
<li>
<a href="<?php echo get_post_type_archive_link($post_type); ?>">
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?>
</a>
</li>
<?php
//カスタム投稿に親子関係を持たせるときのみ記述
foreach (array_reverse(get_post_ancestors($post->ID)) as $parentid) {
echo '<li><a href="',get_the_permalink($parentid),'">'.get_the_title($parentid).'</a></li>';
}
?>
<li>
<a>
<?php the_title(); ?>
</a>
</li>
</ol>
</div>上記のソースコードを追加すると、『TOP > カスタム投稿のアーカイブページ(記事一覧) > カスタム投稿の親ページ(設定している場合) > 現在のページ』という並びのカスタム投稿ページの階層を持ったパンくずリストが追加されます。
パンくずリストの各要素は、次のソースコードで取得しています。
カスタム投稿のアーカイブページ<a href="<?php echo get_post_type_archive_link($post_type); ?>">
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?>
</a>『<?php echo get_post_type_archive_link($post_type); ?>』でアーカイブページへのURLを取得し、『<?php echo esc_html(get_post_type_object(get_post_type())->label); ?>』で、アーカイブページのタイトルを取得しています。今回のように専用テンプレートを作成する場合、アーカイブページのタイトルに関しては、phpで取得せず『お知らせページ』のように直接記述しても問題ありません。
パンくずリストに関しては、『WordPressの記事やアーカイブページにパンくずリストをプラグインなしで追加する』で詳しく紹介しています。CSSの記述方法がわからない場合などは、ぜひ参考にしてください。
カスタムタクソノミー
リンク付きのタームのリストを呼び出す方法はいくつかありますが、今回は『info-cat』と『info-tag』の2種類のカスタムタクソノミーを設定しているので、それぞれ別の方法で呼び出してみます。
get_the_term_listでカテゴリ形式のタクソノミーを出力する
single-infopage.phpのカテゴリ出力部分と入れ替え<?php
if(has_term('','info-cat',$post->ID)) {
echo get_the_term_list($post->ID,'info-cat','<span class="cat-data">','</span><span class="cat-data">','</span>');
}
?>上記のソースコードの中の『'info-cat'』の部分は、自分が設定したタクソノミー名に変更してください。
記事にタームが設定してない場合は出力しないように、条件分岐『has_term('','タクソノミー名',$post->ID)』で、タームが設定してあるかどうかを判別しておきましょう。
記事に設定してあるタームの一覧は、『get_the_term_list(投稿ID,タクソノミー名,前に入れる文字,タームを区切る文字,後に入れる文字)』で出力します。
上記のphpが出力されると下記のようにhtmlが出力されます。
<span class="cat-data"><a href="ターム一覧へのURL" rel="tag">タームの名前</a></span><複数ある場合は繰り返し>the_termsでタグ形式のタクソノミーを出力する
single-infopage.phpのタグ出力部分と入れ替え<?php
if(has_term('','info-tag',$post->ID)) {
the_terms($post->ID, 'info-tag','<div class="kiji-tag"><ul><li>タグ： </li><li>','</li><li>','</li></ul></div>'
);
}
?>上記のソースコードの中の『'info-tag'』の部分は、自分が設定したタクソノミー名に変更してください。
記事に設定してあるタームの一覧は、『get_the_term_list(投稿ID,タクソノミー名,前に入れる文字,タームを区切る文字,後に入れる文字)』で出力しています。
上記のphpが出力されると下記のようにhtmlが出力されます。
<div class="kiji-tag">
<ul>
<li>タグ： </li>
<li><a href="ターム一覧へのURL" rel="tag">タグの名前</a></li>
<li><a href="ターム一覧へのURL" rel="tag">タグの名前</a></li>
<li><a href="ターム一覧へのURL" rel="tag">タグの名前</a></li>
</ul>
</div>
タームの一覧を出力する場合は、上記の『get_the_term_list』と『the_terms』のどちらで出力しても問題ありませんが、上記のソースを流用する場合は、パラメータの中のタクソノミー名を変更するのを忘れないようにしてください。
上記の要素を変更すると、下記の画像のように『パンくずリスト』・『カテゴリ』・『タグ』の部分が、通常の記事からカスタム投稿・タクソノミー用に変更されて出力されるようになります。
今回は、記事を構成する各要素についての説明は省略していますが、『6.WordPressブログの要!!記事を表示するsingle.phpとpage.phpを作成』で詳しく紹介しています。
また、上記のソースコードを適応した『single-infopage.php』のサンプルファイルは、この記事の一番下でダウンロードできます。必要な方は、参考にしてください。
カスタムタクソノミーを含んだカスタム投稿用のアーカイブ(一覧ページ)を作成する
投稿(記事)ページを作成したら、続いて専用のアーカイブ(記事一覧)ページも作成してみましょう。まずは、『archive.php』(ない場合は『index.php』)をコピーして『archive-カスタム投稿名.php』という名前のファイルを作成しましょう。
デモでは『archive-infopage.php』というファイル名で作成します。作成したら、各要素をカスタム投稿用に入れ替えていきましょう。
パンくずリスト
archive-infopage.phpのぱんくずリストと入れ替え<div id="breadcrumb" class="bread">
<ol>
<li>
<a href="<?php echo home_url(); ?>">
<i class="fa fa-home"></i><span>TOP</span>
</a>
</li>
<li>
<a><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a>
</li>
</ol>
</div>上記のソースコードを追加すると、『TOP > 現在のカスタム投稿名』という並びのパンクズリストが追加されます。
現在のカスタム投稿名は、『<?php echo esc_html(get_post_type_object(get_post_type())->label); ?>』で取得しましょう。
パンくずリストに関しては、『WordPressの記事やアーカイブページにパンくずリストをプラグインなしで追加する』で詳しく紹介しています。CSSの記述方法がわからない場合などは、ぜひ参考にしてください。
タイトル
カスタム投稿の一覧ページのタイトルも、カスタム投稿名が表示されるように変更しましょう。今回は、カスタム投稿のページのタイトルにh1タグがついている場合を例としています。htmlタグは、ご使用のテーマに合わせて変更してください。
archive-infopage.phpのタイトルと入れ替え<h1><?php echo esc_html(get_post_type_object(get_post_type())->label); ?>の記事一覧</h1>上記のコードでカスタム投稿の『label』を取得します。上記のphpが出力されると下記のようにhtmlが出力されます。
<h1>お知らせの記事一覧</h1>『お知らせ』の部分にカスタム投稿で設定した『label』が挿入されます。
カスタムタクソノミー
ループ(記事一覧)の中にカスタムタクソノミーを出力する場合は、リンクがついていないタームを一つだけ取得するようにしましょう。
archive-infopage.phpのループの中のカテゴリもしくはタグ部分と入れ替え<?php if( has_term('','info-cat',$post->ID) ): ?>
<span class="cat-data">
<?php $post_term = get_the_terms($post->ID,'info-cat'); echo $post_term[0]->name; ?>
</span>
<?php endif; ?>上記のコードでは『has_term('','info-cat',$post->ID)』で、タクソノミー『info-cat』に属するタームが記事に設定されているかどうかを判別し、『<?php $post_term = get_the_terms($post->ID,'info-cat'); echo $post_term[0]->name; ?>』でターム名だけを出力しています。
上記の要素を変更すると、下記の画像のように『パンくずリスト』・『タイトル』・『カテゴリ』の部分が、変更されて出力されます。
今回は、アーカイブページを構成する各要素についての説明は省略していますが、『5.WordPressのループを使い記事一覧を表示するindex.phpを作成する』で詳しく紹介しています。
また、上記のソースコードを適応した『single-infopage.php』のサンプルファイルは、この記事の一番下でダウンロードできます。必要な方は、参考にしてください。
カスタムタクソノミー用のテンプレートを作成する
カスタム投稿用のテンプレートの作成が完了したら、続いてタクソノミーのアーカイブ(記事一覧)用のページを作成します。
タクソノミーアーカイブで、テンプレートが反映される優先順位は下記の通りです。
taxonomy-カスタムタクソノミー名-ターム名.php → taxonomy-カスタムタクソノミー名.php → taxonomy.php → archive.php → index.php
今回は、カスタムタクソノミー(ターム)全てに反映されるtaxonomy.phpを作成していきます。
taxonomy.phpを作成する
まずは、『archive.php』(ない場合は『index.php』もしくは先程作成した『archive-カスタム投稿名.php』)をコピーして『taxonomy.php』という名前のファイルを作成してください。
『taxonomy.php』が完成したら、下記の各要素をタクソノミーアーカイブ用に入れ替えていきます。
パンくずリスト
taxonomy.phpのぱんくずリストと入れ替え<ol>
<li>
<a href="<?php echo home_url(); ?>">
<i class="fa fa-home"></i><span>TOP</span>
</a>
</li>
<?php
$term_id = get_queried_object_id();
$term_data = get_term($term_id);
$tax = $term_data->taxonomy;
$ancestors = get_ancestors($term_id, $tax);
$ancestors = array_reverse($ancestors);
foreach( $ancestors as $ancestor ) {
$term = get_term( $ancestor, $tax );
echo '<li><a href="'.get_term_link( $ancestor, $tax ).'">'. $term->name.'</a></li>';
}
?>
<li>
<a><?php single_term_title() ?>の記事一覧</a>
</li>
</ol>上記のコードに変更すると、『TOP > タームの親ページ > 現在のタームのページ』という並びでパンくずリストが出力されます。
パンくずリストで出力される、現在のタームの親タームは、下記のように出力しています。
<?php
$term_id = get_queried_object_id();//現在のタームIDを取得
$term_data = get_term($term_id);//タームIDからタームに紐づくデータを取得
$tax = $term_data->taxonomy;//タームが所属するタクソノミーを変数に格納
$ancestors = get_ancestors($term_id, $tax);//すべての親要素のIDを配列で取得
$ancestors = array_reverse($ancestors);// 子親の順番で表示されるので、親子の順番に変更
foreach( $ancestors as $ancestor ) {// 配列から個々の値を取り出す
$term = get_term( $ancestor, $tax );
echo '<li><a href="'.get_term_link( $ancestor, $tax ).'">'. $term->name.'</a></li>';
}
?>※今回は紹介していませんが、タクソノミーのスラッグ(URL)を別途で設定している場合は、パンくずリストが上手く出力されない場合があるので、注意してください。
タイトル
タクソノミー一覧ページのタイトルに、タクソノミー名+記事一覧が出力されるように調整しましょう。今回は、タクソノミー一覧ページのタイトルにh1タグがついている場合を例としています。htmlタグは、ご使用のテーマに合わせて変更してください。
taxonomy.phpのタイトルと入れ替えまたは追加<h1><?php single_term_title(); ?>の記事一覧</h1>上記のパンくずリストとタイトルの変更が完了したら、ループの中を確認し、カテゴリやタグを出力するコードがある場合は、必要が無いので削除してください。
上記の要素を変更すると、下記の画像のように『パンくずリスト』・『タイトル』の部分が変更・『カテゴリ』が削除されて出力されます。
以上で、カスタム投稿とカスタムタクソノミーの設置は終了です。タクソノミーやタームを出力する方法には様々な種類がありますが、今回は一例を紹介いたしました。
必要な場合は、カスタム投稿やカスタムタクソノミーを自分のテーマに設置して、より良いテーマにカスタマイズしてみてくださいね！
今回追加した、『archive.php』『single-infopage.php』『taxonomy.php』のサンプルを下記よりダウンロードできるようにしています。必要な方は、ダウンロードして参考にしてください！