「ACF」で投稿画面のカスタムフィールド&テンプレートページを作成

CXG DESIGNのWORKSページは、BLOGページと同じように、投稿機能を利用しています。特徴としては、テンプレートを利用しているので、更新、ページ追加する時に、PHPやJavaScriptなどのコードを使用しません。ページの特性上、Photoshopで画像の合成等は必要ですが、プログラミングなしで、スライダーや関連記事のあるページを作成できます。今回は、WORKSページの更新方法を使用するプラグイン「ACF」と共に、紹介していきます。

これと同じようなページをデモで作成します。

まず、前提として、WordPressのブロックエディタには、必要最低限の入力項目しかありません。特に、画像は、本文を除けば、サムネイルのみしかありません。WORKSページのようなテンプレートを作成して、特定の場所に写真や文字を配置したい場合は、投稿画面に項目を新たに設置することが必要です。テンプレートでの作成は誰が更新しても、見た目が変わらないページを、何ページでも作成できるので、大変便利です。

WordPress編集画面の入力項目のことをフィールド、新しいフィールドを作ることをカスタムフィールドといいます。そして、代表的なカスタムフィールドプラグインが「Advanced Custom Fields (ACF)」 です。では、ACFの説明をいたしますが、設定自体はWebサイト制作側が行うプラグインになります。

 出典 : Advanced Custom Fields(ACF)

プラグインをダウンロード、有効化すると、ダッシュボードの左側に、ACFというメニューが出てきます。ACF＞フィールドグループ＞新規作成ボタンをクリックして、設定画面を開きます。

ACFで検索すれば左上に表示

画像

ACFで投稿編集画面に新たに画像を設定するフィールドを作ります。今回は、JavaScript（jQuery）で作成したスライダーに写真を入れるので、複数作ります。また、中心配置と全面カバーで表示する場合分けてフィールドを作成します。

ギャラリー入れる画像のフィールドを作成します。

ACFから「新規追加」で新しく「フィールドグループ」を作成します。「スライド写真」と名前をつけました。フィールドグループ「スライド写真」をクリックします。

「新規追加」でフィールドグループを作成

右上の「フィールドを追加」をクリックします。次に、「編集」をクリックし、「フィールドタイプ」で、画像、テキスト、投稿など、投稿編集画面に配置するものを選択します。今回は、「画像」を選択します。「フィールドラベル」はこのACF設定画面、投稿画面に表示する名前なので、わかりやすい名前を設定します。「フィールド名」は、PHPに書き込むものなので、小文字アルファベットで「フィールドラベル」と関係性のある名前を設定します。保存は右上の「Save Changes」ボタンをクリックします。

「フィールドを追加」をクリックし設定

設定＞ルールで、どの投稿タイプでフィールドを表示するかを設定します。今回はWORKSなので、「投稿タイプ」「等しい」「WORKS」に設定し、保存します。これで画像フィールドの設定は終了です。

今回ルールは全て同じ設定です。

ACFの設定が完了すると、WORKSの投稿画面に、画像フィールドが設置されます。01から順番に「画像を追加」をクリックして、メディアライブラリーでスライド写真を選択し、右下の「選択」ボタンをクリックします。これで1枚目のスライド設定が終了です。あとは同じように順番に写真を設定していきます。

画像フィールドが追加されました。

スライド写真を指定します。

1枚目のスライド写真設定終了です。

PHPにコードを記入します。下記のコードはリストで写真を表示するためのもので、一部です。今回はスライダーなので、メインとサムネイル両方設定します。スライダーはJavaScript（jQuery）で作成して、CSSでスタイルを整えています。

<ul>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>																				<ul class="slide">																						<?php											$image = get_field('photograph01');											if( $image ):   											// Image variables.  											$url = $image['url'];   											$title = $image['title'];  											$alt = $image['alt'];    											// Thumbnail size attributes.   											$size = 'large';   											$thumb = $image['sizes'][ $size ];											?>											<li class="item products">       										<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />  										</li>											<?php endif; ?>
</ul>

テキスト

テキストは、URLに設定してあります。一見、本文でも入力できそうですが、上下の空きなどレイアウトを統一するために、新しくフィールドを作成します。カテゴリーが「WEBSITE」に設定されるとリンクと別窓アイコンが設置され、「GRAPHIC」にすると普通のテキストの設定になります。

カテゴリー「WEBSITE」はURLとリンクが設定されます。

カテゴリー「GRAPHIC」はリンク無しのテキスト

