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

関連記事

  1. Web関連

    今からでも遅くない!ECサイトについて学ぶ ~低コストでEC構築!ASP編~

    今回のお題は「ECサイトについて学ぶ~低コストでEC構築!ASP編~」…

  2. Web関連

    広がりを見せるIoT。私たちの生活はどう変わる?

    最近、私たちの生活の中で『IoT』という言葉を良く耳にするようになりま…

  3. Web関連

    コンセプトのないデザインは味のない料理

    新社会人のみなさん、入社おめでとうございます!休みの日は、寝たり食べた…

  4. Web関連

    アプリを制作する前に知っておきたいこと~デメリット編~

    みなさん、スマートフォン(以下、スマホ)やタブレットのカバーにこだわり…

  5. Web関連

    擬人化ソーシャルゲームと経済の関係

    皆さんは、擬人化されたものをモチーフにしたソーシャルゲームをご存知です…

  6. Web関連

    モバイルフレンドリーってなんだ?

    こんにちは!写真のことなら私、デザイナー出口です。先月ゴールデ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    Google「Picasa」を「Google フォト」に統合
  2. Web関連

    目指せ印税生活!ミュージシャン気取りになれるWeb楽曲配信サービス
  3. Web関連

    Webサイトに動画導入は、あり?なし?
  4. Web関連

    広告費をムダにしないために学ぶべき3つのこと
  5. Web関連

    身の回りにあふれるビッグデータとは?
PAGE TOP