Web関連

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

こんにちは! 休日はチャギントンを見て過ごした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ですので、試してみてはいかがかでしょうか。

関連するサービス

ホームページ制作

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    【Web制作会社が教える】10分でわかる!?フラットデザイン実践のポイント

    ファッションと同じように、webデザインにも、その時期ごとの流行があり…

  2. Web関連

    作りっぱなしにNO!PDCAを回して、効果的なWEBサイトにしよう 第2回:PDCAの失敗例と解決…

    PDCAがうまく回らない理由以前のコラムで、WebサイトにおいてPD…

  3. Web関連

    【バズるコラム】休みなしで10年記事を書き続けた無名ブロガーの「10分で書けるコラム」

    ・コラムをたくさん書いて新規ユーザーを獲得したい・でも、書く時間が…

  4. Web関連

    乾燥は美容、病気の敵!冬は加湿器で乾燥対策!

    みなさんは日中、乾燥対策のために加湿器って使っていますか?最近喉の乾燥…

  5. Web関連

    Webデザイナーなら知っておくべき!誰でも実践できる写真構図のポイント

    最近寒くなってきましたね。そんななか、11月末に箱根までバイク…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. AI関連

    人工知能(AI)を活用することで、ターゲットに広告を打てる!
  2. Web関連

    寿命が延びてるのはビッグデータのおかげ!ビッグデータで長生きしよう!
  3. AI関連

    飲食店に人工知能(AI)の導入で人手不足の解消!
  4. Web関連

    苦情対応のための社内の仕組みづくりとは
  5. Web関連

    料理レシピサイトでおなじみの「クックパッド」が結構すごかった
PAGE TOP