Advanced Custom Fieldsの使い方

Advanced Custom Fieldsは、wordpressのカスタムフィールドを扱いやすくしたプラグインです。
カスタムフィールドって何？という方は、以下の記事が参考になるかと思います。

初心者必見！WordPressで便利なカスタムフィールドとは？設定する手順とプラグインもまとめて紹介｜ferret

以下は記事から引用しました。

WordPressで「投稿」を作成する画面では、初期画面で「タイトル」と「本文」の2つがあります。
ここに、入力する情報を追加できるのがカスタムフィールドです。

それでは、Advanced Custom Fieldsの導入から画面上にカスタムフィールドの値を表示させるところまで書いていきます。

1. プラグインの有効化
2. 現状の投稿の確認
3. カスタムフィールドの新規追加
4. 編集画面からカスタムフィールドの値を入力する
5. 入力した値を表示させるコードを書く
- どんなコードか
- どこに書くか
補足
- 読み込み
- クラスを付ける

1. プラグインの有効化

プラグイン→新規追加

f:id:khirok:20200823160810p:plain

検索

f:id:khirok:20200823160938p:plain

今すぐインストール→有効化

f:id:khirok:20200823161055p:plain
有効化すると、サイドメニューに「カスタムフィールド」が表示されます。
f:id:khirok:20200823161515p:plain

2. 現状の投稿の確認

f:id:khirok:20200823161719p:plain
タイトルと本文が表示されています。

編集画面はこちら
f:id:khirok:20200823161821p:plain

Advanced Custom Fieldsを使ってカスタムフィールドを作成することで、「タイトルと本文以外にも編集項目を増やすことができる」ということを、この記事ではお伝えしたいです。

3. カスタムフィールドの新規追加

f:id:khirok:20200823162154p:plain
サイドメニューのカスタムフィールドから新規追加を選択します。

必要事項を記入して公開ボタンを押しました。
f:id:khirok:20200823162439p:plain

4. 編集画面からカスタムフィールドの値を入力する

f:id:khirok:20200823162701p:plain
編集画面には、先ほど設定したカスタムフィールドが表示されています。
表示させたい値を入力しました。

5. 入力した値を表示させるコードを書く

どんなコードか

the_field()というAdvanced Custom Fieldsが用意している関数を使うと、値を表示することができます。

以下は、公式ドキュメントです。
ACF | the_field()
f:id:khirok:20200823164703p:plain

Display a value from a current post
(現在の投稿から値を表示する)
This example shows how to display the value of field “text_field” from the current post.
(この例は、現在の投稿から「text_field」というフィールドの値を表示する方法を示しています)

つまりこういうことです。

<?php the_field('自分で設定したフィールド名'); ?>

今回設定したフィールドの名前は、「field-1」でした。

<?php the_field('field-1'); ?>

この書き方をすれば、編集画面で入力した「カスタムフィールド」という値が表示できます。

どこに書くか

テンプレートファイルの値を表示させたい箇所に書きます。
今回は、トップページに表示させます。

トップページのテンプレートファイルはindex.phpです。
( Show Current Templateを使うと現在開いているページのテンプレートファイルが確認できます。
使い方は以下の記事が参考になります。
【WP】開いているテンプレートを即確認できる便利なプラグイン「Show Current Template」 | カケウェブ｜HTML・CSS・jQuery・CMSなど )

index.phpの以下の箇所に、the_field('field-1'); を追加します。

<?php
while ( have_posts() ) {
 $i++;
 if ( $i > 1 ) {
  echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
  }
 the_post();

     get_template_part( 'template-parts/content', get_post_type() );

  the_field('field-1'); //追加
 }
?>

表示されました！
f:id:khirok:20200823165841p:plain

補足

先ほどの「カスタムフィールド」を中央に寄せたい場合はBootstrapを使うといいでしょう。

Bootstrapの公式サイト

読み込み

CDNで読み込みます。

CDNについて詳しく解説されているサイト
【図解】CDNとは？仕組みと技術の基礎知識 | カゴヤのサーバー研究室

CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略で、ウェブコンテンツを効率的かつスピーディーに配信できるように工夫されたネットワークのことです。

f:id:khirok:20200824073733p:plain
Bootstrapの公式サイトの「CSSのみ」に書いてあるコードのURLを使います。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

header.phpのheadタグの中に書きます。
wordpressが用意しているスタイルシートを安全に読み込む方法を使用します。
関数リファレンス/wp enqueue style - WordPress Codex 日本語版
f:id:khirok:20200824075133p:plain
5つのパラメータ(仮引数)があります。
今回は、第２仮引数までの指定をすればOKです。

<?php wp_enqueue_style( $handle, $src ); ?>

handleは日本語で扱うという意味なので、$handleには、自分で決めたスタイルシートを扱う際の名称を記入しましょう。
$srcには、URLを記入します。

<head>

　//省略
    
　<?php wp_enqueue_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'); ?>

　<?php wp_head(); ?>

</head>

クラスを付ける

「カスタムフィールド」を中央に寄せるために、「text-center」というクラス名を持つdivタグで囲みます。
この時、HTMLにPHPを埋め込むことになります。
HTMLの途中でPHPを書く方法は、以下の記事が参考になります。
HTML内へのPHPコードの埋め込み | BeCrazy

<div class="text-center"><?php the_field('field-1'); ?></div>

これで中央寄せが完了しました。
f:id:khirok:20200824083123p:plain

参考書の紹介

Bootstrap 4 フロントエンド開発の教科書

作者:WINGSプロジェクト宮本麻矢,WINGSプロジェクト朝平文彦
発売日: 2018/08/25
メディア: Kindle版

bootstrapで定義されている様々なクラス名が記載されています。
bootstrapで出来ることが網羅的に書いてあるので、辞書的に利用することで作業効率がUPするかと思います。

［改訂版］WordPress　仕事の現場でサッと使える！デザイン教科書［WordPress 5.x対応版］ Webデザイナー養成講座

作者:中島真洋
発売日: 2020/02/17
メディア: Kindle版

「カスタムフィールド」以外にもテーマの作成方法や独自HTMLの作成方法など実践的な内容が書かれています。
Wordpress開発をする際に持っておきたい一冊です。