FEがWordPressを攻略する #2 ── アーカイブ、本文ページ、固定ページの作成

全体の目次

この記事は第2回目の記事となる。

第1回

  • はじめに
  • ローカル環境を用意する
  • デフォルトテーマを剥がして無のテーマを作る
  • 「固定ページ」と「投稿」と「カスタム投稿タイプ」の解説
  • カスタム投稿タイプの作成

第2回(この記事)

  • カスタム投稿タイプごとに「一覧ページ」と「本文ページ」を作る
  • 「実績紹介」ページにカスタムフィールド「執筆者」を追加する
  • 固定ページを追加する

第3回

  • トップページにも「ニュース」と「実績紹介」の一部を表示する
  • デフォルトの「投稿」を含む、各種投稿タイプの動作を解説
  • お問い合わせフォームを追加する(おまけ)
  • 細かい調整と、サイトの完成形の紹介

「記事一覧ページ」「本文ページ」の作り方

ここからは、前回の記事で作成したカスタム投稿タイプ「実績紹介」「ニュース」に対して、

  • 投稿した記事を一覧表示する「アーカイブ」ページ
  • 記事の本文ページ

を作成する。当然ながら、これらはデータベースに保存された記事データを動的に取得してくる必要があるため、PHPを用いて記述を行うことになる。

WordPressでは、下記のとおり「アーカイブページ」「記事本文ページ」のファイル名があらかじめ定められている。

ファイル名 説明
archive-(slug).php 記事一覧ページ
single-(slug).php 記事本文ページ

上記のslugの部分にはカスタム投稿タイプの作成時に設定した値が使われる。今回の場合、

実績紹介

  • archive-works.php
  • single-works.php

ニュース

  • archive-news.php
  • single-news.php

という名前にすればよい。

適当な記事を投稿する

まずは読み込みが正常に行われていることを確認するために、「実績紹介」「ニュース」にそれぞれ2つ程度記事を投稿しておこう。

投稿例1

投稿例2

「ニュース」を作成する

これから「ニュース」のアーカイブページを作成していく。テーマフォルダ内(index.phpなどと同階層)にファイルを追加しよう。

archive-news.php の作成

<?php get_header() ?>
<div>
    <h1><?php the_archive_title(); ?></h1>
    <?php if(have_posts()): ?>
    <ul>
        <?php while(have_posts()):the_post(); ?>
            <li>
                <span><?php the_time('Y/m/d'); ?></span>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile; ?>
    </ul>
    <?php endif; ?>
</div>
<?php get_footer() ?>

例によって最小限の記述としている。while文を用いて記事の数だけ<li>以下を出力しているのがポイントだ。JSに慣れていると少々クセのあるif文やループ文の書き方だが、こればかりは慣れるしかない。

それほど難しい内容はないが、組み込み関数で取得できる値の内容は下記のとおり。

関数名 説明
the_archive_title() アーカイブのタイトル。今回の場合は「ニュース」。
have_posts() 記事の存在判定。bool値が返る。
the_post() ループ中の投稿を「現在の投稿」として設定し、各種の値を利用できる状態にする。おまじないとして覚えておけば問題ない。
the_time() 記事の投稿日。引数で表示フォーマットを指定できる。
the_permalink() 記事本文ページのパーマリンクURL。
the_title() 記事のタイトル。

パーマリンクの設定を更新する

archive-(slug).phpを作成すると、(サイトのドメイン)/(slug)/というURLでアーカイブページが作成されるようになる。

しかし、WordPressを利用する上で絶対に覚えておきたい点として、「パーマリンクが追加、変更された際にすぐに設定が反映されない場合がある」ことに注意しよう。

WordPressはサーバーにパーマリンクのキャッシュを保存しているため、「追加、変更したはずのページにアクセスできない」ということが度々起こる。ちょっと面倒だが、怪しいと思ったら

  • 「ダッシュボード」→「設定」→「パーマリンク設定」で、設定は何も変更せずに「変更を保存」ボタンを押す

という手順でパーマリンクの更新を行ってみるとよい。

パーマリンクの更新

アーカイブの表示を確認する

パーマリンクを更新したら、(サイトのドメイン)/news/にアクセスしてみよう。投稿した記事が動的に取得され、リンクが表示されていることがわかる。

アーカイブページ

single-news.php の作成

