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

コーディング


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

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

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

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

完成形はこんな感じです

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

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

カスタム投稿の一覧ページはシンプルにしました。

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

ざっくりとした手順

  • function.phpにコードをコピペ
  • single.phpを複製し、個別記事ページを作る
  • index.phpを複製し、記事一覧ページを作る
  • (必要な人のみ)トップページに新着記事一覧を表示

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

function.phpを編集

ご注意

function.phpを編集するときは、必ず手を加える前のfunction.phpをダウンロード・保存しておきましょう。このファイルは、テーマを動かすための重要なファイルですので、編集を誤るとブログが表示されなくなる場合があります。万が一ミスしてブログが動かなくなっても、編集前の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に搭載されているページ設定やメモなど各種機能も、ばっちり使えます。

Cocoonにカスタム投稿タイプ「お知らせ」が追加できました

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

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

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

記事ページを用意する

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

  • 個別固定ページは「page.php
  • 個別投稿ページは「single.php
  • 個別カスタム投稿ページは
    single-(カスタム投稿ページのスラッグ).php

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

カスタム投稿タイプの個別ページができました

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

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

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

パーマリンク設定の「変更を保存」をクリックするだけでOK

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

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

テーマ「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を変更します。

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

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

  • 投稿アーカイブは「archive.php
  • カスタム投稿アーカイブは
    archive-(カスタム投稿ページのスラッグ).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; ?>

おわりに

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

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

Wordpressのちょっとしたお悩み解決します かゆいところに手がとどくカスタマイズを提供します