【WordPress】カスタム投稿タイプの「投稿ページ」を作成する方法

みやしも WordPress

今回は、WordPressのテーマ制作におけるカスタム投稿タイプの「投稿ページ」を作成する方法について解説してゆきます。

オリジナルテーマを制作中の方は必見の内容です!

▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

カスタム投稿タイプの「投稿ページ」について

カスタム投稿タイプの一覧ページについて

カスタム投稿タイプは新しい 【投稿タイプ(投稿の種類)】の作成ができる仕組みですが、作成した投稿タイプの情報をWordPressテーマで表示させるには、専用のページを用意する必要があります。

今回はそんなカスタム投稿タイプの「投稿ページ」の作り方について、以下のステップで解説してゆきます。

▼カスタム投稿タイプの「投稿ページ」を作る方法

  1. カスタム投稿タイプのテンプレートファイルを作成する
  2. テンプレートファイルにHTMLを移設する
  3. テンプレートファイルを編集する

カスタム投稿タイプのサンプル

今回は、次のようなカスタム投稿タイプを例に解説を進めてゆきます。

▼カスタム投稿タイプ
名前:制作実績(works)
項目:タイトル、サムネイル、メイン画像・テキスト×1、サブ画像・テキスト×4
パーマリンク:数字ベース(http://example.com/archives/works/123)

上記のカスタム投稿タイプを例にした「functions.php」の設定方法について、つぎの記事で確認できます。

カスタムフィールドのサンプル

WordPressの「カスタムフィールド」という仕組みを利用すれば、カスタム投稿タイプに合わせた自由な編集画面の作成が可能になります。

今回は「Advanced Custom Fields」というプラグインを使用した、次のカスタムフィールドを例に解説を進めてゆきます。
カスタムフィールドのイメージ_フィールド
カスタムフィールドの内容
カスタムフィールドのイメージ_編集画面
投稿の編集画面のイメージ

カスタム投稿タイプのデザインイメージ

カスタム投稿タイプのページを作成するうえでも、その元となるデザインが必要になります。

今回の記事では、次のようなデザインイメージを使って解説を進めてゆきます。
カスタム投稿タイプの「一覧ページ」「投稿ページ」のデザインイメージ
デザインイメージ
前置きは以上となります。それでは次の章から解説をスタートしてゆきますね!

STEP1. 「投稿ページ」のテンプレートファイルを作成する

STEP1. カスタム投稿タイプの「テンプレートファイル」を準備する

カスタム投稿タイプの「投稿ページ」を作成するためにも、まずはWordPressのテンプレートファイルから作成してゆきましょう。

テンプレートファイルの作り方

テンプレートファイルとは、WordPressの機能を利用するためテーマ専用のファイルのことで、あらかじめ決められた役割・名前にしたがって作成する必要があります。



カスタム投稿タイプの「投稿ページ」のテンプレートファイルを作成する場合は、テーマフォルダの直下に次の命名規則でファイルを作成します。

▼「投稿ページ」のテンプレートファイル
/wp-content/themes/<テーマ名>/single-<スラッグ名>.php

この際に<スラッグ名>と書かれた所はカスタム投稿の名前に置き変えます。”スラッグ名”とは、カスタム投稿タイプを作成する際に「functions.php」で設定するアルファベットの文字列のことです。



また、WordPressではこの”スラッグ名”を通してカスタム投稿タイプとテンプレートファイルの紐づけが行われてゆきます。

カスタム投稿タイプのスラッグ名
カスタム投稿タイプのスラッグ名
今回の例だと「single-works.php」というファイル名でテンプレートファイルを作成します!
この他にもテンプレートファイルには様々なの種類や役割があります。今回はカスタム投稿タイプの投稿ページの作成を目的に、上記の「single-〇〇〇〇〇.php」形式のファイルのみを使用します。

STEP2.テンプレートファイルにHTMLを移設する

テンプレートファイルにHTMLを移設する

テンプレートファイルの作成ができたら、続けてファイル内に投稿ページ用のHTMLファイルを移設してゆきましょう。

HTMLを移設する方法は?【最初はコピペでOK】

テンプレートファイルにHTMLを移設する方法ですが、基本的には対象とするページのHTMLファイルの内容をそのままコピペすればOKです。

HTMLの移設イメージ
HTMLの移設イメージ
細かなコーディングは後ほど行います。ひとまずページの下地になるHTMLを貼り付けてしまいましょう!

投稿ページのURLにアクセスする方法

ここで一度、WEBブラウザでページの状態を確認してみましょう。上記のテンプレートファイルには次のURLでアクセスできます。

▼テンプレートファイルのURL
http://localhost:80/archives/<スラッグ名>/<記事ID>
※ドメイン部分は作業中の環境に置き変えて下さい

今回の例だとURLは「http://localhost:80/archives/works/1」という様になります。また実際にアクセスしたWEBページの状態は次の様になります。

投稿ページのHTMLを貼り付けただけの状態
投稿ページにアクセスした状態
この時点では、あくまでHTMLを貼り付けただけの状態でページが表示されます。表示崩れや画像のリンク切れが起きていると思いますが、いずれも次の作業で改善できます。
ページを動作させるためにも、引き続き作業を進めてゆきましょう!

STEP.3 テンプレートファイルを編集する

STEP.2 テンプレートファイルを編集する

ここからは、テンプレートファイルを「投稿ページ」として動作させるために、PHPのコードを追加してゆきます。

ページの表示崩れの改善をする

まずはページの表示崩れの改善をするために、追加したテンプレートファイルに次のPHPコードを埋め込んでゆきましょう。



▼PHPコード

  • get_header()・・・ヘッダー部分(header.php)の内容を呼び出す。HTML上部のヘッダー部分をこの関数に置き換える。
  • get_footer()・・・フッター部分(footer.php)の内容を呼び出す。HTML下部のヘッダー部分をこの関数に置き換える。
  • get_stylesheet_directory_uri()・・・テーマ内のディレクトリを参照する関数。HTML内の画像パスに追加する。



いずれもテンプレートファイル作成における基本作業ですので、ここでの細かな解説は省略します。

ここまで行うと、CSS・JavaScript・画像のパスが正しく通り、追加したテンプレートファイルの表示崩れが改善できると思います。

これらの作業を知っている・すでに済ませてある。といった方は次の作業に進みましょう。よく分からない・デザイン崩れが改善しない場合は、次の記事が参考になります。

投稿を表示するPHPコードを追加する

続けて、カスタム投稿タイプで作成した情報を表示するPHPコードを埋め込んでゆきましょう。今回のサンプルでは次のPHPコードを使用します。



▼PHPコード

<?php // メインイメージを表示させる start ?>
<div class="content">
    <img src="<?php echo wp_get_attachment_image_src(post_custom('main_image'),'full')[0]; ?>" class="works-detail__image--main">
    <div class="works-detail__text-main"><?php echo nl2br(esc_html(post_custom('main_text'))); ?></div>
</div>
<?php // メインイメージを表示させる end ?>
<?php // サブイメージ1~4を表示させる start ?>
<ul class="works-detail__list">
    <?php if(post_custom('sub_image_1')): ?>
    <li class="works-detail__list-item">
        <img src="<?php echo wp_get_attachment_image_src(post_custom('sub_image_1'),'large')[0]; ?>" class="works-detail__image--sub">
        <p class="works-detail__text-sub"><?php echo esc_html(post_custom('sub_text_1')); ?></p>
    </li>
    <?php endif; ?>
    <?php if(post_custom('sub_image_2')): ?>
    <li class="works-detail__list-item">
        <img src="<?php echo wp_get_attachment_image_src(post_custom('sub_image_2'),'large')[0]; ?>" class="works-detail__image--sub">
        <p class="works-detail__text-sub"><?php echo esc_html(post_custom('sub_text_2')); ?></p>
    </li>
    <?php endif; ?>
    <?php if(post_custom('sub_image_3')): ?>
    <li class="works-detail__list-item">
        <img src="<?php echo wp_get_attachment_image_src(post_custom('sub_image_3'),'large')[0]; ?>" class="works-detail__image--sub">
        <p class="works-detail__text-sub"><?php echo esc_html(post_custom('sub_text_3')); ?></p>
    </li>
    <?php endif; ?>
    <?php if(post_custom('sub_image_4')): ?>
    <li class="works-detail__list-item">
        <img src="<?php echo wp_get_attachment_image_src(post_custom('sub_image_4'),'large')[0]; ?>" class="works-detail__image--sub">
        <p class="works-detail__text-sub"><?php echo esc_html(post_custom('sub_text_4')); ?></p>
    </li>
    <?php endif; ?>
</ul>
<?php // サブイメージ1~4を表示させる end ?>



いずれもWordPressの編集画面で作成した投稿内容を、画面に表示させるため必要なコードになります。

引き続き、PHPコードの詳しい解説をしてゆきますね!

PHPコードの詳しい解説

PHPコードの詳しい解説

ここからは、投稿ページの実装に使用したPHPコードの詳しい解説をしてゆきます。今回はサンプルにも登場した、以下のカスタムフィールドの表示方法を解説してゆきます。



▼この章の解説内容

  • カスタムフィールドの「テキスト」の値
  • カスタムフィールドの「テキストエリア」の値
  • カスタムフィールドの「画像」の値

カスタムフィールドの「テキスト」の値を表示させる

カスタムフィールド_入力イメージ(テキスト)
カスタムフィールド:テキスト

カスタムフィールドの「テキスト」に入力した値を表示させるには、WordPressの「post_custom()」関数を使用して、次のように実装してゆきます。



▼PHPコード

<?php if(post_custom('カスタムフィールドのキーを指定')): ?>
    <?php echo esc_html(post_custom('カスタムフィールドのキーを指定')); ?>
<?php endif; ?>



「post_custom()」の引数にカスタムフィールドのキーを指定すると対応する値が返りますので、そのまま「echo」すれば画面に表示出来ます。また、安全にHTML表示をするためにもPHPの「esc_html()」関数と組み合わせて利用しましょう。



if文と組み合わせればカスタムフィールドに入力がある場合のみその内側を表示させるという制御が可能になります。カスタムフィールドの入力が無いケースを想定し、デザイン崩れを起こさないためにも、必要に応じてif文を使用してゆきましょう。

上記コードをカスタムフィールドの値を表示させる処理の基本形として利用できます。他のテンプレートファイルでも同じコードで実装できます。

カスタムフィールドの「テキストエリア」の値を表示させる

カスタムフィールド_入力イメージ(テキストエリア)
カスタムフィールド:テキストエリア

カスタムフィールドの「テキストエリア」に入力した値表示させる場合、基本的には「テキスト」と同じやり方で実装できます。



▼PHPコード

<?php if(post_custom('カスタムフィールドのキーを指定')): ?>
    <?php echo nl2br(esc_html(post_custom('カスタムフィールドのキーを指定'))); ?>
<?php endif; ?>



ただし「テキストエリア」の場合は改行に対応させる必要があります。表示させる値を「nl2br()」関数に通してあげると、テキスト内の改行コードに応じて自動的にHTMLの<br>タグが挿入され、結果として改行が正しく表現できる様になります。

テキストエリアの場合は改行コードに対応させる必要がある。「nl2br()」関数と使うと改行コードに応じて<br>タグが自動挿入される様になります。

カスタムフィールドの「画像」を表示させる

カスタムフィールド_入力イメージ(画像)
カスタムフィールド:画像

カスタムフィールドで設定した「画像」を表示させるには、以下のPHPコードを使用します。



▼PHPコード

<?php if(post_custom('カスタムフィールドのキーを指定')): ?>
    <img src="<?php echo wp_get_attachment_image_src(post_custom('カスタムフィールドのキーを指定'),'full')[0]; ?>">
<?php endif; ?>



カスタムフィールドが画像の場合、「post_custom()」関数の戻り値はその画像のID値となります。そのままでは画像を表示させることは出来ませんので、「wp_get_attachment_image_src()」関数に値を渡して、画像のURLを取得します。



▼公式マニュアル(Codex)

関数リファレンス/wp_get_attachment_image_src



最終的には取得した画像のURLを<img>タグのsrc要素内でechoすることで画像が出力できる様になります。

カスタムフィールドに画像が設定されていないと「画像のリンク切れ」の原因になります。画像を扱う場合は、前後のif文を必ず利用する様にしましょう。
いずれもカスタム投稿タイプの実装では非常によく使用されるPHPコードです!

Advanced Custom Fieldsの関数について

記事の冒頭にも登場した、プラグイン「Advanced Custom Fields(ACF)」の「get_field()」「the_field()」関数を使えば、上記と同様の実装が可能になります。

とはいえ「Advanced Custom Fields」の関数を使用するとプラグイン依存のテーマにもなるため、この点には注意しましょう。

先の解説から分かる通り、Advanced Custom Fieldsの関数を使用せずとも作成したカスタムフィールドを参照することが出来ます。このためにも必要性が無い限りは「post_custom()」関数を使った実装方法がベターと言えます。

基本的には「post_custom()」を使が比較的かんたんで、おススメの実装方法です!

WordPressテーマ制作のおススメ情報

WordPressのオリジナルテーマ制作で役立つ、おススメ情報を紹介いたします。

おススメ動画:『WordPress開発マスター講座』

WordPress開発マスター講座
Udemy - WordPress開発マスター講座

Udemyでも人気の「WordPress開発マスター講座」は、WordPressの仕組みからサイト制作への活かし方まで、初心者でも分かりやすく学ぶことができる動画教材です。



WordPress開発マスター講座

WordPressのイメージの持ちづらい。。なんて方は、まずは動画から学習するのがおススメです!

おススメ書籍:『WordPressデザインレシピ集』

WordPressデザインレシピ集
WordPressデザインレシピ集

本記事でも解説してきた、WordPressのテーマ実装に関する情報がまとめられた書籍です。目的別にレシピが整理されているので、『あの実装はどうやるんだっけ?』なんて時にこそ確実に役立つ一冊です。


WordPressデザインレシピ集

テーマの実装を進めている、情報をまとめて抑えておきたい方におススメです!

この記事のまとめ

今回は、WordPressのテーマ制作におけるカスタム投稿タイプの「投稿ページ」を作成する方法について解説してゆきました。



▼カスタム投稿タイプの「投稿ページ」を作る方法

  • カスタム投稿タイプのテンプレートファイルを作成する
  • テンプレートファイルにHTMLを移設する
  • テンプレートファイルを編集する



オリジナルテーマを自作する際には、ぜひ参考にして頂きたい情報です。このほか当ブログでは、WordPressの情報を多く掲載しています。あわせてご活用ください。



WordPressの記事一覧

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事