![](https://cxg-design.jp/wp-content/uploads/2023/10/312c199bd9bde0d2bbd25bc7f811792e.png)
「ACF」で投稿画面のカスタムフィールド&テンプレートページを作成
CXG DESIGNのWORKSページは、BLOGページと同じように、投稿機能を利用しています。特徴としては、テンプレートを利用しているので、更新、ページ追加する時に、PHPやJavaScriptなどのコードを使用しません。ページの特性上、Photoshopで画像の合成等は必要ですが、プログラミングなしで、スライダーや関連記事のあるページを作成できます。今回は、WORKSページの更新方法を使用するプラグイン「ACF」と共に、紹介していきます。
![](https://cxg-design.jp/wp-content/uploads/2023/10/4127343af5fa77493bca89ec3986677b-1267x2000.png)
これと同じようなページをデモで作成します。
まず、前提として、WordPressのブロックエディタには、必要最低限の入力項目しかありません。特に、画像は、本文を除けば、サムネイルのみしかありません。WORKSページのようなテンプレートを作成して、特定の場所に写真や文字を配置したい場合は、投稿画面に項目を新たに設置することが必要です。テンプレートでの作成は誰が更新しても、見た目が変わらないページを、何ページでも作成できるので、大変便利です。
WordPress編集画面の入力項目のことをフィールド、新しいフィールドを作ることをカスタムフィールドといいます。そして、代表的なカスタムフィールドプラグインが「Advanced Custom Fields (ACF)」 です。では、ACFの説明をいたしますが、設定自体はWebサイト制作側が行うプラグインになります。
![](https://cxg-design.jp/wp-content/uploads/2023/10/8ce675354bbc065ed9fbefbd967779f4.png)
出典 : Advanced Custom Fields(ACF)
プラグインをダウンロード、有効化すると、ダッシュボードの左側に、ACFというメニューが出てきます。ACF>フィールドグループ>新規作成ボタンをクリックして、設定画面を開きます。
![](https://cxg-design.jp/wp-content/uploads/2023/10/0ff847eb40a269737adddd25fb33ed03.png)
ACFで検索すれば左上に表示
画像
ACFで投稿編集画面に新たに画像を設定するフィールドを作ります。今回は、JavaScript(jQuery)で作成したスライダーに写真を入れるので、複数作ります。また、中心配置と全面カバーで表示する場合分けてフィールドを作成します。
![](https://cxg-design.jp/wp-content/uploads/2023/10/a86d56c29d4ea5f8f25bb514f557b110.png)
ギャラリー入れる画像のフィールドを作成します。
ACFから「新規追加」で新しく「フィールドグループ」を作成します。「スライド写真」と名前をつけました。フィールドグループ「スライド写真」をクリックします。
![](https://cxg-design.jp/wp-content/uploads/2023/10/9ae204715e10514c207b5bb78d18ed1f-1.png)
「新規追加」でフィールドグループを作成
右上の「フィールドを追加」をクリックします。次に、「編集」をクリックし、「フィールドタイプ」で、画像、テキスト、投稿など、投稿編集画面に配置するものを選択します。今回は、「画像」を選択します。「フィールドラベル」はこのACF設定画面、投稿画面に表示する名前なので、わかりやすい名前を設定します。「フィールド名」は、PHPに書き込むものなので、小文字アルファベットで「フィールドラベル」と関係性のある名前を設定します。保存は右上の「Save Changes」ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2023/10/515c4950357af35f49a29a4421072bda.png)
「フィールドを追加」をクリックし設定
項目 | 設定 |
---|---|
フィールドタイプ | 画像 |
フィールドラベル | 01〜12 / 余白あり・全面 |
フィールド名 | photograph01〜24 |
戻り値の形式 | 画像配列 |
ライブラリ | すべて |
設定>ルールで、どの投稿タイプでフィールドを表示するかを設定します。今回はWORKSなので、「投稿タイプ」「等しい」「WORKS」に設定し、保存します。これで画像フィールドの設定は終了です。
![](https://cxg-design.jp/wp-content/uploads/2023/10/f7a65a7b31a2418514cd9eca86caed90.png)
今回ルールは全て同じ設定です。
ACFの設定が完了すると、WORKSの投稿画面に、画像フィールドが設置されます。01から順番に「画像を追加」をクリックして、メディアライブラリーでスライド写真を選択し、右下の「選択」ボタンをクリックします。これで1枚目のスライド設定が終了です。あとは同じように順番に写真を設定していきます。
![](https://cxg-design.jp/wp-content/uploads/2023/10/6e3fe3fd9e7e95d1860c8e6da6e19846.png)
画像フィールドが追加されました。
![](https://cxg-design.jp/wp-content/uploads/2023/10/47d0bd8d73403ba36ea298c58d94f2ec.png)
スライド写真を指定します。
![](https://cxg-design.jp/wp-content/uploads/2023/10/a8e50e2143321a887ed4bca46981dc40.png)
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>
画像などのACFを投稿ページ反映する方法
画像を投稿ページに反映するには、PHPの書き換えが必要です。基本的にWebサイト制作時に設定するものなので、管理者はコードを使いません。
テキスト
テキストは、URLに設定してあります。一見、本文でも入力できそうですが、上下の空きなどレイアウトを統一するために、新しくフィールドを作成します。カテゴリーが「WEBSITE」に設定されるとリンクと別窓アイコンが設置され、「GRAPHIC」にすると普通のテキストの設定になります。
![](https://cxg-design.jp/wp-content/uploads/2023/10/baf9da94da2d8440cb2abe2fde2d0c20.png)
カテゴリー「WEBSITE」はURLとリンクが設定されます。
![](https://cxg-design.jp/wp-content/uploads/2023/10/37bd4880bfa0e8131f926dad3fc5a60b.png)
カテゴリー「GRAPHIC」はリンク無しのテキスト
ACFの設定では、フィールドグループを先ほど設定した画像と分けるため、「website address」に変更しました。初期値は、あらかじめテキストボックスに入力されている文字ですが、WEBSITEとGRAPHICで入力内容が全く異なるので、設定しません。
![](https://cxg-design.jp/wp-content/uploads/2023/10/4b395bfff6117039e8ec2be615285f94.png)
設定内容は「画像」の時と異なります。
項目 | 設定 |
---|---|
フィールドタイプ | テキスト |
フィールドラベル | 追加テキスト |
フィールド名 | add text |
初期値 | 空欄 |
設定したテキストは右サイドバーに表示します。「追加テキスト」のテキストボックスにURLを入力します。カテゴリーに当たる「事業内容」を「WEBSITE」に設定しているので、URLリンクも設定されます。「GRAPHIC」に設定すると、テキストのみの反映になります。
![](https://cxg-design.jp/wp-content/uploads/2023/10/bc67d7c0bc3063b6e0e843bb9be12e69-1.png)
「WEBSITE」はURL
![](https://cxg-design.jp/wp-content/uploads/2023/10/9eb3773838da046594da582cd2aad542-1.png)
「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つの関連作品が表示される設定になっています。
これらは投稿オブジェクトとして、投稿編集画面に表示しています。タイトルを選択すれば、関連記事として、サムネイルが表示され、リンクの設定なども設定されます。
![](https://cxg-design.jp/wp-content/uploads/2023/10/88ca36fe6103eb06d5e44eb609659fb6.png)
WORKS詳細の下にあります。
レイアウト的には少し違いますが、当BLOGの記事の下にも関連記事として表示していますので、こちらを見ていただけると、わかりやすいかと思います。
![](https://cxg-design.jp/wp-content/uploads/2023/10/ea5df57f31266229a4be6467296af169.png)
BLOGの下にもあります。
WORKSの関連作品RECOMMENDのACFの設定です。入力欄の場所をURLとまとめたいので、フィールドグループは同じにしています。投稿タイプはWORKSのみで、公開済みのものだけ選択できるようにします。
![](https://cxg-design.jp/wp-content/uploads/2023/10/4960809a2337a46605985338fcfa5fbf.png)
フィールドグループはURLと同じ
項目 | 設定 |
---|---|
フィールドタイプ | 投稿オブジェクト |
フィールドラベル | 関連記事 |
フィールド名 | recommend_posts |
投稿タイプでフィルター | WORKS |
Filter by Post Status | 公開済み |
タクソノミーで絞り込み | 空欄 |
戻り値の形式 | 投稿オブジェクト |
Select Multiple | ON |
右サイドバー下にセレクトボックスが表示されます。タイトルが同じなのでわかりづらいですが、ロゴデザインのタイトルを選択しています。ちなみに、BLOGでは、タイトルが長いので、記事の下に表示しています。
![](https://cxg-design.jp/wp-content/uploads/2023/10/085ff43641b06ce2009c5117c8871335.png)
右下のURLの下にセレクトボックスで選択。
![](https://cxg-design.jp/wp-content/uploads/2023/10/a9bef680c2e0c7d7dfadad016c5552ce.png)
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>
その他の入力方法
WORKSのその他の入力方法を簡単に説明します。クライアント名はタイトルに入力します。説明文は、本文に入力します。タグは、右のサイドバーから選択します。一覧のサムネイルは、アイキャッチ画像で写真を指定します。最後にURLをアルファベット小文字にします。これらは、WordPress既存のフィールドから入力できます。
今回は、テンプレート記事を作成するために必要なプラグイン、ACFを紹介しました。PHPコードを扱うため、簡単に修正、というわけにはいきません。しかし、最初からしっかりデザインしておくと、簡単な更新で、綺麗なページが、誰でも作成できます。
コードの説明など、長々と説明しましたが、更新に関しては、写真を選択して、テキストを入力し、記事などを選択するだけで作成できます。
簡単に更新できるWordPressサイト作成に関するご相談はGXG DESIGNまで、コンタクトフォームよりご連絡ください。