WordCamp Kobe 2013 で紹介した『Advanced Custom Fields』のおさらい

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

知人に「もうちょっと『Advanced Custom Fields』のことを知りたいなぁ」と、ボソッと言われてしまいました。

WordCamp Kobe 2013 の『 sneak idea show – コンテンツやデザインを実現するための事例集』で使ったスライドは、管理画面での操作や functions.php の記述での管理画面の変化を実際のサイトを見ながら解説するという前提で作ったので、スライドを公開してもよくわからないと思う。
というわけで、『 sneak idea show – コンテンツやデザインを実現するための事例集』で解説した『 Advanced Custom Fields 』を使ったコンテンツを記事にしてみます。

まず、実例として紹介したサイトは『宝塚映画祭 | かつて日本最大級の撮影所があった映画の町、兵庫県宝塚の市民映画祭。』です。
このサイトのホーム(トップページ)のメインのコンテンツに『 Advanced Custom Fields 』を使いました。
当日もちょこっと紹介しましたが、イメージ・スライダーも『 Advanced Custom Fields 』を使っています。

お客さんが更新作業を一切することが無く、更新があれば外注するということであれば、普通に固定ページのエディターにメインのコンテンツエリアのコードをササ〜ッと記述すればいい。
でも、そうではなく更新もしたいということであれば、更新しやすい方法となるべくわかりやすい管理画面を実装しなければいけません。
もちろん、デザインの変更等があるような更新作業の場合はさすがに難しいですが…

その事例として『 sneak idea show – コンテンツやデザインを実現するための事例集』では、『 Advanced Custom Fields 』と『 Repeater Field アドオン』を使った方法を説明しました。
あくまでもひとつの事例ですので、他にもアプローチの方法はあると思います。
例えば、ウィジェットプラグインを自作できる方であれば、ホーム(トップページ)のメインコンテンツ・エリアをウィジェットエリアにすれば、ウィジェットで更新作業ができるでしょう。
今回の事例と同じように、追加や削除、順番の入れ替えも可能だと思います。
ただし、ページの更新作業を固定ページの『ホーム』でするのではなく、『外観』→『ウィジェット』でしなければいけないので、違和感があるかも知れません。

実は、上記の『宝塚映画祭』では、フッターにウィジェットエリアを設定していますので、フッター部分のテキストの書換えはウィジェットで可能です。(フッター用の html コードを記述する簡単ウィジェットを自作しました。)
会社名やコピーライトを footer.php に直書きする方も多いと思いますが、それだとお客さんが文字の変更をする必要があった場合、ちょっと難しい。
でも、ウィジェットを使うことでお客さんが文字の変更を簡単にできるようになります。

と、前置きが長くなりましたが、色々と考えられる方法のひとつとして、制作のヒントになればいいなぁと思います。

Advanced Custom Fields を使用しているエリア

メインのコンテンツ部分には大きくわけて5つのブロックがあります。

宝塚映画祭

宝塚映画祭

このブロックの順番を入れ替えたり、追加・削除ができるように『 Advanced Custom Fields 』と『 Repeater Field アドオン』を使って実装しています。

宝塚映画祭

ブロック単位で、追加・削除、順番を入れ替えたり…

ブロック部分の表示と管理画面のカスタムフィールドとの関係は、

宝塚映画祭

ホームコンテンツのブロック

宝塚映画祭_カスタムフィールド

ブロック部分のカスタムフィールド

  1. 各ブロックのタイトル。
  2. 写真がある場合は画像を選択。写真ナシでも可。
  3. 写真の配置。右 or 左、選択しなかった場合は中央。
  4. 各ブロックの背景色。白・白練・薄梅鼠・樺色の4色。デフォルトは白。
  5. 各ブロックのテキスト。写真が中央の場合はテキストも中揃え。

このようなカスタムフィールドで、各ブロックのレイアウト・スタイルを設定できるようにしています。

で、ここまでは『 sneak idea show – コンテンツやデザインを実現するための事例集』で解説したメインのコンテンツ部分を例に説明してきましたが、1ブロックのカスタムフィールドが多いので、ここからはイメージ・スライダーを例に説明していきます。
やってることは、基本的に同じなので… :-D

Advanced Custom Fields の設定

まず、フィールドグループを作成します。

フィールドグループの編集

フィールドグループの編集

