WordBench埼玉LT -ACF Repeater Field- 20140412

27
ACF Repeater Field で幸せになれるかもしれない話 2014/04/12 Yutaro Miyazaki

Transcript of WordBench埼玉LT -ACF Repeater Field- 20140412

Page 1: WordBench埼玉LT -ACF Repeater Field- 20140412

ACF の Repeater Field で幸せになれるかもしれない話2014/04/12 Yutaro Miyazaki

Page 2: WordBench埼玉LT -ACF Repeater Field- 20140412

Yutaro Miyazaki 無職で大学を卒業して早2年…フリーの

ウェブデザイナー/エンジニア

としてなんとかやっています。

About me

Page 3: WordBench埼玉LT -ACF Repeater Field- 20140412
Page 4: WordBench埼玉LT -ACF Repeater Field- 20140412

カスタムフィールド使うなら ACF♪

Page 5: WordBench埼玉LT -ACF Repeater Field- 20140412

てなんじゃ ?

Page 6: WordBench埼玉LT -ACF Repeater Field- 20140412
Page 7: WordBench埼玉LT -ACF Repeater Field- 20140412

• 管理が楽

• 適用パターンが細かく設定可能

• スタイル当てなくても割となんとかなる

• テーマファイルへの記述がシンプル

Page 8: WordBench埼玉LT -ACF Repeater Field- 20140412

そんなA C Fが

Page 9: WordBench埼玉LT -ACF Repeater Field- 20140412

“Supercharge your website!”

Page 10: WordBench埼玉LT -ACF Repeater Field- 20140412

と謳うアドオン達がある

Page 11: WordBench埼玉LT -ACF Repeater Field- 20140412

Repeater Field• 有料アドオン

• $25-

• Multi-site license

• You may use Multiple any website projects

• Include in a not free WP theme or Plugin

Page 12: WordBench埼玉LT -ACF Repeater Field- 20140412

見せて貰おうか Repeater Fieldの

性能とやらを

Page 13: WordBench埼玉LT -ACF Repeater Field- 20140412

(ここですかさずブラウザに切り替えてデモ)

Page 14: WordBench埼玉LT -ACF Repeater Field- 20140412

もしこんなことになっていたら...

• 投稿画面内に不要なカスタムフィールドがドッサリ

• WPエディタ内がガチガチhtmlで編集担当ポカーン

• ビジュアルエディタの使い方を何度も聞かれる

• 「表示崩れちゃったんですけど」→タグ消されてる

Page 15: WordBench埼玉LT -ACF Repeater Field- 20140412

それ、これで解決できるかも

Page 16: WordBench埼玉LT -ACF Repeater Field- 20140412

値の取得は非常に簡単で、通常のACF <?php the_field( 'フィールド名' ); ?> に対して、 <?php the_sub_field( 'フィールド名' ); ?> でおk。 !ドキュメントもサンプルコード付きで充実しています。 http://www.advancedcustomfields.com/add-ons/repeater-field/

ちなみに...

Page 17: WordBench埼玉LT -ACF Repeater Field- 20140412

あとはキミのアイデア次第だ

• スケジュールに

• イベント参加者とか登壇者とか

• スポーツ行事のリザルトとか

• アイテムのサイズ入力欄とか

• 画像ギャラリーとか

Page 18: WordBench埼玉LT -ACF Repeater Field- 20140412

(サンプルサイト作るのが面倒だったので)

実際の導入例を見てみましょう

Page 19: WordBench埼玉LT -ACF Repeater Field- 20140412

例えばこんな時

Page 20: WordBench埼玉LT -ACF Repeater Field- 20140412

Repeater Fieldの中にRepeater Fieldを作ることも

Page 21: WordBench埼玉LT -ACF Repeater Field- 20140412

2重のループで幸せ

Page 22: WordBench埼玉LT -ACF Repeater Field- 20140412

イメージギャラリーにしてみる

Page 23: WordBench埼玉LT -ACF Repeater Field- 20140412

スキップしても使える幸せ

Page 24: WordBench埼玉LT -ACF Repeater Field- 20140412

シンプルだから、どうにでも書ける幸せ

Page 25: WordBench埼玉LT -ACF Repeater Field- 20140412

最初の1枚を取ってくるときは

Page 26: WordBench埼玉LT -ACF Repeater Field- 20140412

配列で受け取れる幸せ

Page 27: WordBench埼玉LT -ACF Repeater Field- 20140412

注意カスタムフィールド及びACF Repeater Fieldは用法用量を守って正しく利用しましょう。

参考

• Advanced Custom Fieldsプラグインを使う際の注意点などhttp://notnil-creative.com/blog/archives/1752

• 製作者に知っていて欲しいWordPressのカスタムフィールドと検索の話http://goo.gl/bVxr4M