ACFの設定では、フィールドグループを先ほど設定した画像と分けるため、「website address」に変更しました。初期値は、あらかじめテキストボックスに入力されている文字ですが、WEBSITEとGRAPHICで入力内容が全く異なるので、設定しません。

設定内容は「画像」の時と異なります。

設定したテキストは右サイドバーに表示します。「追加テキスト」のテキストボックスにURLを入力します。カテゴリーに当たる「事業内容」を「WEBSITE」に設定しているので、URLリンクも設定されます。「GRAPHIC」に設定すると、テキストのみの反映になります。

「WEBSITE」はURL

「GRAPHIC」はテキスト

コードはシンプルですが、カテゴリーで分岐している分少し長くなります。WEBSITEはテキストとリンク両方に代入しています。

<?php if(is_object_in_term($post->ID,'kinds','website')): ?>												<div class="site-address">													<a href="<?php the_field('addtext'); ?>" target="blank">																																								<span class="ling_green"><?php the_field('addtext'); ?></span>														<span class="other-window"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/common/other_window_green.svg"  alt="Other-window" /></span>													</a>												</div>													<?php else: ?>												<div class="site-address">															<?php the_field('addtext'); ?>												</div>													<?php endif; ?>

投稿オブジェクト

Webサイトでは、多くの情報や記事をできるだけ長く読んでいただき、かつ何度も訪問してもらうことを目標に作成します。長く滞在してもらうという観点で、WORKS作品詳細の下に関連作品をRECOMMENDのタイトルで表示しています。ダミーで、CXGロゴしかないのでわかりづらいですが、3つの関連作品が表示される設定になっています。

これらは投稿オブジェクトとして、投稿編集画面に表示しています。タイトルを選択すれば、関連記事として、サムネイルが表示され、リンクの設定なども設定されます。

WORKS詳細の下にあります。

レイアウト的には少し違いますが、当BLOGの記事の下にも関連記事として表示していますので、こちらを見ていただけると、わかりやすいかと思います。

BLOGの下にもあります。

WORKSの関連作品RECOMMENDのACFの設定です。入力欄の場所をURLとまとめたいので、フィールドグループは同じにしています。投稿タイプはWORKSのみで、公開済みのものだけ選択できるようにします。

フィールドグループはURLと同じ

右サイドバー下にセレクトボックスが表示されます。タイトルが同じなのでわかりづらいですが、ロゴデザインのタイトルを選択しています。ちなみに、BLOGでは、タイトルが長いので、記事の下に表示しています。

右下のURLの下にセレクトボックスで選択。

BLOGでは、記事の下に表示

コードはフィールド名を指定して、ループ文で表示します。表示される件数は、編集画面で設定するのでここでは指定していません。

<div class="workbox">																						<?php $acf_post_objects = get_field('recommend_posts'); if( $acf_post_objects ): ?>											<?php foreach( $acf_post_objects as $post): // ループの開始 ?>											<?php setup_postdata($post); // 重要！ setup_postdata でポストオブジェクトを呼び出します ?>																								<article class="works">													<div class="about-works-icon zoomIn">														<a href="<?php echo esc_url(get_permalink()); ?>">															<?php if(has_post_thumbnail()): ?>                  										<?php the_post_thumbnail('medium_large'); ?>               											<?php endif; ?>														</a>													</div>														<a class="detail-link" href="<?php echo esc_url(get_permalink()); ?>">             											<p class="title"><?php the_title(); ?></p>             											<p class="news-text">															<?php       														$terms = get_the_terms($post->ID, 'kinds');       														if ($terms) :																	foreach ($terms as $term) {																		echo '<span>' . $term->name . '</span>';																	}																endif;       													?>														</p>													</a>		       										</article>											<?php endforeach; // ループの終了 ?>											<?php wp_reset_postdata(); // ページの残りの部分は正常に動作するように、ポストオブジェクトをリセットします ?>											<?php endif; ?>											</div>	

今回は、テンプレート記事を作成するために必要なプラグイン、ACFを紹介しました。PHPコードを扱うため、簡単に修正、というわけにはいきません。しかし、最初からしっかりデザインしておくと、簡単な更新で、綺麗なページが、誰でも作成できます。

コードの説明など、長々と説明しましたが、更新に関しては、写真を選択して、テキストを入力し、記事などを選択するだけで作成できます。

簡単に更新できるWordPressサイト作成に関するご相談はGXG DESIGNまで、コンタクトフォームよりご連絡ください。