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

カスタム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」はいらない

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

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

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

まとめ

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

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

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

コメントを残す

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