はりうすブログ (のすけのメモ)

はりうす代表 ”のすけ”のブログです

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

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

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

いや、違います!!

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

ということで

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

本文じゃ色々と足りない

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>

すると、動画は動画に、ファイルはリンクとして適切に表示されました。

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

説明
カスタムフィールドの値は必ずしも入っているとは限りません、そのためget_field()を使ってif文で存在するか判別しています。省略していますが実際にはdougaやtext_pdfも存在判別をした方がより安全です。

ファイルを取得する場合にはフィールドを取得した後、urlなどの情報は配列に入っているためURLを$file['url']で、 ファイル名を$file['filename'] で取得しています。

その他のフィールドタイプの例などもACFの公式ページで紹介されていますので、そちらを参考にコードを書くと良いかと思います。

www.advancedcustomfields.com

f:id:hollywis:20180917223742p:plain


まとめ

今回はカスタムフィールドを使うことでWordPressをブログ以上のシステムに進化させる方法を紹介しました。

プラグインである「Advanced Custom Fields」を使うことで、様々なタイプのフィールドを追加させることができるようになりました。

また、カスタム投稿タイプと併用することで、専用の投稿ページ&表示ページを自由に作成することができるため、様々な要望に答えられるシステムを構築することができます。

いやぁ、「Advanced Custom Fields」さん本当に便利ですね!

次回は独自のテーマをCSSフレームワークを利用して、それっぽくデザインする方法を紹介したいと思います。
では。