デイトラweb制作上級編　DAY27~28

2022年9月8日 2022年9月10日

nakano

カスタム3兄弟を使いこなそう② - カスタムフィールド編

カスタムフィールド ・・・タイトルや本文以外で自分で入力項目を追加できる機能

プラグイン「Advanced Custom Fields」をインストール（略称：ACF）

WordPressの扱いが不慣れなお客さんも、数値を入力するだけで完成する状態にしておく

①管理画面ですること

カスタムフィールド > 新規追加からタイトルは「制作実績」

「会社名」は 編集ページで表示される名前

「company」は テンプレートに使用される（single-work.phpなど）

「テキスト」は 入力項目のタイプ
_{→「テキスト」「URL」「テキストエリア」など}

入力項目の種類↓

カスタム投稿「制作実績」と紐付ける
_{※上級編 DAY25~26 で作成済み}

②編集画面ですること

→　空欄に入力して保存するだけ

③テンプレートですること例

// ifを使うのは空白を行ごと非表示にするため
<?php if (get_field('company')) : ?>
  <tr>
    <th>会社名</th>
    <td><?php the_field('company'); ?></td>
  </tr>
<?php endif; ?>

get_field() ・・・フィールド名で保存した値の取得

the_field() ・・・フィールド名で保存した値が出力

_{※取得した値をそのまま出力するため、「echo」はいらない}

参考記事

・ACFのベーシック関数 get_field()/get_fields()/the_field()

演習課題：抜粋に「案件概要」のカスタムフィールドを出力させてみよう

<div class="entry-item-excerpt">
  <?php echo mb_substr(get_field('overview'), 0, 40); ?>
</div><!-- /.entry-item-excerpt -->

mb_substr() ・・・文字列を指定したところだけ切り取る

参考記事

・PHP mb_substr() 文字列の一部を抽出したい（マルチバイト対応）

・備忘録：カスタムフィールドで抜粋表示

まとめ

今回はカスタムフィールドについて学びました。

テーブルで表示したいときやコンテンツを左右に分けたいときなど、あらかじめ難しいレイアウトをこちら側で作成したいときに使うみたいです。

兄弟というだけあって昨日に引き続き、WordPress制作で重要な部分なのでちゃんと使えるようにしておきます！

カテゴリー: 上級編

デイトラweb制作上級編　DAY27~28