この場合は、 フィールドグループが『ホーム・スライダー』

  • フィールドの順序が『1番目』
  • フィールドラベルが『スライド・イメージ』
  • フィールド名が『 cf_home_slider_images 』
  • フィールドタイプが『繰り返し』

です。

で、『 繰り返しフィールド』に『サブフィールド』として

  • フィールド順序 ①
  • フィールドラベル『タイトル』
  • フィールド名『 cf_home_slider_image_title 』
  • フィールドタイプ『 text 』
  • フィールド順序 ②
  • フィールドラベル『イメージ』
  • フィールド名『 cf_home_slider_image 』
  • フィールドタイプ『 image 』
  • フィールド順序 ③
  • フィールドラベル『リンク』
  • フィールド名『 cf_home_slider_image_link 』
  • フィールドタイプ『 text 』

の3つを設定。

あと、『 位置のルール』で固定ページのホーム(トップページ)にだけ、このカスタムフィールドグループを表示するようにしています。

カスタムフィールドグループ

固定ページ『ホーム』に表示したホーム・スライダーの初期状態

さきほどの『フィールドグループ編集画面』の『 最小行数』の数値で表示は変わります。
今回は『0』にしていますので、カスタムフィールドの入力欄がまったく表示していない状態です。
もうひとつ、『 最大行数』を設定すると、設定した数値以上は追加できなくなります。

で、『イメージを追加する』ボタンをクリックすると、

カスタムフィールドの入力欄

カスタムフィールドの入力欄

それぞれにテキストや画像を追加すると、

スライダーのカスタムフィールドグループ

スライダーのカスタムフィールドグループ

のようになります。

