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

関連記事

  1. Web関連

    サイトの骨格、ワイヤーフレームとは

    みなさんはWebサイトを作るとき、どのようなデザインにしたいと考えます…

  2. Web関連

    Webサイトと未来をつなぐ「VR」

    PS4といえば、去年SONYから発表された「PlayStation V…

  3. Web関連

    ミュージシャンのWebを利用したプロモーション

    こんにちは。音楽が好きで好きでたまらない杉山です。昨今、Webを活用…

  4. Web関連

    面倒な作業を楽にするCSSフレームワーク -実践編-

    こんにちはサーバーエンジニアの橋本です。前回はCSSフレームワークB…

  5. Web関連

    RFIDってなに?知らないと損します!

    こんにちは。デザイナーの出口です。皆さんRFIDって言葉聞いたことあ…

  6. Web関連

    大切なマイナンバーを守るために

    ついに開始されたマイナンバー制度ですが、使い方や管理方法には注意が必要…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    CMSを導入したWebサイトのレイアウトがガタガタにならないようにする方法
  2. Web関連

    web制作初心者必見!見やすいレイアウト構造
  3. AI関連

    人が対応するのが正しいの?DX(デジタルトランスフォーメーション)へ移行しないと…
  4. Web関連

    人工知能(AI)がユーザーの気持ちを考えてWEB集客率向上!?
  5. Web関連

    納期遅延しない!仕事の集中力を持続させるオススメお菓子
PAGE TOP