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

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

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

はじめまして、ヒラメと申します。
ワードプレス初心者です（ブログを半年ほど書いてはいますが、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で以下のような装飾をしたことがありました。

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

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