デザイナーと繋がる!WebJoyクリエイターブログ WebJoyコミュ

2016年06月16日 WordPressWEB技術

advanced custom fields特集その4!Repeater Fieldの使い方

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

いくつでも追加できるカスタムフィールド、それが「RepeaterField」

通常のカスタムフィールドを使っていて項目数をいくつでも増やせ、並び替えが簡単にできる機能が欲しいと思うことはありませんか?

先日紹介したFlexible Content Fieldも同じような機能ですが、追加フィールドの書式が1パターンの場合はRepeaterFieldの方がシンプルな分更新が簡単です。

RepeaterFieldを使えば、記事作成者の方で簡単にフィールドの追加を行うことができます。有料アドオンですが金額以上に活躍をしてくれることは間違いありません。

本邦初公開!WebJoyブログの管理画面を公開!

実はこのブログはRepeaterFieldを使って更新しています。説明するよりも見たほうがわかりやすいと思いますので今回は特別に弊社の管理画面を紹介したいと思います!

以下の画像のようにブログ記事の更新は、フィールドの入力、追加ボタンをクリック、そしてまたフィールドの入力という風に非常に簡単な仕組みになっています。

弊社で制作させていただくホームページでは随所でRepeaterFieldが活躍してくれています。

rf

まずはインストール、プラグインの有効化

毎回恒例ですが、まずはRepeaterFieldのインストール、プラグインの有効化を行いましょう。

すると、AdvancedCustomFieldのフィールドタイプ欄に以下のようにRepeaterという選択肢が追加されているかと思います。

RepeaterFieldの設定方法

フィールドタイプをRepeaterにすると、以下のようにサブフィールドの設定をできるようになります。

ここに設定したフィールドが編集画面の「追加ボタン」をクリックする度増えていくようになります。

rf3

これで編集画面用の設定は完了です。次に実際に編集画面で設定を行っていきます。

以下の画像のように、設定したフィールドへ文字を入力します。そして、全て入力後、同じ書式のフォームを追加したい場合は「項目を追加(デフォルト値:Add Row)」をクリックするとすぐ下に追加されます。

出力方法

これで管理画面内での設定は完了です。最後に出力方法を紹介します。このコードをphpファイルの表示させたい場所に貼り付けてください。(while文内は任意のタグをご入力ください。)

<?php if(have_rows('フィールド名')): ?>
<?php while(have_rows('フィールド名')): the_row(); ?>
<?php the_sub_field('サブフィールド名'); ?>
<?php endwhile; ?>
<?php endif; ?>

すると、実際のホームページ上でもRepeaterFieldが作動します。

まとめ

先日紹介したFlexible Content Fieldとうまく使い分けることで非常に更新がしやすい管理画面になります。

特にWordPressでブログを日々更新されたい方にはおすすめのツールです。更新が面倒になってしまっている方はぜひ導入して更新が楽になるようにしましょう!


WebJoyで使用しているサーバー情報

合同会社WebJoyでは、エックスサーバーを主に使用しています。その理由はWordpressを運営する上で重要なサーバースペックが高く、かかる費用も安いため個人でのご契約でもおすすめしています。会社経営をする前から約8年間お世話になっているサーバーです。ブログを始めたい方は是非ご契約ください!上記の画像をクリックすることでエックスサーバーの公式サイトに移動します。

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
代表社員 朝永祐太

長崎県にてホームページ制作を行っております。今の時代、Webを活用するためにはブログは必須だと感じ、最近ではブログ集客に力を注ぎ始めました。
実際に当ブログのアクセスを増加させることでよりよい提案ができればと考えております。
そして、近い将来、有益な情報配信を主とした企業を目指しております!

関連記事

2017年12月10日コレで完結!Bootstrapの使い方3
2017年12月07日まだまだ出来ることたくさん!Bootstrapの使い方まとめ その2
2017年12月01日スマホサイト構築に便利!Bootstrapの使い方まとめ その1
2017年01月01日CSSで四則計算!CSS calcの使い方
2016年06月19日advanced custom fields特集その9!Table Fieldの使い方
  • Facebookページ
  • 公式twitterアカウント