Web関連

WordPressをCMSとして活用するためのプラグイン Advanced Custom Fieldsの有料ライセンスの拡張機能(アドオン)『The Repeater Field』実践編2

0

こんにちは! 休日はチャギントンを見て過ごしたSEの岸沢です。
チャギントンって知ってますか? まぁーきかんしゃトー○スみないなアニメですw
私にテレビのチェンネル権がなく、永遠と見るはめになったため陽気なテーマソングが頭から離れません・・・
「チャーギントン チャカチャカチャカチャカチャカチャカ」
主人公のお調子者具合にイラッときますが、気になった方はぜひ見てみてください。

何事も繰り返すことで、脳に刷り込まれていきます。システムにも同じで繰り返し続けることで成長していきます。
前回から時間が経ってしまいましたが、今回もWordPressの話になりますので、興味をもった方は是非実践いただければと思います。

テンプレートを設定してみよう

前回は繰り返しフィールドの設定を行いましたが、今回は最終回「テンプレートの設定方法」を説明します。
特に変わった設定は無いのですが、繰り返しの部分の設定を説明したいと思います。

前回分はこちら
実践編
インストール編

テンプレート設定

1.テーマの編集

左メニューの外観>テーマの編集画面に遷移します。
※バージョンによって若干変わります。 こちらのバージョンはWordPress4.1

今回は簡単に本文の下に追加します。
右のテンプレートリストからcontent.phpを選択します。

 

上図の青色の部分に追加します。

今回追加したサンプルコードを以下に記載します。

<div class=”sample”>
<?php while( has_sub_field(‘sample1’) ): ?>
<li>
<?php if( $image = get_sub_field(‘images’)): ?>
<img src=”<?php echo $image[‘url’]; ?>” width=”<?php echo $image[‘width’]; ?>” height=”<?php echo $image[‘height’]; ?>” alt=”<?php echo $image[‘alt’]; ?>”>
<?php endif; ?>
<?php the_sub_field(‘caption’); ?>
</li>
<?php endwhile; ?>
</div>

<?php while( has_sub_field(‘sample1‘) ): ?>

赤い色の部分に繰り返し項目のフィールド名を指定します。

while ~  endwhile内で、繰り返し項目内に設定した各項目を呼び出すことが可能です。

<?php the_sub_field(‘caption‘); ?>

テキスト等の項目はthe_sub_fieldで表示します。

通常の項目は、the_field(‘フィールド名’) で取得しますが、繰り返し内の項目は、 the_sub_field(フィールド名’)で表示します。

Advanced Custom Fieldsを利用の方はご察しの通り、変数に代入する場合のget_field(‘フィールド名’)は、get_sub_field(‘フィールド名’)になります。

今回、画像の部分は一度 $image = get_sub_field(‘images’) で$image変数に代入して利用しています。
画像URL:$image[‘url’]
横サイズ: $image[‘width ‘]
縦サイズ: $image[‘height ‘]
ALT: $image[‘alt ‘]
で各画像に関する情報を取得できます。

2.表示確認

1で記述した内容を保存して、表示画面を見てみましょう。
無事、繰り返し項目が表示されました!

kishizawa_acf_15012101.jpg

まとめ

全3回でお送りしましたAdvanced Custom Fieldsの有料ライセンスの拡張機能(アドオン)『The Repeater Field』の利用方法ですがいかがでしたでしょうか。

WordPressをウェブサイトのCMSとして利用するために必要不可欠なプラグイン&アドオンだと思います。
今まで、入力項目をせっせと作っていた方にはありがたい拡張機能だと思います。

たったの$25 AUDですので、試してみてはいかがかでしょうか。

関連するサービス

ホームページ制作

0

映画のWebプロモーションを調べてみた!(2)前のページ

ブログネタがない時におすすめのブログネタ10選次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新しい販売形態であるDtoCについて考えてみる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    Web業界だけじゃない。KPIの使い方

    気が付いたらもう3月。1年の6分の1が終わってしまいました。時…

  2. Web関連

    ギャップで魅力的なリクルートサイトにしよう

    世の中、ギャップによって印象や魅力が増進・半減とありますが、人やモノだ…

  3. Web関連

    ポルシェ好きのオッサンが今後の自動車業界に関して考えてみた

    こんにちは。昔クルマが大好きだった岸沢です。今は、、、東京に住んで…

  4. Web関連

    忙しいビジネスマンにオススメ!のLINEのサービス

    皆さんはプライベート時の連絡手段として、何を利用していますか?スマート…

  5. Web関連

    知ったかぶり、してない?サルでもわかるリードナーチャリング

    世にはびこるマーケティング用語の数々。中でも良く耳にするようになったの…

  6. Web関連

    ウェディングトレンドとマーケティング

    こんにちは。ジューンブライドという言葉がありますが、私は5月・6月と友…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    業務を効率化できるサービス 第2回
  2. Web関連

    サイトの骨格、ワイヤーフレームとは
  3. Web関連

    LINE ~拡大するコミュニケーション~
  4. Web関連

    最近のIoEとIoT事情について思ったこと
  5. Web関連

    カッコイイWEBデザインは必要なのか?
PAGE TOP