カスタムフィールドのプラグイン「Smart Custom Fields」は繰り返しフィールドが無料

デイトラ卒業制作で紹介されていたのは「Advanced Custom Fields PRO」でしたね。インストールして使い始めましたが、ちょっと気になる「繰り返しフィールド」というワード…なんとこれ有料版にしかない機能でした!!よく見るとインストールしたものは「PRO」がありませんでした

カスタムフィールドって何？

WordPressの投稿には「タイトル」があって「本文」を書いていきます。「画像」や「code」を乗せることも出来ますが、例えば”同じレイアウト”の各名称が異なる「メニュー表やカタログと作りたい」時に商品名や価格の入力だけで済んだら便利ですよね、そういった「型」がカスタムフィールドだと思ってください。

これがあると「html？何それ？」というコードが書けない方でも「商品名って書いてあるから、ここに商品名を入力するんでしょ」がわかり使いやすくなるわけです。学習段階ではイメージすることは少ないですが、「仕事につなげる」ことを想定すれば、html・cssに触ったことない「お客さん」のためにもカスタムフィールドは習得する必要がありますね。

デイトラ卒業制作ではTOP・STORY・CAST・COMMENTと複数箇所使いますので、避けては通れません。CAST(出演者一覧)を例にとると「写真」「国籍」「名前」「肩書き」「紹介文」の項目で何人も作成し、さらにそれをCAST・MUSICIAN・STAFFでそれぞれ設置して入力していきます。しかしいきなりではなく、

既にcssでclassを付けてスタイルは当たっていますので、フィールドで入力した内容がその箇所で同じように出力されます。あとからstyle.cssを調節することも可能です。

繰り返しフィールドって何？

実は今までの説明で繰り返しフィールドの領域にも入っていまして、通常のカスタムフィールドでは「１個」「１回」しか作れないんです。「は？」ですよね、僕もそうでした。

例えば、「会社概要」のページを作る場合は「会社名」「設立年」「代表者名」「事業内容」「資本金」「グループ会社」などの項目でしょうか、このページは１回しか表示しないですよね。言い換えるならこのフィールドは1個使えればいいですよね。もちろんこれらの内容を書き換えることはできますよ、固定ページ「会社概要」から「取引先が変わったから…ここを書き換えるのね」と入力するだけで簡単に。

「じゃあ、さっきのメニュー表はどうするの？メニューはいくつもあるんだけど…」「出演者だって何人もいるだろ」ですよね、「メニュー表・フード１」「メニュー表・フード２」……と品数分フィールドを作れば一応作れますがひとつひとつ同じ項目を設定してすっごい面倒くさいと思います。そこで「繰り返し」なんです。ただ「ACF 繰り返しフィールド」と検索すると無料版では使えないとのこと…アップグレードつまりは有料…こりゃまずい…

Smart Custom Fieldsってどう使うの？

「そこをなんとか無料で…」と探すとあっさり見つかりました。「無料で繰り返しフィールドが使えるプラグイン“Smart Custom Fields”」というわけでインストールし、ここから本題です。

「新規追加」から「タイトルを追加」ここでは“著名人コメント”を例にします。

「フィールドを追加」しますが、ここで「繰り返し」は“ON”になりません、あとで出来るので情報を入力していきましょう。赤い「＊」は「★」かわかりませんが、必須項目です。「グループ名」「名前」はあとで出力する場面でエディタに記入する際にも登場します。

「タイプ」でよく使うのはテキスト・テキストエリア・画像あたりでしょうか。「サブフィールドを追加」し「肩書き」「コメント」を作ります。

「公開」を押すと自動で「繰り返し」が“ON”になりましたが、なぜこのタイミング？”著名人コメント”というカスタムフィールドは「名前」「肩書き」「コメント」という項目を持ち、それをを繰り返し設定できる機能を持っていることになりました。これで「##という肩書きの○○さんが~~~というコメントをしてます」が表現できますね。

“どこで使うのか”を決める「表示条件」は“固定ページ”にして下の窓から“著名人コメント”を選択すると、「“著名人コメント”というタイトルの固定ページ」で「”著名人コメント”という繰り返しフィールド」が使えるようになります。同じ名前ですみません…

「⊕」を押せば新たなフィールドが追加されます、これが「繰り返し」!!このための機能です。先ほどの例だと「メニュー表・フード２」「メニュー表・フード3」が「⊕」を押すだけで作られていきます。

ここまでが入力作業でした。

ここからそれをphpファイルに出力する工程にはいります。プラグイン「ACF」の方をそこまで使ってないので詳しくないですが、出力の書き方が少し異なります。get_field(‘’)とか使ってました。詳しくは「ACF 出力　書き方」などで検索してください。

