WordPressの無料テーマ「Cocoon」にカスタム投稿を追加しましたので、備忘録代わりに記録しておこうと思います。
この記事内では、
- カスタム投稿とは何かを理解している。
- WordPressのテーマ制作にそれなりの知識がある(自分でカスタマイズ出来る)。
ということを前提にしています。
- WordPressサイト管理にてFTPを使用したファイルアップロードが出来る
- HTMLやCSSが分かる
- PHPを読むことが出来る
PHPを自在に書ける必要まではありませんが、少なくともPHPファイルの中身が何となく分かる、ぐらいは必要になるかと思われます。
Cocoonにカスタム投稿を追加する手順
Cocoonでカスタム投稿を追加するための手順は、以下の通りになります。
手順２からの詳細については、後述します。
- 手順1WordPressにカスタム投稿を追加する
WordPressにカスタム投稿を追加します。
プラグインを使用しても、function.phpへ追加してもどちらでも可です。わたしはプラグインを利用することが多いです。
Custom Post Type UIとAdvanced Custom Fieldsというプラグインがおすすめです。 - 手順2カスタム投稿表示用のシングルページを作成する。
Cocoonのテーマに合わせつつ、カスタム投稿を表示させるためのsingle.phpを作成します。single-〇〇〇.phpという名前のファイルになります。
- 手順3カスタム投稿用のアーカイブページを作成する。
Cocoonのテーマに合わせつつ、カスタム投稿のアーカイブを表示させるためのarchive.phpを作成します。archive-〇〇〇.phpという名前のファイルになります。
簡単な手順としては、以上です。カスタム投稿のWordPressへの追加手順の詳細については今回は割愛します。
Cocoonでカスタム投稿用のシングルページを作成する
カスタム投稿を追加し、新たに独自のフィールドを作成しても通常のsingle.phpでは表示させられませんので、カスタム投稿用のsingle.phpを別途用意します。
single-○○○.phpを作成する
子テーマのディレクトリ内にはsingle.phpがありませんので、親テーマからsingle.phpを子テーマへ複製します。
Cocoon-master > single.php
複製したファイルの名前を「single-○○○(投稿タイプ名).php」に変更します。
新たに作成したsingle-○○○.phpの17、18行目がコンテンツ部になります。
<?php //投稿ページ内容
get_template_part('tmp/single-contents'); ?>親テーマのtmpディレクトリ内に、single-contents.phpがありますので、今度はその中身を重複部分を除いた状態でこの17、18行目に上書きでコピーします。
Cocoon-master > tmp > single-contents.php
single-contents.php内には、記事の前後に表示されるウィジェットや広告の記述がありますので、そちらは必要なければ触る必要性はありません。
変更の必要があるのは、以下になります。
<?php //本文テンプレート
get_template_part('tmp/content') ?>先程と同じように、今度はcontent.phpの中身をこちらに上書きでコピーします。
Cocoon-master > tmp > content.php
この状態で、single-○○○.phpの中身を編集することで、新たなカスタム投稿用のシングルテンプレートを作成することが出来ます。
主に編集するのは、以下の部分になると思われます。
<?php //記事本文の表示
the_content(); ?>通常ですと、この部分に記事本分が表示されますので、カスタム投稿で設定したフィールドなどをこちらで読み込むように記述しましょう。
もちろん、tmpディレクトリ内にファイルを作成し、そちらを読み込ませる形でも可能です。
お好きな方で実装してみてください。
Cocoonでカスタム投稿用のアーカイブページを作成する
次に作成するのは、分類した記事を表示するためのarchive-○○○.phpです。
通常の記事と同じように表示されれば良い、という場合には不要です。カスタム投稿で追加したカスタムフィールドを一覧に表示させたい場合に作成します。
archive-○○○.phpを作成する
手順としてはsingle-○○○.phpとほとんど変わりません。
必要箇所に上書きコピーして編集していきます。
ただ、Cocoonにはarchive.phpはありませんので、親テーマのディレクトリからindex.phpを子テーマのディレクトリにコピーし、archive-○○○.phpとします。
Cocoon-master > index.php
あとはsingle-○○○.phpと同様に、ファイルをさかのぼってコピーしていけば同様に編集が可能になります。
まとめ
WordPressの無料テーマ「Cocoon」にカスタム投稿を追加する方法についての備忘録でした。
Cocoonにカスタム投稿を追加するには、
- WordPressにカスタム投稿を設定する。
- カスタム投稿を表示させるテンプレートを作成する。
- カスタム投稿を表示させるアーカイブを作成する。
という３点で完了します。PHPにてカスタム投稿のカスタムフィールドを表示させる方法などは、検索すればたくさん出てきますので、そちらを参考にしてください。
コメント