これだけだと、リンクをクリックしても記事の内容は表示されない。続いて、記事の本文を表示するためのphpファイルを作成する。

<?php get_header() ?>
<article>
    <span><?php the_time('Y/m/d'); ?></span>
    <h1><?php the_title(); ?></h1>
    <div>
        <?php the_content(); ?>
    </div>
</article>
<?php get_footer() ?>

こちらも記述は最低限としている。

関数 説明
the_content() 記事の本文。

以上でニュースの本文にアクセスできるようになったので、アーカイブページから記事のリンクをクリックしてみよう。下記のように記事本文ページが表示されれば成功だ。

記事ページ

記事本文のパーマリンクを設定する

デフォルトでは記事のパーマリンクは記事のタイトルと同様となるため、日本語のタイトルをつけている場合は(サイトのドメイン)/news/%e5%bc%8a%e7%a4……(省略)/のように日本語がエンコードされたURLになってしまう。これだと見た目もわかりづらく、SEO観点でもあまり好ましくないだろう。

そこで、投稿の編集画面からパーマリンクを変更する。

記事パーマリンクの変更

編集画面上部でパーマリンクを変更し「公開」すると、(サイトのドメイン)/news/abc/のように設定したURLで記事にアクセスできるようになる。もし設定がうまく反映されない場合は、先述のパーマリンク設定の更新も試してみるとよい。

以上の手順で、「ニュース一覧ページ」「ニュース記事本文ページ」を作成することができた。

「実績紹介ページ」にカスタムフィールドを設定する

「実績紹介」の作成も基本的な流れは「ニュース」と同様だが、ここで前回の記事で紹介した「カスタムフィールド」を利用して実績紹介に追加の入力欄を用意してみよう。

例としてはちょっとイマイチかもしれないが、テキスト欄のみで簡単に実装できるため、今回は記事の「執筆者」が入力できるカスタムフィールドを新たに追加することにする。

まず、現状はWordPressのもっとも基本的なデータ構造である

  • タイトル
  • 本文

のみが入力フィールドとして存在している。

実績紹介ページの入力欄

ここに「執筆者」という項目を追加するためには、カスタム投稿タイプと同様に

  • functions.phpを編集する
  • 外部プラグインを利用する

2つの方法がある。今回は理解を深める目的も兼ねて、前者の方法で進めていこう。

追記した全内容

// 執筆者のカスタムフィールドを作成する
function insert_author_fields()
{
    global $post;
    $author = get_post_meta($post->ID, 'author', true);
    echo '<input type="text" name="author" value="' . $author . '" />';
}

// 作成したカスタムフィールドを対象の投稿タイプに追加する
function add_custom_fields()
{
    add_meta_box(
        'author_fields',
        '執筆者',
        'insert_author_fields',
        'works',
    );
}

add_action('admin_menu', 'add_custom_fields');

// カスタムフィールドを保存する際に走る処理
function save_custom_fields($post_id)
{
    // 執筆者の追加時に走る処理
    if (isset($_POST['author'])) {
        update_post_meta($post_id, 'author', $_POST['author']);
    }
}

add_action('save_post', 'save_custom_fields');

見てのとおり、比較的簡単だったカスタム投稿タイプの追加と比べると少々コードがややこしい。前提として、カスタムフィールドの追加時には

  • カスタムフィールドの「入力欄」そのものを自前で実装する必要がある(そのぶん、慣れれば自由度は高い)
  • データ保存時のハンドリングを行う必要がある

という点に注意。ひとつひとつ解説していくが、カスタムフィールドの追加、編集を頻繁に行う予定がある場合は少々煩雑なので、外部プラグインの利用を検討してもよいだろう。

「執筆者」のカスタムフィールドを作成する

function insert_author_fields()
{
    global $post;
    $author = get_post_meta($post->ID, 'author', true);
    echo '<input type="text" name="author" value="' . $author . '" />';
}
関数名 説明
get_post_meta() カスタムフィールドの値を取得する。引数の詳細はリファレンス参照。

ポイントはechoを行っているところで、ここに書いたHTMLが投稿画面のカスタムフィールド欄に出現する。今回はinputタグのみのシンプルなものとしているが、かなり自由度が高いことがわかる。

作成したカスタムフィールドを対象の投稿タイプに追加する

function add_custom_fields()
{
    add_meta_box(
        'author_fields',
        '執筆者',
        'insert_author_fields',
        'works',
    );
}

