WordPress無料テーマ「Cocoon」にカスタム投稿を追加する

どうもこんにちわ、だいぐぅです。

WordPressの無料テーマ「Cocoon」にカスタム投稿を追加しましたので、備忘録代わりに記録しておこうと思います。

この記事内では、

• カスタム投稿とは何かを理解している。
• WordPressのテーマ制作にそれなりの知識がある(自分でカスタマイズ出来る)。

ということを前提にしています。HTMLやCSS、PHPなどの知識が必要となります。
カスタマイズはCocoonの子テーマに対し行なっています。親テーマは一切手を加えません。親テーマに手を加えると、アップデートの際などに変更がすべて破棄されます。注意しましょう。

また、これらのカスタマイズはわたしが個人ブログでカスタム投稿を表示させるために行なった作業になります。これらのカスタマイズを行なうことで、もしかすると予期せぬ不具合などが発生する可能性もあります。必ずテストし、ご自身の責任下においてカスタマイズを行なうようにしてください。

Cocoonにカスタム投稿を追加する手順

Cocoonでカスタム投稿を追加するための手順は、以下の通りになります。
手順２からの詳細については、後述します。

簡単な手順としては、以上です。カスタム投稿のWordPressへの追加手順の詳細については今回は割愛します。

Cocoonでカスタム投稿用のシングルページを作成する

カスタム投稿を追加し、新たに独自のフィールドを作成しても通常のsingle.phpでは表示させられませんので、カスタム投稿用のsingle.phpを別途用意します。

single-○○○.phpを作成する

子テーマのディレクトリ内にはsingle.phpがありませんので、親テーマからsingle.phpを子テーマへ複製します。

複製したファイルの名前を「single-○○○(投稿タイプ名).php」に変更します。

新たに作成したsingle-○○○.phpの17、18行目がコンテンツ部になります。

<?php //投稿ページ内容
get_template_part('tmp/single-contents'); ?>

親テーマのtmpディレクトリ内に、single-contents.phpがありますので、今度はその中身を重複部分を除いた状態でこの17、18行目に上書きでコピーします。

single-contents.php内には、記事の前後に表示されるウィジェットや広告の記述がありますので、そちらは必要なければ触る必要性はありません。

変更の必要があるのは、以下になります。

<?php //本文テンプレート
get_template_part('tmp/content') ?>

先程と同じように、今度はcontent.phpの中身をこちらに上書きでコピーします。

この状態で、single-○○○.phpの中身を編集することで、新たなカスタム投稿用のシングルテンプレートを作成することが出来ます。

主に編集するのは、以下の部分になると思われます。

<?php //記事本文の表示
the_content(); ?>

通常ですと、この部分に記事本分が表示されますので、カスタム投稿で設定したフィールドなどをこちらで読み込むように記述しましょう。

Cocoonでカスタム投稿用のアーカイブページを作成する

次に作成するのは、分類した記事を表示するためのarchive-○○○.phpです。
通常の記事と同じように表示されれば良い、という場合には不要です。カスタム投稿で追加したカスタムフィールドを一覧に表示させたい場合に作成します。

archive-○○○.phpを作成する

手順としてはsingle-○○○.phpとほとんど変わりません。
必要箇所に上書きコピーして編集していきます。
ただ、Cocoonにはarchive.phpはありませんので、親テーマのディレクトリからindex.phpを子テーマのディレクトリにコピーし、archive-○○○.phpとします。

あとはsingle-○○○.phpと同様に、ファイルをさかのぼってコピーしていけば同様に編集が可能になります。

まとめ

WordPressの無料テーマ「Cocoon」にカスタム投稿を追加する方法についての備忘録でした。

Cocoonは便利なのでわたしはほとんどのブログに導入していますが、カスタマイズも突き詰めるとかなり自由に色々出来るような感じなので、他にも試せるものは試してみようかな、と思っています。

わたしの別ブログも基本はCocoonですが、トップをカスタマイズしています。
トップページのカスタマイズ方法は、ショートコードとCSSだけで出来ますので、そちらも次回ご紹介したいと思います。