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

2016年06月14日 WordPressWEB技術

advanced custom fields特集その2!Flexible Content Fieldの使い方

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

今回よりAdvanced Custom Fields有料アドオンの紹介をしていきます。

恐らくAdvanced Custom Fieldsを使われている方は多いかと思いますが、有料アドオンまで導入されている方はまだ少ないのではないでしょうか?

有料版だけを使っていると気づかないですが、実はかなり高機能になるんです!

というわけで今回は有料アドオンFlexible Content Fieldの使い方を紹介したいと思います。

Flexible Content Fieldの特徴

よくお客様からページ内に新たに項目を追加したいというご要望はありませんか?

Advanced Custom Fields本体のみでは既存のフィールドの変更しかできません。そしてお客様自身でカスタムフィールドやテンプレートに追記をさせるのは酷です。かといってデフォルトのエディタで編集してもらっても、レイアウトを崩してしまう可能性も高いですし、項目を追加した時にデザインをそのまま反映させるのは大変と思います。

そういう時に最も簡単で便利なものがFlexible Content Fieldです。実は今度紹介するRepeater Fieldと似ている部分もあるのですが、お客様自身で2カラムとか1カラムとか画像を配置する場所はこっち等、より自由に設定できるものがこのFlexible Content Fieldなのです。

それでは、手順を説明します。

有効化されるとフィールドタイプが追加されます。

まずは、下準備として前回同様今度はFlexible Content Fieldをwordpressにインストール・有効化します。

そして以下の画面の通りフィールドタイプに柔軟コンテンツが増えたことをご確認ください。

flexible

確認できたら、無事プラグインの有効化まで完了した証拠です。

フィールドタイプを柔軟コンテンツに設定します。

今回はメインコンテンツをお客様の方で自在に編集できるようなシステムを作る前提で説明させて頂きます。

まずは、フィールドラベル、フィールド名を通常通り設定して、フィールドタイプを「柔軟コンテンツ」にします。すると、下の方にレイアウトという項目が出現します。レイアウトはマウスを合わせるとラベルすぐ下に追加や削除等のリンクが表示され、いくつでも追加や削除が可能です。

ここを以下の画像のようにlabelに日本語、nameに半角英数で入力します。nameが出力の際必要になります。

displayで管理画面上で項目が縦と横どちらに並べるかの設定ができます。

そしてそのすぐ下にまたフィールドの設定欄があります。ここにひとつのパーツとして表示させるカスタムフィールドを設定します。

◆その他の設定

Button Label=ボタンのデフォルトテキストAdd Rowを変更することができます。

Minimum Layouts=全レイアウトの最小数

Maximum Layouts=全レイアウトの最大数

※ここで設定できる項目はすべて管理画面に関する設定です。

編集画面を見てみよう

実際に編集ページを見てみましょう。

エディタの下にこのような項目が出てくれば成功です。もし出てこなければ前回説明した位置の設定を見なおしてみてください。

fxf

そしてパーツの追加ボタン(Add Row)をクリックすると以下の画像の通り設定したレイアウトの一覧が表示されます。

fxf2

そして例として見出しを選択します。すると以下の画像の通り見出しのフィールドが表示されます。

fxf3

そして、当然ですがこちらを入力して更新してもまだ反映されません。

phpファイルへ出力コードを入力する必要があるのです。

出力の方法

出力する際のコードは以下のとおりです。

<?php while(has_sub_field('フィールド名')) : ?>
  <?php if(get_row_layout() == 'レイアウト名1') : ?>
    <?php the_sub_field('サブフィールド名1'); ?>
  <?php elseif(get_row_layout() == 'レイアウト名2') : ?>
    <?php the_sub_field('サブフィールド名2'); ?>
  <?php endif; ?>
<?php endwhile; ?>

フィールド名にメインフィールドのフィールド名を入れます。レイアウト名1は柔軟コンテンツのレイアウト内nameの内容を入れます。サブフィールド名はレイアウト内のカスタムフィールドのフィールド名を入れます。

ifは上記の通りレイアウトの数だけ必要になります。

まとめ

このプラグインは、Wordpressでの更新の敷居を下げるために非常に重要なツールだと思います。

金額的にも日本円で2,000円程度なので是非とも購入されることをおすすめします。(PayPalもしくはクレジットカード決済のみのようです。)


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アカウント