こんにちは。fsです。
今回はWordpressのカスタム投稿タイプをつくっていきたいと思います。
WordPressはセットアップすると、投稿ページと固定ページといったコンテンツを作成できるようになります。
基本的にはこの2つを使って、
- ニュース
- ブログ
- 会社情報
- 問い合わせ
を追加していきます。
充分な機能ではありますが、
「各店舗情報も欲しいな」
「商品情報も追加してみたいな」
など、これだけでは管理しきれないコンテンツが必要になる場合があります。
カテゴリーやタグで分ける方法もありますが、ややこしくなってしまいます。
そんなときに使えるのが、投稿タイプを増やす（カスタム投稿タイプ）という方法です。
というわけで今回は商品情報を例に、カスタム投稿タイプをつくってみます。
カスタム投稿タイプを作成
それでは早速つくっていきましょう。
functions.phpで投稿タイプを増やす
投稿タイプを増やすにはregister_post_typeという関数を使います。
こちらに基本の記述方法が乗っているので、それを参考にfunctions.phpに記載します。
<?php
/**
* fs functions and definitions
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package fs
*/
add_action('init',function(){
register_post_type('item',[
'public' => true,
'label' => '商品',
'menu_position' => 5,
]);
});
add_actionで機能を追加し、register_post_typeで投稿タイプを追加します。
投稿タイプはパラメーターに配列をとることができるので、今回はpublicをtrueにして表示、ラベル名を商品に、管理画面のメニューを上から5番目にします。
一旦管理画面を再読み込みして確認すると、投稿タイプが増えていることが確認できました。
新規追加をクリックすると投稿（タイトルと内容の記載）ができるようになります。
メニューアイコンが投稿ページと同じだとややこしいので、これを変えていきます。
WordPressがつくっているダッシュアイコンズというものがあるので、適当なアイコンを選びを配列に追加していきます。
<?php
/**
* fs functions and definitions
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package fs
*/
add_action('init',function(){
register_post_type('item',[
'public' => true,
'label' => '商品',
'menu_position' => 5,
'menu_icon' =>'dashicons-store'
]);
});
再読み込みするとアイコンが変わりました。
このようにカスタム投稿タイプではいろんなパラメータを取れるので、Codexで入れたいものをみていくと良いです。
カスタム投稿専用ページをつくる
せっかく新しい投稿タイプをつくったので、専用のテンプレートも用意していきましょう。
WordPressのテンプレート階層をみると、カスタム投稿用のテンプレートファイルはsingle-カスタム投稿名.phpになります。
今回の場合はsingle-item.phpというファイル名でつくっていきます。
※デフォルトだと個別投稿ページ用のテンプレートになります
single-item.phpを作成し、single.phpのコードをコピーし、the_postの後で一旦phpを閉じて、商品の詳細という見出しをつけます。
<?php
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package fs
*/
get_header();
?>
<main id="primary" class="site-main col-md-8">
<?php
while ( have_posts() ) :
the_post();
?>
<h1>商品詳細</h1>
<?php
get_template_part( 'template-parts/content', get_post_type() );
the_post_navigation(
array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'fs' ) . '</span> <span class="nav-title">%title</span>',
'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'fs' ) . '</span> <span class="nav-title">%title</span>',
)
);
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- #main -->
<?php
get_sidebar();
get_footer();
次に商品の記載内容もオリジナルにしていきます。
underscoresのテーマの優れている点として、コンテンツを表示させる部分にget_template_part( ‘template-parts/content’, get_post_type() )というテンプレートタグが入っています。
こちらはtemplate-partsというフォルダの中の”content-タグ専用ページ名”のファイルに紐づく投稿タイプのデータを取得するというプログラムになります。
試しにcontent-item.phpというファイルを作成し、商品名を引っ張ってみましょう。
<p>商品名： <?php the_title(); ?></p>ブラウザで表示すると、ちゃんと商品名が表示されるようになりました。
あとはcssレイアウトを調整していけば、お好みの専用ページができます。
まとめ カスタム投稿でコンテンツを楽々管理
いかがだったでしょうか。
カスタム投稿タイプを使うと専用のコンテンツを表示するためのページのデザインのカスタマイズが非常にやりやすくなります 。
投稿カテゴリーなどで分けて頑張るよりも、カスタム投稿タイプをどんどんつくっていった方が、各コンテンツを管理しやすくなります。
これからWordpressテーマを作成される方は、ぜひ試してみてください。
今回は以上です。
最後までお読みいただきありがとうございました。
簡単操作！MacBookでWordpressテーマをつくってみる！
コメント