【ヒラメ 様】WordPress カスタムフィールドの使い方について(初心者さん向け解説)

WordPressの「カスタムフィールド」の使い方についてご相談頂きました。カスタムフィールドの考え方やカスタマイズ方法について。


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress 無料相談 アフィリエイト SEO 無料相談 無料!WPインストール代行・集客サポート

カスタムフィールドについて

はじめまして、ヒラメと申します。
ワードプレス初心者です(ブログを半年ほど書いてはいますが、HTML、CSSなどの知識はほとんどありません)
この度、新しく地域のラーメン店を紹介するサイトを立ち上げようと考えています。
紹介する店舗数は約60軒ほどです。

トップページなどの構成はどうにか自分で作成中なのですが、
店舗紹介の記事において自分が考えている紹介ページを作成するうえで便利なプラグインを調べていると、「Advanced Custom Fields」を用いるととても便利という内容があり、それから色んな方の記事でかなり調べたのですが自分がやりたいことの記述の調べ方がわからなくてこちらで質問させていただております。

記事の内容としては、
PC表示の場合、
タイトル(店舗名)
記事本文
店舗写真(左側) 簡単な店舗紹介(右側)
上記の下にカスタムフィールドで項目追加

店名
住所
電話番号
営業時間
定休日
座席数
駐車場
などを記載したいと考えております。

そこで質問です。
質問1、
カスタムフィールドで作った項目の装飾(デザイン)はCSSで作るのでしょうか?
これは、作成した際にこのままだと見にくいので、枠線や色を付けたいのですがどうすればいいのか分かりません。

質問2
項目の一部をタイトルに抜粋できるのか?
こちらは、通常の記事だと記事一覧で見た場合に
写真 タイトル(店舗名)+記事本文の抜粋部分(このサイトで言えば簡単な店舗紹介の一部)となると思うのですが、
これを、
写真 タイトル(店舗名)+記事本文のカスタムフィールド部分(住所・営業時間・定休日)を表示できるのでしょうか?

やり方や、詳しい説明でなくても、上記の調べ方だけでも教えていただけるとうれしいです。
質問がわかりづらいかもしれませんが、よろしくお願いします。
※また、カスタムフィールド以外でも他のやり方などあればアドバイスお願いします。

カスタムフィールドを使うまでに必要な作業

>ヒラメさま
ご相談ありがとうございます。

「Advanced Custom Fields」は投稿にカスタムフィールドという情報を追加しやすくするためのプラグインです。

投稿記事に紐づけられたカスタムフィールドを出力するためには、テーマのファイル(PHP)をカスタマイズすることが必須になってきます。
主にsingle.php をカスタマイズすることになるでしょう。

カスタマイズをするには、PHP、HTMLの知識が必要になり、出力したフィールドを装飾するのにはCSSが必要になります。

出力方法

基本的な出力は以下の通りです。単純なテキスト入力&出力であれば初歩的な勉強をすれば実装は可能かもしれません。
流れを解説しますが、テーマによっても変わってくる点に注意してください。

テーマファイルの場所
/wp-content/themes/【テーマ名と同じようなフォルダ名】
の中にsingle.phpがあると思います。single.phpからさらにテンプレートを読み込んでいることがほとんどですが、h1タグやh2タグがあればそこが記事タイトルを表示している部分でしょう。目安にして下さい。(the_content() という記述があればそれが本文の表示か所です)

住所用に【address】というフィールドを設けた場合、

<p>住所:<?php the_field('address'); ?></p>

のような形で出力することができます。

<p>はHTMLのpタグで段落を表すものですが、枠線や色を付けるという事であれば、HTMLのtable(表)やdl dt dd(定義型リスト)を学ぶ必要があるでしょう。

2列のものならdlをCSSでテーブルっぽく装飾する方法もあります。「dl テーブル」などで色々と出てくるでしょう。