add_action('admin_menu', 'add_custom_fields');
関数名 説明
add_meta_box() 投稿画面の指定した箇所にメタボックス(枠)を追加する。引数の詳細はこちら

例によってadd_actionで実行することも忘れずに。

カスタムフィールドを保存する際に走るデータ処理を書く

function save_custom_fields($post_id)
{
    // 執筆者の追加時に走る処理
    if (isset($_POST['author'])) {
        update_post_meta($post_id, 'author', $_POST['author']);
    }
}

add_action('save_post', 'save_custom_fields');

最後に、投稿をセーブしたタイミングでフックされる関数として「入力した値を投稿のテーブルに格納する」という処理を行う。

関数名 説明
update_post_meta() 指定した投稿のカスタムフィールドの値を更新する。

今回のようにテキスト欄を追加するだけのフィールドであればそれほど難しくはないのだが、たとえば「画像をアップロードできるカスタムフィールド」などバイナリデータを扱う場合には、

  • 画像の実体ファイルをサーバー上に保存する
  • 保存した画像ファイルへの参照をテーブルに格納する

といった手順を踏む必要があり少々ややこしい。

さて、以上の記述をfunctions.phpに記載すると、実績紹介ページの投稿画面にカスタムフィールドが追加されていることが確認できる。適当なテキストを入力し、きちんと値が保存されることもチェックしておこう。

実績紹介ページの入力欄

カスタムフィールドの値を呼び出す

それでは、カスタムフィールドの値を実際に呼び出してみよう。 まずは「ニュース」とまったく同じ要領で

  • archive-works.php
  • single-works.php

を作成し、single-works.phpに追記を行う。

single-works.php

<?php get_header() ?>
<article>
    <span><?php the_time('Y/m/d'); ?></span>
    <h1><?php the_title(); ?></h1>
    <div>
        <?php the_content(); ?>
        <small>執筆者: <?php echo get_post_meta($post->ID, 'author', true); ?></small>
    </div>
</article>
<?php get_footer() ?>
関数名 説明
get_post_meta() 指定した投稿の任意のカスタムフィールドから値を取得する。echoしないと出力されない点に注意。リファレンスはこちら

ここではget_post_metaを利用してauthorというキーを持つデータを取得している。カスタムフィールドが複数ある場合はそれぞれのキーを指定すればよく、わりと直感的な挙動だ。

(サイトのドメイン)/works/(記事のパーマリンク)/にアクセスすると、正しくカスタムフィールドが取得できていることがわかる。

カスタムフィールドの値を取得

固定ページを追加する

PHPでの動的なデータ取得が必須となる「アーカイブページ」「記事本文ページ」とは異なり、「固定ページ」はHTMLの記述を単純に表示するのみでよい。

ただし、今回はサイト全体で共通の情報がheader.phpとfooter.phpに記載されているため、

  • header.phpの内容とfooter.phpの内容を読み込みつつ、中のコンテンツは「固定ページ」機能で投稿したものをそのまま使う

という方針としたい。そのためには固定ページ向けのテンプレートファイルとして、page.phpというファイルを作成する必要がある。

page.php

<?php get_header() ?>
<div>
    <?php the_content(); ?>
</div>
<?php get_footer() ?>

これだけ。

適当な固定ページを投稿し、動作を確認する

動作確認のために、「会社概要」「アクセス」という固定ページを作成してみよう。初期状態で存在するサンプルの固定ページは削除してもかまわない。

デフォルトのパーマリンクはタイトルと同様になるので、必要に応じてパーマリンクも設定しておくとよい。

固定ページの投稿

固定ページの投稿2

設定したURLにアクセスすると、header.phpとfooter.phpの内容が読み込まれたうえで固定ページが表示されていることがわかる。

固定ページの投稿3

もし、サイト内の固定ページがすべてある程度共通のフォーマットを持っているのであれば、page.phpに共通部分を記載し、ページ特有の内容のみを固定ページとして投稿するのもよいだろう。

おわりに

以上でカスタム投稿タイプや固定ページの表示を行うことができた。最終回となる次回では、

  • 最新のニュースや実績を、アーカイブページだけでなくサイトトップにも載せる
  • 投稿タイプやパーマリンクの挙動について補足

するとともに、フォーム追加やスタイリングなどにも触れていきたい。

Copyright © 2021-2022 tama All Rights Reserved.