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

PR
WordPress
2021.7.6
2022.8.7

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

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

▼この記事を書いたひと

フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

1カスタム投稿タイプの「投稿ページ」について
- 1.1カスタム投稿タイプのサンプル
- 1.2カスタムフィールドのサンプル
- 1.3カスタム投稿タイプのデザインイメージ

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

3STEP2.テンプレートファイルにHTMLを移設する
- 3.1HTMLを移設する方法は？【最初はコピペでOK】
- 3.2投稿ページのURLにアクセスする方法

4STEP.3 テンプレートファイルを編集する
- 4.1ページの表示崩れの改善をする
- 4.2投稿を表示するPHPコードを追加する

5PHPコードの詳しい解説
- 5.1カスタムフィールドの「テキスト」の値を表示させる
- 5.2カスタムフィールドの「テキストエリア」の値を表示させる
- 5.3カスタムフィールドの「画像」を表示させる
- 5.4Advanced Custom Fieldsの関数について

6WordPressテーマ制作のおススメ情報
- 6.1おススメ動画：『WordPress開発マスター講座』
- 6.2おススメ書籍：『WordPressデザインレシピ集』

7この記事のまとめ

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

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

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

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

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

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

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

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

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

おススメ記事

【WordPress】カスタム投稿タイプの使い方を解説する【テーマ自作】WordPressに新しい種類のコンテンツが追加できる、カスタム投稿タイプの使い方を解説します。また、カテゴリーやタグの...

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

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

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

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

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

今回の記事では、次のようなデザインイメージを使って解説を進めてゆきます。

カスタム投稿タイプの「一覧ページ」「投稿ページ」のデザインイメージ — デザインイメージ

前置きは以上となります。それでは次の章から解説をスタートしてゆきますね！

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

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

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

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

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

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

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

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

今回の例だと「single-works.php」というファイル名でテンプレートファイルを作成します！

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

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

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

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

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

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

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

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

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

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

この時点では、あくまでHTMLを貼り付けただけの状態でページが表示されます。表示崩れや画像のリンク切れが起きていると思いますが、いずれも次の作業で改善できます。

ページを動作させるためにも、引き続き作業を進めてゆきましょう！

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

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

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

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

▼PHPコード

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

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

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

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

おススメ記事

WordPressテーマを「HTML」から自作する方法【初心者向き】作成したHTMLファイルを「WordPressテーマ」にする方法について画像付きで解説します。この記事を読めば具体的な作...

投稿を表示する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コードの詳しい解説をしてゆきます。今回はサンプルにも登場した、以下のカスタムフィールドの表示方法を解説してゆきます。

▼この章の解説内容

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

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

カスタムフィールドの「テキスト」に入力した値を表示させるには、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コードです！