カスタム投稿タイプとカスタムフィールドを組み合わせて投稿する

はじめに

この記事の概要

こんちには、株式会社TOKOSのたくまです！
皆さんはWordPressでコンテンツを投稿する際、どのようにして投稿していますか？

WordPress には「投稿」とというページタイプが初めから用意されていて、こちらを用いてブログやHP等の投稿ページを作成していきます。
しかし、場合によっては「投稿」ではない投稿ページが必要になることがあります。

例としては、以下のものになります。

上記の場合に、新しい投稿タイプ（カスタム投稿タイプ）を用意することで、投稿の管理や運用、カスタマイズがしやすくなります。
そこで、今回はプラグインを使用したカスタム投稿の管理方法について紹介していきます！

対象読者

カスタム投稿の作成

Custom Post Type UI（CPT UI）をインストールする

冒頭でも言ったように、今回はプラグインを使用してカスタム投稿を作成してきます。
そこで使用するプラグインがCustom Post Type UIです。(以下、CPT UI)

管理画面にアクセスして、プラグインからCPT UIを追加し、有効化してください！
下の画面のように、サイドバーにCPT UIが表示されていれば有効化できています。

投稿する

無事CPT UIを有効化できたら、早速カスタム投稿を作成していきましょう！
今回は作品というカスタム投稿を作成していきます。

サイドバーからカスタムフィールドに入ると下の画像のような画面に入りますので、「新規追加」をクリックします。

すると次のような画面になります。

上から順に入力していきます。
投稿タイプスラッグは、URLとして表示されるものになります。
今回は作品を投稿していくので、「work」とします。
複数形のラベルと単数系のラベルは管理画面のサイドバーに表示される項目になります。
こちらは分かりやすいように日本語で「作品」とします。

また、設定の項目にあるアーカイブは下の画像のようにTrueに変更することをおすすめします。

こちらの設定は、カスタム投稿の一覧ページを作成するか否かを設定します。
デフォルトはFalseになっていますが、そのままだと一覧ページは作成されません。
通常、投稿した作品などは一覧で閲覧する需要が生まれると思いますので、Trueに設定しましょう。
ここまで入力したら、「投稿タイプを追加」ボタンを押して完了です。
管理画面のサイドバーに画像のように表示されていれば上手く保存ができています。

ここまでで、カスタム投稿を作成することができました。
ただ、このままでは投稿内容が限られたものしか掲載できません。
そこで、もう1つ別のプラグイン「Advanced Custom Fields」をインストールしてカスタマイズ性を高めていきましょう！

カスタム投稿にカスタムフィールドを組み合わせる

Advanced Custom Fieldsをインストールする

CPT UIと同様にAdvanced Custom Fieldsをインストールして有効化しましょう。
画像のように管理画面のサイドバーにカスタムフィールドが表示されていれば有効化できています。

カスタムフィールドの作成

管理画面からカスタムフィールドをクリックすると画像のような画面になります。

まずは一番上の[Filed Group Title]を入力しましょう。
これは表示の通りフィールドグループのタイトルになります。今回は作品と関連づけるので、Workとしました。
タイトルを記入したら、ここからフィールドのコンテンツを記入していきます。
上から順に解説していきます。

フィールドタイプは、どのような形式でコンテンツを表示するかを決めます。
最も多く使用するのはテキストかと思います。
今回はテキストのみを使用しますが、画像を表示させたい時はセレクトフォームから画像を選択することで、簡単に画像も投稿することができます。

フィードラベルは、カスタムフィールドの管理画面の編集時に表示されるラベルです。
フィールドは何個も作成してカスタマイズすることもあるので、こちらも分かりやすい名前にしましょう。
今回の例でいうと、作品の年代を表示したい場合はフィールド名を年代としたり、作品のコンセプトを表示したい場合はフィールド名をコンセプトとします。

