work.log

元エンジニアの備忘録的ブログ

TwentyTwelveでカスタム投稿タイプ用のテンプレートを準備する

投稿:2013-12-03 17:20  更新:

WordPress のテーマ TwentyTwelve で「カスタム投稿タイプ」を利用するメモです。

前回、メイン記事とは独立させた記事を書く為に TwentyTwelve に「カスタム投稿タイプ」をつけてみました。

主要部分はあれでほぼ完成なのですが、「カスタムタクソノミー」で作成した独立したカテゴリとタグが現状のテンプレートでは表示できていないので今回はこれ用にカスタマイズしてみます。

関連記事
TwentyTwelveにカスタム投稿タイプを付けて記事を分けてみる

TwentyTwelve のテンプレートをコピーしてカスタマイズ

カスタム投稿タイプを表示するテンプレートは、基本的にファイル名の命名規則に従って自動選定され、更にテンプレートの命名規則にはいくつか優先度というものがあるようです。

例えば「カスタムタクソノミー」のアーカイブ用テンプレートは以下のような優先度で自動選択されるようです。

例): カスタムタクソノミー名 = custom_category

taxonomy-{custom_category}-{slug}.php → taxonomy-{custom_category}.php → taxonomy.php → archive.php → index.php

※ slug = 作成したカスタムタクソノミーのスラッグ名を指定。

ややこしくて自分もあまり良く理解していないのですが、とりあえずは以下のテンプレートを作ればそれっぽくはなります。

  • index.php -> archive-custom.php
  • content.php -> content-custom.php
  • single.php -> single-custom.php
  • category.php -> taxonomy-custom_category.php
  • tag.php -> taxonomy-custom_tag.php

命名規則は「<テンプレート名}>–<カスタム投稿タイプ名>.php」みたいな具合です。このブログは「custom」という投稿タイプ名で作成しているので上記のような命名規則となります。

今回は下記のように各テンプレートをカスタマイズしてみました。

content-custom.php の作成とカスタマイズ

content-custom.php はメイン記事で利用している content.php をコピーして利用します。

$ cd wp-content/themes/twentytwelve-child
$ cp content.php content-custom.php

このブログの場合、content.php で下記 WordPress 関数を利用しているためカテゴリ名、タグ名が表示できない状態です。

/* 一覧のカテゴリ名表示 */
<p>Category: <?php the_category(', '); ?></p>

/* 投稿記事のカテゴリ名、タグ名表示 */
<p>Category: <?php the_category(', '); the_tags(' (tag: ',', ',')'); ?></p>

これをそっくり同じに表示するには the_terms 関数を利用して、カスタムタクソノミーに対応してやる必要があります。

上記のコードを下記のように置き換えてみました。

/* 一覧のカテゴリ名表示 */
<p>Category: <?php the_terms( $post->ID, 'custom_category' ); ?></p>

/* 投稿記事のカテゴリ名、タグ名表示 */
<p>Category: <?php the_terms( $post->ID, 'custom_category' ); ?>
(tag: <?php the_terms( $post->ID, 'custom_tag' ); ?>)</p>

第二引数に表示させたいカスタムタクソノミー名を指定するという感じですね。

content-custom.php はこれで完了です。

一覧表示テンプレートの作成とカスタマイズ

次は上記リストで出した一覧表示用のテンプレートをコピーしてカスタマイズしていきます。

single.php 以外は親テーマの物を利用しているのでこんな感じにまずはコピーします。

cp ../twentytwelve/index.php archive-custom.php
cp ../twentytwelve/category.php taxonomy-custom_category.php
cp ../twentytwelve/tag.php taxonomy-custom_tag.php
cp single.php single-custom.php

コピーしたら各ファイルの下記行を探します。

<?php get_template_part( 'content', get_post_format() ); ?>

こんな感じに表示にどのテンプレートを利用するか指定されているのでこれをこのように修正していきます。

<?php get_template_part( 'content-custom', get_post_format() ); ?>

これでカスタマイズは完了です。

完成後の表示例

カスタマイズ前のトップページはこんな感じでした。

before

wordpress-custom-post-07

カスタマイズはこうなりました。

after

wordpress-custom-post-08

ちなみに、投稿ページはこんな感じです。

投稿ページの表示例

wordpress-custom-post-09

今回はメイン記事も分離記事も「同じデザインで」という事にしていたのでこのように軽微な修正になりましたが、デザインを全く分けても面白いかもしれないです。

カスタム投稿タイプは若干面倒だなと思う面も確かにありますが、かなり使える機能なのでオススメです。

以上で、カスタム投稿タイプのカスタマイズネタはお終いです。

おすすめのVPSサーバ

  • OSが選べる
  • VPS同士でLANが組める
  • 複数台構成向き

このブログで使っています。

  • 転送量が多いサービスに
  • 借りてるのは3年間一度もdown無し!

よく見られている記事

  • 本日
  • 週間
  • 月間