フィールドグループの作成方法やフィールドタイプ(フィールドの種類)の詳細については、本家『 ACF { Creating a Field Group 』、『 ACF { Resources, Documentation, API, How to & Tutorial Articles 』や @ounziw さんが出版されている『 WordPress Advanced Custom Fields の使い方』をご覧ください。

テンプレートファイルの記述

基本的には、カスタムフィールドの値を取得する場合は『 get_field() 』、カスタムフィールドの値を出力する場合は『 the_field() 』を使用します。

今回使用したスライダーのスクリプトは、シンプルなのがお気に入りの『 ResponsiveSlides.js 』なので、基本的なマークアップは、

<ul class="rslides">
  <li><img src="hoge.jpg" alt="piyo"></li>
  <li><img src="hoge-hoge.jpg" alt="piyo-piyo"></li>
  <li><img src="hoge-hoge-hoge.jpg" alt="piyo-piyo-piyo"></li>
</ul>

これをもとに最終的には、

	<aside class="header-image">
<?php if( get_field('cf_home_slider_images') ): ?>
		<ul class="rslides">
<?php while( has_sub_field('cf_home_slider_images') ): ?>
<?php if( get_sub_field('cf_home_slider_image_link') ): ?>
			<li><a href="<?php the_sub_field('cf_home_slider_image_link'); ?>"><img src="<?php the_sub_field('cf_home_slider_image'); ?>" alt="<?php the_sub_field('cf_home_slider_image_title'); ?>" /></a></li>
<?php else: ?>
			<li><img src="<?php the_sub_field('cf_home_slider_image'); ?>" alt="<?php the_sub_field('cf_home_slider_image_title'); ?>" /></li>
<?php endif; ?>
<?php endwhile; ?>
		</ul>
<?php endif; ?>
	</aside>

と、クラス等を追加したり、必要な場合はカスタムフィールドの条件文を記述します。

サンプルコードは、『 ACF { Code Examples 』に詳しく載っていますので、ご確認ください。

ちなみにフィールドタイプの『画像』を選択すると『返り値』として『画像オブジェクト』、『画像 URL 』、『画像 ID 』を選択することができます。

フィールドタイプの画像

フィールドタイプの画像

例えば、『画像オブジェクト』を選択した場合は、『 id 』、『 alt 』、『 title 』、『 caption 』、 『 description 』、『 url 』、『 sizes 』という要素を持った配列を取得できます。
詳細は、『ACF { Image』参照。
なので、メディア(画像)に『キャプション』や『代替テキスト』などを記入している場合は、『画像オブジェクト』を使用した方が便利かも知れません。
今回は、更新を担当される方が記入しそうになかったので、あえて『代替テキスト』用に『タイトル』というカスタムフィールドを作りました。
さすがに、ココに記入欄があると記入してくれるでしょう… :-)
なので、『返り値』も『 the_field( ‘field_name’ ) 』とすれば簡単に URL が取得できる『画像 URL 』にしております。

基本的には、これで設置完了。

Advanced Custom Fields で更新作業

特に難しいことはありません。
画像を追加する場合は、『イメージを追加する』ボタンをクリックすると、フィールドが追加されます。

カスタムフィールドの追加

『イメージを追加する』ボタンをクリックするとフィールドが追加されます

また、ちょっとわかりづらいですが、任意の場所に追加することもできます。
1番目と2番目の間に追加したい場合は、

フィールドの追加・削除ボタン

フィールドの追加・削除ボタン

この位置の『 + ボタン』をクリックすると

フィールドの追加

任意の位置にフィールドを追加

2番目に追加されました。
削除するときは、『 – ボタン』をクリックすれば OK です。

あと、『最大行数』が設定してある場合は上限になるとボタンの表示が薄くなり、クリックすると

アラートが表示される

アラートが表示される

と、いうように追加できないというアラートが表示されます。
ちなみに、『最小行数』と『最大行数』の数値を同じにすると『追加ボタン』が表示されなくなります。

追加ボタンが表示されない

追加ボタンが表示されない

画像の編集や削除・入れ換え等は、画像にポインターを重ねると表示される右上の丸いボタンをクリック。

画像の削除・編集ボタン

画像の削除・編集ボタン

順番を入れ替えるのも簡単です。
左側の番号の付いているセルにポインターを重ねると十字カーソルに変わりますので、そのままマウスダウン、ドラッグ & ドロップするだけです。

十字カーソル

十字カーソルに変わります

ドラッグ & ドロップ

そのままドラッグ & ドロップ

このように、コンテンツの追加や削除、順番の入れ替えが簡単にできます。
メインのコンテンツ部分も基本的には同じ方法で作っています。

Advanced Custom Fields プラグインの管理画面にスタイルを適用

これは前回の『おさらい記事』に書いてありますので、コードだけ参考に…

fufunction add_acf_stylesheet() {
	wp_register_style( 'acf-style', get_stylesheet_directory_uri() . '/css/acf.css' );
	wp_enqueue_style( 'acf-style' );
}
add_action( 'acf/input/admin_enqueue_scripts', 'add_acf_stylesheet' );

バージョン3の『 Advanced Custom Fields 』をお使いの場合は、下記のように記述してくださいね。

add_action( 'admin_enqueue_scripts', 'add_acf_stylesheet' );

実は、『おさらい記事』みたいにハッキリとはわかりませんが、この管理画面の『 Advanced Custom Fields 』にも地味にスタイルシートを適用してます :-)

スタイルシートを適用

地味〜にスタイルシートを適用

色々なアプローチ方法があると思います

午後からのセッション『テーマ構築チュートリアルライブ』では、これとは違う方法でスライダーを実装していたと思います。
カスタム投稿タイプを使って画像を読み込み、並び替えには私の事例集でも紹介した『 Intuitive Custom Post Order 』を使っていたと思います。
セッションを見ることができなかったので、まちがってたらゴメンナサイ m(_ _)m

こちらに @gouten5010 さんが、『 WordCamp Kobe 2013「テーマ構築チュートリアル」非ライブ版 』という素晴らしい記事を書いてくださいました。
その記事の5ページ目に『フロントページのスライドギャラリー実装』の解説があります。
それによると、やはり『カスタム投稿タイプ(アイキャッチ画像)』と『 Intuitive Custom Post Order 』プラグインを使って実装しています。
スライダーのスクリプトも同じ『 ResponsiveSlides.js 』だとは知りませんでしたが、当記事の『 Advanced Custom Fields を使った方法』と比較してみると面白いかも知れませんね。

いや〜、それにしてもすごい記事だわ :-D

また、繰り返しになりますが、メインのコンテンツ部分をウィジェットエリアに設定して、自作のウィジェットプラグインを作れる方は、『 Advanced Custom Fields 』と『 Repeater Field アドオン』を使った方法と同じようなことができると思います。
あとは、カスタム投稿タイプとカスタムフィールドの組み合わせとか…

メモリーの消費とか実行速度とか厳密には違いがあるのでしょうけど、色々な方法があっていいと思いますので、少しでもこの記事がこれからの WordPress で制作する上でのヒントになればウレシイです。

ではでは、長文おつきあいありがとうございました。

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。