テーブルタグは構造が複雑で色々と約束事も多いです。最低限のタグだけ記載します。実際に利用する際はそれぞれのタグについてリファレンスサイトなどで確認してください。

<!-- tableの場合 -->
<table class="fields">
  <tr>
    <th>住所</th>
    <td><?php the_field('address'); ?></td>
  </tr>
</table>

<!-- dlの場合 -->
<dl class="fields">
  <dt>住所</dt>
  <dd><?php the_field('address'); ?></dd>
</dl>

質問1 カスタムフィールドで作った項目の装飾(デザイン)

お考えの通り、装飾にはCSSの知識が必須です。

前述のタグの中にあるclass=”fields”というのはCSSを追加する場合に任意の箇所だけにCSSを適用するための目印のようなものと考えてください。「クラス」と言います。

/* style.css などに追記 */
table.fields {
  /* フィールド用テーブルのCSSを記述 */
}
dl.fields {
  /* フィールド用テーブルのCSSを記述 */
}

質問2 記事一覧の中でカスタムフィールドを使う

可能ではありますが、single.phpのカスタマイズよりもさらに難易度が高いです。

個別の記事ページはsingle.phpのカスタマイズだけで済むこともありますが、記事一覧の表示はループ(for文,while文,foreach文)で処理され、カスタマイズ箇所もテーマによって変わってきます。

index.php トップページなど
archibve.php 日付アーカイブなど
category.php カテゴリー一覧
他、これらのファイルからテンプレートとしてcontent.php などが読み込まれていることが多く、これらの中でループ(一覧を表示する処理)が行われています。

ファイル名と役割について勉強する時は「テンプレート階層」を調べましょう。
WordPress コーデックス テンプレート階層

ループの中で記事タイトル・抜粋などが表示されている部分を見つけ出し、カスタムフィールドを出力する必要があります。

the_excerpt 記事の抜粋を表示している箇所
the_post_thumbnail アイキャッチを表示している箇所
the_title 記事タイトルを表示している箇所
これらの場所を探せばカスタマイズしやすいでしょう。
これらはテンプレートタグと言います。
WordPressコーデックス テンプレートタグ

しかし、出力する際も、記事のIDに対するフィールドを表示する必要があるため、記事毎のIDを取得し、そのIDに対応した値を出力しなくてはいけません。

$postid = get_the_ID(); /* 一か所記載 */

<?php the_field('フィールド名' , $postid); ?>

ちょっとやったことがないので上記では動作しないかもしれません。ちなみにthe_fieldはAdvanced Custom Fieldsの独自のタグなのでWordPressのテンプレートタグで試す場合は get_post_meta($postid,’フィールド名’) となります

カスタムフィールド自動表示

他の方法としては、こちらで紹介しているUser Frontend というプラグインもあります。
ログインしないで投稿ができるWordPressプラグイン WP User Frontend

このプラグインは任意のカスタムフィールドを追加して投稿することができるようになり、記事内に自動でフィールドを全表示する機能もあります。

単純にリスト型式(ul li タグ)で出力され、
・項目:値
・項目2:値
のようなシンプルな表示ですが、無理矢理CSSで以下のような装飾をしたことがありました。

User Frontend 表示カスタマイズ

カスタムフィールドの表示にはHTML・CSSの知識がない段階だとかなりハードルが高いかもしれませんが、一つづつ調べて試していけば良い勉強になると思います。

参考にしていただければ幸いです。

おすすめコンテンツ