フィールド名は、そのカスタムフィールドをコード上で呼び出す際に必要な名前です。
それぞれユニークである必要があるため、私の場合はフィールドに付与するCSSのクラス名を付与することが多いです。

初期値は特に設定しなくても大丈夫です。

一通り記入ができたら、Save Changesをクリックして保存しましょう。

上記を踏まえて記入した例が下の画像になります。

フィールドを作成することができたので、最後に先ほど作成したカスタム投稿ページに紐づけましょう！

カスタム投稿とカスタムフィールドを紐づける

こちらの作業はカスタムフィールド側で行います。

先ほど作成したフィールドグループの画面の下の方に画像のような設定というフォームがあります。

こちらを編集して紐づけていきます。
左側のセレクトフォームから投稿タイプを選択、右側のセレクトフォームから紐づけたいページを選択し、
先ほどと同様にSave Changesをクリックしたら紐付け完了です。

これでカスタム投稿とカスタムフィールドの紐付けが完了しました！
あとはカスタム投稿画面のコード上からカスタムフィールドで入力したコンテンツを呼び出せば、実際の画面にも表示されます。

コード上で投稿内容を呼び出す

サブループの使用

コード上でカスタム投稿およびカスタムフィールドを呼び出す際には、まずサブループを使用します。
サブループの他にメインループもあるのですが、今回は長くなるので割愛します。
詳しくは以下のサイトで解説されていますので、ご覧ください。

サブループを使用する際のコードは次のとおりです。

<?php
$news_query = new WP_Query(
	array(
		'post_type'      => 'work',
		'posts_per_page' => 10,
	)
);
?>
<?php if ( $news_query->have_posts() ) : ?>
	<?php while ( $news_query->have_posts() ) : ?>
		<?php $news_query->the_post(); ?>
		<p>表示したい内容</p>
	<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

上記のコードを使用することで、TOPページや下層ページなど、どこでもカスタム投稿を表示することが可能です。
記述する上で注意して頂きたいのは、4,5行目です。
4行目は、カスタム投稿を作成する際に設定したスラッグを記述してください。
5行目は1ページあたりに表示したい投稿数を記入してください。上記のコードでは10件までとなります。
その他はコピペで大丈夫です！
ここからは、12行目に表示した内容を記述していきます。

the_field(”)の使用

先ほどのコードの12行目に、カスタムフィールドで入力したテキストを表示していきます。
カスタムフィールドで入力した内容を表示するには、the_field(”)を使用します。
(”)の中にカスタムフィールドを作成する際に設定したフィールド名を入れます。(今回はc-age)
これを踏まえて記述したコードが下の画像になります。

<?php
$news_query = new WP_Query(
	array(
		'post_type'      => 'work',
		'posts_per_page' => 10,
	)
);
?>
<?php if ( $news_query->have_posts() ) : ?>
	<?php while ( $news_query->have_posts() ) : ?>
		<?php $news_query->the_post(); ?>
		<p class="c-age"><?php the_field('c-age');?></p>
	<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

これでカスタムフィールドに入力した内容を投稿ページで表示することができました。
ちなみに、画像を表示したい場合もthe_field(”)をimgタグの中に挿入し、フィールド名を入れたら表示できます。

さいごに

今回はWordPressにて、カスタム投稿とカスタムフィールドを組み合わせて自由な投稿を行う方法を紹介しました！
最初は設定する項目など多く感じますが、慣れたら流作業で簡単に行えるようになります！

カスタムフィールドには今回紹介したテキストや画像の他にも、セレクトフォームやラジオボックスなど様々な種類のフォームが存在しています。好みや使用に合わせて選択することで、投稿ページをより自由にカスタマイズすることができます。
ぜひ、色々試してみてください！

今回は投稿に関する少し応用的な方法を紹介しましたが、下記の書籍はWordPressに関する基本的な操作方法などが記述されていてかなり勉強になりました。皆さんも是非手にとって参考にしてみてください！

スポンサーリンク