今回はcomments.htmlの内容をコピーしてpage-comments.phpに貼り、該当箇所を書き換えていくことをイメージしてください。htmlとphp書き換え後はこうなります。

<div class="row">
    <div class="each-comment">
      <div class="each-comment-head">
        <div class="comment-person">名前由紀子</div>
        <div class="comment-position">大学教授</div>
      </div>
      <div class="each-comment-body">
        <p>すばらしい物語です!生命の息吹を感じ、生きる活力が湧きます</p>
      </div>
    </div>
</div>

<div class="row">
  <?php
    $field_group = SCF::get('comments');
    foreach ($field_group as $field) {
  ?>
    <div class="each-comment">
      <div class="each-comment-head">
        <div class="comment-person"><?php echo $field['name']; ?></div>
        <div class="comment-position"><?php echo $field['position']; ?></div>
      </div>
      <div class="each-comment-body">
        <p><?php echo $field['comment']; ?></p>
      </div>
    </div>
  <?php } ?>
</div>

書ける前に“読めること”が重要だというのが持論ですが、読んでいきましょう。

getやforeachをphpで起動してますが、それをどこに書くかも悩みました。「これはどこでもいいんじゃね？」と思いこのsectionの1番上に書きましたが、うまく表示されませんでした…今回は大外枠をrowで囲いましたが、もっとわかりやすい効率的な書き方があったかも…<?php } ?>でforeachを閉じているのですが、なんか不自然ですよね。皆さんも色々試してみてください。

他の箇所も同様に’position’や’comment’というここはカスタムフィールドで設定した’名前’でしたね。必須項目になっていたのを覚えているでしょうか？’ラベル’は使いませんでしたが、付けておいた方が管理しやすいと思います。’タイプ’の「テキスト」と「テキストエリア」に違いはないようですが、問題は「画像」です。

画像・背景画像の出力

デイトラ卒業制作の「STORY」ページでも繰り返しカスタムフィールドを使いましたが、基のhtmlでbackground-imageとしていたため、ここは背景画像として出力しようと取り掛かりました。今度は固定ページ「ストーリー」で作ったカスタムフィールドの話に代わりますよ。

<div class="each-story” style="background-image:url(<?php echo wp_get_attachment_url($field['img']); ?>);">

背景画像を出力する際に「style.cssにSCFでforeachなんて無理じゃね…」と思いますよね。その通りでした、divタグの中にstyle=””で書きます。wp_get_attachment_urlの似たような書き方があり、この部分で30分くらい躓きました。そしてブラウザで確認してみると画像の大きさも異なるため、表示したかった背景画像は３つあったのですが、サイズがバラバラ…cssでbackground-sizeやbackground-positionを変更しても３つすべてにスタイルが効いてしまうため、この方法は断念…

次に試したのが「普通の画像」で出力、つまりimgタグですね。

<?php
     $field_group = SCF::get('stories');
     foreach ($field_group as $field) {
       $image = wp_get_attachment_image_src($field['img'], 'large');
     ?>
　　　略
        <div class="each-story-img">
          <img src="<?php echo $image[0];?>" alt="">
        </div>
	　略
<?php } ?>

途中の部分はカットしましたが、大事なのは新たな変数の登場です。読んでいきます。

ちなみにストーリーという名前のカスタムフィールドを作りました。画像の場合はこんなカンジの設定ですが、理解しやすい形に名称を付け替えても構いません。例えばimgよりimageやpictureの方が馴染みがあるという方もいらっしゃるのでは？

となります。先ほどとは少し違うwp_get_attachment_image_srcが出ますが、そりゃこの違いに悩みますよね…[0]も付けないと画像は出ないので注意してください。気を付ける点はまだあります。背景画像も考えていたくらいですから表示領域は広いのですが、「ぼや～」とどうも画像がぼやけるんですよ…この原因はサイズ指定でした。初めは’large’を付けていなくて、そうすると画像は150×150の状態で出力となるようで、それを無理に800~900pxに引き伸ばしてしまうことになり画像がぼやけていたようです。公式CODEXにもありますが、$sizeはthumbnail, medium, large, fullとありますのでサイズで納得いかない時は試してみてください。

サイト運営において自分でブログもやってますし、お客さん目線で管理画面からデータを書き換えられる「カスタムフィールド」は身につけておくべきスキルだと感じました。今回は「Smart Custom Fields」は繰り返しフィールドが無料ということで使用していますが、デイトラで紹介されていた「Advanced Custom Fields」も人気のプラグインであり、そちらの情報は数多くヒットしますので、困ったときには助けとなるはずです。どちらも吟味し検討してみてください。