WordPress無料テーマCocoonでカスタム投稿タイプを追加する方法

こんにちは、ガタガタです。

最近、新しいWordPressサイトを立ち上げました。テーマはCocoonを初めて導入してみたのですが、無料とは思えないほど充実した機能や、カスタマイズ性の高さに驚きました。
※2021年現在はサイトをリニューアルし、自作のテーマにて運用しています。

運営する上で必要を感じたため、カスタム投稿タイプを追加してみたのですが、初めての試みだったこともありつまずいたところがあったため、詳しい手順をここに書き留めておきます。

スクリーンショット画像を盛り込み、あまりコードに詳しくない方でもわかりやすいように仕上げました。これからCocoonでカスタム投稿タイプを追加しようと考えている方の参考になれば幸いです。

完成形はこんな感じです

トップページにカスタム投稿の一覧が表示されています。

カスタム投稿の一覧ページはサムネイル無しのシンプルなものにしました。HTML/CSSが分かる人なら、自由にデザインすることができます。

以下、手順を詳しく紹介していきます。

function.phpを編集

カスタム投稿タイプを追加します。今回はシンプルな「お知らせ」投稿タイプを作ります。

//お知らせ投稿タイプ実装
function create_post_type_news() {
  $Supports = [
    'title',
    'editor',
    'thumbnail',
  ];
  register_post_type( 'news', //カスタム投稿タイプのスラッグ
    array(
      'label' => 'お知らせ', //カスタム投稿タイプ名
      'labels' => array(
      'all_items' => 'お知らせ一覧' //カスタム投稿タイプ一覧名
      ),
      'public' => true,
      'has_archive' => true,
      'menu_position' => 6,
      'supports' => $Supports
    )
  );
}
add_action( 'init', 'create_post_type_news' );

カスタム投稿タイプのスラッグや名前などは、適宜お好きなものに変更してください。これを、子テーマのfunction.phpの末尾に追記します。

WordPressにログインしてみると、これだけでダッシュボードに新しいカスタム投稿タイプが追加されているはず。Cocoonに搭載されているページ設定やメモなど各種機能も、ばっちり使えます。

ただ、このままだと「お知らせ」投稿を作成しても、そのページにアクセスすることができません。

それは、「お知らせ」投稿タイプの本文を表示するためのphpが用意されていないためです。「お知らせ」アーカイブページについても同様に、テンプレートとなるphpがないため表示できません。記事や記事一覧にアクセスしようとすると、いずれも404ページに遷移してしまうはず。

ということで、次はカスタム投稿タイプの記事ページのphpを用意します。

記事ページを用意する

WordPressテーマ開発の決まり事として、phpファイルは以下のように命名される必要があります。

そこで、個別投稿ページ「single.php」を複製し、「single-スラッグ.php」という名前にして、子テーマのfunction.phpと同じ階層に置きます。今回の場合、カスタム投稿タイプのスラッグはnewsなので、ファイル名はsingle-news.phpになります。

WordPress設定＞パーマリンク設定を更新する

これだけでは、新しいカスタム投稿タイプのパーマリンクが生成されていないため、まだ個別ページが表示されないはずです。

そこで、パーマリンク生成のため、WordPressダッシュボード＞設定＞パーマリンク設定で、ページ下部の「変更を保存」ボタンをクリックします。設定内容に変更を加える必要はありません。

これでパーマリンク設定を更新されたため、カスタム投稿タイプの個別ページが表示されるようになります。

個別カスタム投稿ページのデザインを変えたい場合

テーマ「Cocoon」では、ユーザーの需要・要望に応じた柔軟なカスタマイズ性を実現するため、ブログを構成するパーツごとに細かくphpファイルが分けられ、必要に応じたファイルを呼び出してレイアウトを構築する仕組みになっています。

single.phpを複製して作ったsingle-news.phpの中身を見ると、以下のような記述があります。

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

「tmp/single-contents.php」を参照し、このファイルの記述に従って投稿ページの内容を構築する、という指示です。

カスタム投稿ページのデザインを変えたい場合は、tmp/single-contents.phpを参考にして自分で新しいページをデザインし、そのphpファイルを読み込ませるよう、single-news.phpを変更します。

記事一覧ページを用意する

個別ページと同じく、一覧ページにも命名規則があります。

ただ、Cocoonにはarchive.phpが用意されていませんので、代わりにindex.phpを複製します。

名前は「archive-（スラッグ）.php」に設定します。今回の場合、カスタム投稿タイプのスラッグはnewsなので、archive-news.phpを作成しました。

これでカスタム投稿タイプの一覧ページが作成されました。アドレスは、サイトのURLの後ろにカスタム投稿タイプのスラッグをつけたものになります。

記事一覧ページのデザインを変えたい場合

index.phpを複製したままの状態だと、以下のような記述があるはずです。

<?php
////////////////////////////
//一覧表示
///////////////////////
if (!is_user_agent_live_writer()) {
  //通常表示
  get_template_part('tmp/list');
} else {
  //ブログエディターLive Writerでテーマ取得の際
  get_template_part('tmp/live-writer');
}
?>

個別ページのときと同じく、get_template_part(‘tmp/list’);　の部分で呼び出しているテンプレートでデザインが決まります。

tmp/list.phpを参考にしつつ自分でテンプレートを作成し、そのテンプレートを読み込ませればデザインを変更できます。

トップページにお知らせ一覧を表示

必要であれば、追加した「お知らせ」の一覧をトップに表示させます。

Cocoonに実装されているショートコードを使う場合

[new_list post_type="設定したスラッグ" ...]

post_typeの値に、設定したスラッグを指定すればOKです。簡単ですね。

phpに直接ループを書き込む場合

より細かく条件設定したい場合などは、index.phpの<?php get_header(); ?>の直後に、以下を追記します。

<?php if ( is_home() ) : ?>
ここから、トップページでのみ表示する内容
	<?php
  ////////////////////////////
  //お知らせ一覧
  ///////////////////////
	$args = array(
		'post_type' => 'news', // 表示するカスタム投稿タイプのスラッグ
		'orderby' => 'date', // 日付順
		'posts_per_page' => 3,  // 表示する記事の件数
		'order'=> 'DESC'
		);
	$query = new WP_Query( $args ); ?>

	<?php
	// ループ開始
	if ($query->have_posts()) : ?>
	<?php while ($query->have_posts()) : $query->the_post(); ?>

ここに記事一覧のループを記述。get_template_partで外部ファイルを読み込んでもいいです。

	<?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
	<?php endif; ?>
ここまで、トップページでのみ表示する内容
<?php endif; ?>

おわりに

カスタム投稿タイプを使いこなせると、サイトに幅ができます。最初は難しく感じるかもしれませんが、ぜひ挑戦してみてください。

どうしてもうまくいかなかったり、時間をかけずにカスタム投稿タイプを追加したい場合は、有償にて承ります。まずはお気軽にご相談ください！相談は無料です。

[coconara]