コメントをどうぞ

  1. 返信ありがとうございます。

    とても分かりやすくこれからチャレンジしていきます!

    あと2つだけ質問なのですが、

    質問1.
    抜粋でのカスタムフィールドは表示はかなりハードル高いので、違う方法での質問なのですが、
    抜粋部分で文字に装飾や点線、または改行など自由にできるのでしょうか?

    質問2.
    クリッカブルマップについて
    下記のサイトを参考にクリッカブルマップを作成しようと考えていますが、
    作成まではわかるのですが、
    レスポンシブ対応にする「HTML Imagemap Generatorをレスポンシブ対応させる方法」からがわかりません。
    https://izizm.net/web-management/919/
    JSファイルをダウンロードして上記ソースを入れるというのがわかりません。

    可能であれば、手順などを教えていただけると嬉しいです。

    何度も質問して申し訳ございません。
    よろしくお願いします。

    1. ヒラメさま
      コメントありがとうございます。

      質問1について
      タグや改行は反映されましたが、テーマにもよるかもしれません。タグなどが無視されるテーマもありそうです。
      実際試して頂くのが間違いないでしょう。

      質問2について
      この手のライブラリに共通する手順なので省略されていますね。
      1.JSファイルをダウンロード
      2.ダウンロードしたファイルをFTPソフトなどでテーマのフォルダに入れる
      2.header.phpやfooter.phpでアップしたファイルのJSやCSSを読み込む
      という手順になります。「JSのパス」の指定を正しく行えることが大切です。

      WordPressのフォルダ階層、パスに関する理解度が求められます。
      最近同じような質問があったのでこちらも参考にして下さい。
      見出し:clingifyを利用する場合をご覧ください。
      固定メニューの実装方法

      参考にしていただければ幸いです。

      1. 返信遅くなりすみません。

        とても丁寧に説明していただきありがとうございます。

        現在スタート時点からかなりつまづいていて・・・。

        またご相談なのですが、
        飲食店の紹介サイトを作成しようと考えています。
        説明が難しいのですが、
        トップページのレイアウトとして、
        (サイドバーなどない1カラム)
        トップページ画像

        エリアで検索
        ・A市→クリックでA市にある店舗一覧のページへ
        ・B市
        ・C市

        ジャンルで検索
        ・和食→クリックで和食店舗一覧のページへ
        ・洋食
        ・中華

        このような感じで作りたいのですが、
        こういう場合は各項目でカテゴリーをつくってそこに記事を作成するのでしょうか?

        ただ、それだとカテゴリーが重複?になるのでダメかなと・・・。

        上の「エリアで検索」をカテゴリー
        下の「ジャンルで検索」をタグで管理したりするのがいいのでしょうか?

        すみません、質問がわかりづらいと思いますので参考にしているサイトのURLですので
        よければご指導お願いいたします。

        https://tokyobeergarden.com/

        1. >ヒラメさま
          コメントありがとうございます。
          頂いたサイトを拝見するとURL自体は /カテゴリー/投稿ページ になっていますね。
          同じようにやるとしたら、ヒラメさんが仰るように地域はカテゴリ、ジャンルはタグ、パーマリンク設定は/%%category%%/%%postname(またはID)%%/ のような形で良いかも知れせんね。

          どちらもカテゴリーでやることも不可能ではありません。複数のカテゴリーを選ぶことも可能ですので。
          ただ、その場合/%%category%%/%%postname(またはID)%%/ にするとそのままではURLを地域にできないケースも出てくるかもしれません。
          複数カテゴリを選択した場合のURL優先順位や、優先順位を変えるプラグインについてはこちらで解説しています。
          WordPressのカテゴリ・タグについて改めて考える。パーマリンクの優先カテゴリを決められるプラグイン

          タグでやる場合、階層を持つ事ができないので
          ・ジャンル
           →和
           →洋
           →中
          ・利用シーン
           →ベビーカーOK
           →デート向け
           →ビジネス利用
          のような形でタグ一覧を出す事が難しくなります。
          1.手動でタグをグループ化したリンクを作る
          2.「tag groups」といったタグ拡張プラグインを利用する
          3.新しいタクソノミーを作る(非初心者向け)
          WordPressでカテゴリーのような独自のグループをサイドバーに表示させたい(カスタム分類 タクソノミー ターム)
          といった方法を取る事になるでしょう。

          現状の 地域・ジャンル の切り分けのみであればカテゴリ・タグで充分だと思います。
          参考にして頂ければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。