カスタムフィールドを使いこなしてWordPressを「単なるブログ」から「使えるシステム」に進化させる

こんにちは、のすけです。

「WordPressって言うてもブログでしょ。」

いや、違います！！

カスタムフィールドがあります！！

ということで

今回は、あなたのWordPressを単なるブログからシステムに進化させる方法をこっそり教えたいと思います。

本文じゃ色々と足りない
カスタムフィールドとは
頼れる相棒「Advanced Custom Fields」さん
- 使ってみる
カスタムフィールドを表示させるテンプレートを作る
- コンテンツをフィールドごとに適切に表示
まとめ

本文じゃ色々と足りない

WordPressにある「投稿」では次のような項目があると思います。

タイトル

本文

カテゴリ

タグ

でもこれだけだと正直、記事の投稿くらいにしか使えません。

もっと、例えば音楽アーティストのページだったら
イベント情報を出したくて

「ライブハウスの名前」

「住所」

「時間」

「曲目」

なんて情報の入力項目が欲しいかもしれません。

もっと、例えば、不動産会社のページなら

「部屋の名前」

「所在地」

「最寄駅」

「築年月」

「間取り」

「価格」

なんて情報の入力項目が欲しいかもしれません。

でも、通常のままだと全部「本文」に入れるしかありません。

もっと項目を増やせたらいいのに。。。

=> 増やせます。カスタムフィールドで！

しかも、住所に情報を入れたら自動的にGoogleMapで表示させるとか、いちいちテーブルタグを書かないで表を作るなども自由自在です。

カスタムフィールドとは

実はWordPress標準の機能に「カスタムフィールド」と言う設定欄があります。投稿や固定ページの新規作成画面で、表示オプションのカスタムフィールドにチェックを入れると利用できるようになります。

f:id:hollywis:20180917202559p:plain — 投稿や固定ページの編集画面で上の方の「表示オプション」を開くとカスタムフィールドを出せる

カスタムフィールドの情報には「名前」と「値」の組み合わせがあり、自由な情報を登録できます！！
例えば「住所」の情報を増やしたければ、「名前」に"住所"と入れて、「値」に実際の住所情報を入れます。
すると、データベースのwp_postmetaテーブルに「meta_key：名前、meta_value：値」としてデータが保存されます。

f:id:hollywis:20180917202832p:plain

このカスタムフィールドのデータを利用することで、記事情報から取得したいデータだけを取得して任意の処理ができるようになります。
まるで業務システムのように。

ただし、実はこのカスタムフィールド標準だと、いちいち投稿や固定ページを投稿するたびに項目を追加しなくてはならないため

システムがわからない人が投稿時に使うには現実的ではありません。

そこで次の便利なプラグインを使います。

頼れる相棒「Advanced Custom Fields」さん

f:id:hollywis:20180917222745p:plain

標準のままだと、いちいち項目を追加の必要がありましたが、

この「Advanced Custom Fields」を利用するともう全て解決です。

最初から必要な項目は全てセッティングできます。

また、テキストデータだけでなく、画像やファイルをアップロードする項目すら作れます。もう便利すぎます。

実際に使ってみましょう

使ってみる

では実際にサンプルとして、オンライン教育サイトの講座のページを作ってみたいと思います。

管理画面の「プラグイン」ー「新規追加」から「Advanced Custom Fields」を検索してインストールし有効化させます。

1. カスタム投稿タイプ「kouza」を作ります。

あらかじめカスタム投稿タイプを追加するプラグイン「CPT UI」で「kouza」を作っておきます。

ここでわからないぞ！という方は、こちらの記事を参考にどうぞ。

WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。 - hollywis's diary (はりうすブログ)

2. 「カスタムフィールド」を新規追加
次に、「Advanced Custom Fields」さんを有効化すると管理画面に「カスタムフィールド」という項目ができているので、「新規追加」を押します。

そして、タイトルに「講座のフィールドグループ」と入力して

次のフィールドを入力することにします。

フィールドを入力

講座名(kozamei)：フィールドタイプは「テキスト」

講師名(koushi)：フィールドタイプは「テキスト」

動画URL(douga)：フィールドタイプは「oEmbet」

テキストPDF(text_pdf)：フィールドタイプは「ファイル」

f:id:hollywis:20180917210506p:plain — このように順々にフィールドを細かく設定しながら追加できる

なお、長いテキストデータなら「Wysiwygエディタ」、選択項目なら「セレクトボックス」、日付なら「デイトピッカー」、住所なら「Google Map」がオススメです。

ルールを登録

「このフィールドグループを表示する条件」を、「投稿タイプ」「等しい」「講座」にします。

f:id:hollywis:20180917211654p:plain

これを設定することで投稿タイプが「講座」の記事を作成時に、上記フィールドが設定できるようになります。

位置を追加

Settingsの「位置」を「高（タイトルの後）」にしましょう。

f:id:hollywis:20180917211708p:plain

こうすることで、投稿画面のタイトルのすぐ下にフィールドが表示されるため設定忘れを防げます。

3. カスタム投稿タイプで投稿してみる

作成した「講座」から新規追加を押すと編集画面が表示されます。いつもの画面と違って、設定したフィールドが表示されているのがわかります。

f:id:hollywis:20180917212050p:plain

ここに、実際に値を入れてみるとこうなります。(松下幸之助さんの動画を使わせていただきましたorz)

f:id:hollywis:20180917212710p:plain

このように、任意の値を設定できるようになり、もはやブログからは脱却できたことが分かるかと思います。

しかし、実はまだ終わりではありません。このまま記事を「プレビュー」させてみると分かるのですが、フィールドで設定した情報は表示されません。

カスタムフィールドを表示させる投稿テンプレートを作る必要があります。

カスタムフィールドを表示させるテンプレートを作る

では作っていきます。

まず、投稿タイプ「kouza」ですので、single.phpをコピーして「single-kouza.php」を作ります。

そして、「タイトル」と「本文」だけが表示されるようになっているテンプレートにカスタムフィールドを表示させる関数を書いていきます。

WordPressループの中に次のコードを入れてみましょう。

<div>
  <?php the_meta(); ?>
</div>

するとこのような感じで表示されます。

ページ表示例
f:id:hollywis:20180917213913p:plain

そう、the_meta() はカスタムフィールド情報をテキストデータとしてリストで表示するものになります。

これで実際に値が入っているのは確認できました。しかし、動画のURLをテキストデータで表示されても内容が見れません。PDFファイルに至っては謎のIDだけでした。

そのため、ひとつひとつデータを取り出して、コンテンツを適切に表示させていく必要があります。

コンテンツをフィールドごとに適切に表示

get_post_meta()関数などがWordPressで用意されていますが、「Advanced Custom Fields」独自のテンプレートタグが便利ですので、こちらを使っていきます。

the_field()：指定したフィールドを表示する

get_field()：指定したフィールドの値を取得する

WordPressループの中に次のコードを入れます。

<div>
    <?php if( get_field('kozamei') ): ?>
    <h2>講座名：「<?php the_field('kozamei'); ?>」</h2>
    <?php endif; ?>
    
    <?php if( get_field('koushi') ): ?>
    <p>講師：<?php the_field('koushi'); ?></p>
    <?php endif; ?>
  
    <div class="embed-container">
	<?php the_field('douga'); ?>
    </div>

    <?php 
      $file = get_field('text_pdf');
      if( $file ): ?>
	<a href="<?php echo $file['url']; ?>"><?php echo $file['filename']; ?></a>
    <?php endif; ?>

</div>