制作実績のページをカスタム投稿 (「CPT UI」 , 「ACF」使用) で実装してみました × SnowMonkey

こんにちは、minoyanです。

今回、この minoyan blog にカスタム投稿を利用した「実績ページ」を設置しようと思います。

(実績のページが工事中のままになっていました…

SnowMonkeyでカスタム投稿タイプを作るのは初めてです!ここではシングルページでの表示を備忘録としてまとめておこうと思います。

利用する仕組み

カスタムフィールドに入力したものを出力する方法は、アクションフック、フィルターフック、ショートコードの大きく三つが手軽のようです。

今回はフィルターフックを利用することにしました。

始めに参考サイトを挙げます。

↑もはや答えなのですが…とても詳しくまとめてくださってあってとても助かりました。

載せたいもの

今回は私のDTPの実績ページを作りたいと思います。
載せたい項目としては下記…

  • クライアント名
  • 制作物
  • 種類(名刺、チラシ、ポップ など…)、大きさ
  • 制作期間
  • 簡単な依頼内容
  • 一言

これらをカスタムフィールドで入力できる様にして、出力したいと思います。

使用するプラグイン

お馴染みの、「Custom Post Type UI」と「Advanced Custom Fields」でございます。(今までfunctions.phpmy-snow-monkey.php)で入力してたので組み合わせて使用するのは初です。)

こちらでカスタム投稿タイプとカスタムフィールドをサクッと作っちゃいます。

カスタム投稿タイプ「Custom Post Type UI」
カスタムフィールド「Advanced Custom Fields」

種類、大きさは「選択」式、制作物は「画像」を入れるようにして、それ以外は「テキスト」タイプにしました。

ダッシュボードに[ DTP制作実績 ]が現れ、[ 新規追加 ] を見ると、無事カスタムフィールドも確認できました。

ここに必要事項を入力していきます。

補足

今回、このページではエディタ部分は不要なので非表示にしようと思います。

本来ならACFで設定できるのですが、該当箇所を設定しても反応なし(フリーはWordpressの新バージョンに対応してない…?)なのでmy-snow-monkey.phpにコードを入れます。

/*カスタム投稿エディタを非表示*/
add_action( 'init', function() { 
	remove_post_type_support( 'dtp-works', 'editor' ); 
}, 99);

これでスッキリしました。

my-snow-monkey.php へ追記

カスタムフィールドに入力した内容を表示させるために my-snow-monkey に追記をします。
冒頭で触れましたが今回はフィルターフックの記載になります。

カスタム投稿のタイプ名やフィールド名を入れながら構築します。

参考サイトのコードを使わせていただき、投稿タイプ名とフィールド名を調整しました。

/**
 * CPT"dtp-works"のシングルページにカスタムフィールド"dtp-client""dtp-product""dtp-type""dtp-days""dtp-request""dtp-words"を表示
 */
add_action(
	'snow_monkey_prepend_entry_content',
	function() {
		if ( is_single() && 'dtp-works' === get_post_type() ) {
		?>
			<div class="works-dtp-client">
				<p><?php echo nl2br( esc_html( get_field( 'dtp-client' ) ) ); ?></p>
				<img src="<?php echo nl2br( esc_html( get_field( 'dtp-product' ) ) ); ?>" />
				<p><?php echo nl2br( esc_html( get_field( 'dtp-type' ) ) ); ?></p>
				<p><?php echo nl2br( esc_html( get_field( 'dtp-days' ) ) ); ?></p>
				<p><?php echo nl2br( esc_html( get_field( 'dtp-request' ) ) ); ?></p>
				<p><?php echo nl2br( esc_html( get_field( 'dtp-words' ) ) ); ?></p>
			</div>

		<?php
		}
	}
);

こんな感じの表示になりました。
まだ、入力を表示しただけなのでここからもうすこしレイアウトをしっかりさせて本サイトに反映させたいと思っています。

まとめ

始めは少し難しそうに感じましたが、オレインさんやGONSYさんが紹介してくださったやりかたで少し調整したら表示できました!
いつもありがとうございます。

そしてPHPもっと勉強しなければ…

この記事を書いた人