2016/1/16 WordBench奈良のセッションで使用したスライド

1. プラグイン Advance Custum Fieldsを学ぶ
WordBench奈良 2016年度 第1回
2016/1/16

2. はじめに
•今回の内容はＦＴＰクライアントを使ったり、ご自身の
PCの仮想サーバでファイルの上げ下げができる方への
お話です
•しかし、ＰＨＰの関数について詳しくはやりません

3. 髙井 茂樹
@shinchayaTakai Shigeki
株式会社 アイティ・プローブ
フロントエンドエンジニア
Webデザイナー

4. 私とＦacebookでお友達になっていただけますと、
もれなくウォールが舞妓さんだらけになります。

5. 好きが昂じて芸舞妓さんに拙いながら似顔絵をたくさん贈ってきました。

6. LINEスタンプもつくっちゃいました
「まいこらいふ」

7. 大
阪
大
阪
じつは、でも私は奈良県人でも京都府民でもなく、
大阪生まれ大阪育ちでいまも大阪に住んでいます(^^;

8. WordPress4.4
Release!
何が変わったの？

9. 1.新しいデフォルトテーマ - Twenty Sixteen
2.レスポンシブ画像: 自動でどのサイズ適切な画像サイズを
3.WordPress コンテンツの埋め込み
4.REST API

10. そもそもカスタムフィールドって何？

11. 投稿画面の下のほうにいる

12. いない？

13. 表示オプションを開く

15. 誰？

16. 何をするものなのか？

17. 例えば、こんなとき
• 商品、アイテム紹介
• お店スタッフの紹介
• チェーン店店舗案内 とか

18. 写真

19. 写真

20. 説明文説明文説明文説明文説明文説明文説明文説明文
説明文説明文説明文説明文説明文説明文説明文説明文説明文
説明文説明文説明文説明文説明文説明文
写真

21. 説明文説明文説明文説明文説明文説明文説明文説明文
説明文説明文説明文説明文説明文説明文説明文説明文説明文
説明文説明文説明文説明文説明文説明文
写真
•特定の約束事(フォーマット)がある情報の入力
•会社やお店のホームページには欠かせないスタイル

22. クライアントはＷｅｂの素人
• 「タイトル」と「記事」のフォームだけ
見本になるページを用意してコピペや複
製をして書いてもらう？

23. そして私の出番！

24. どうやって使うの？^^;

25. https://wpdocs.osdn.jp/カスタムフィールドの使い方

26. ・・・。

27. 安心してください！

28. ＡＣＦがありますよ！
Advanced Custuom Fields

30. ダウンロード数 400万超！

31. 何がすごい？

32. 何がすごい？
直観的につかえる！

33. 何がすごい？
直観的につかえる！
投稿画面がかわる → クライアント・ユーザーが入力しやすい

34. 何がすごい？
直観的につかえる！
投稿画面がかわる → クライアント・ユーザーが入力しやすい
しかも注釈付きにできる

35. 何がすごい？
直観的につかえる！
投稿画面がかわる → クライアント・ユーザーが入力しやすい
しかも注釈付きにできる
制作者も直観的につかえる

36. 何がすごい？
直観的につかえる！
投稿画面がかわる → クライアント・ユーザーが入力しやすい
しかも注釈付きにできる
制作者も直観的につかえる
追加削除が簡単
並べ替えもできる

37. 何がすごい？
直観的につかえる！
投稿画面がかわる → クライアント・ユーザーが入力しやすい
しかも注釈付きにできる
制作者も直観的につかえる
追加削除が簡単
並べ替えもできる
ただし、少々知識はいる
プラグイン管理画面での操作
テンプレート作成

38. 何がすごい？
直観的につかえる！
投稿画面がかわる → クライアント・ユーザーが入力しやすい
しかも注釈付きにできる
制作者も直観的につかえる
追加削除が簡単
並べ替えもできる
ただし、少々知識はいる
プラグイン管理画面での操作
テンプレート作成

39. きょうはそこを学びます！

40. 課題 「ネコに関する調査」
さわってみましょう

41. 課題 「ネコに関する調査」
1.見本のＨＴＭＬをもとにプラグイン側で入力
項目をつくる
さわってみましょう

42. 課題 「ネコに関する調査」
1.見本のＨＴＭＬをもとにプラグイン側で入力
項目をつくる
2.見本のＨＴＭＬをもとに専用の投稿表示テン
プレートをつくる
さわってみましょう

43. 課題 「ネコに関する調査」
1.見本のＨＴＭＬをもとにプラグイン側で入力
項目をつくる
2.見本のＨＴＭＬもとに専用の投稿表示テンプ
レートをつくる
3.一覧ページ(カテゴリーindex)をつくる
さわってみましょう

44. <?php the_field('カスタムフィールド名'); ?>
Advance Custum fieldsの出力

45. 画像だけはそうはいかなくて (記入の一例)
<?php
$attachment_id = get_field('カスタムフィールド名');
$size = "thumbnail"; // (thumbnail, medium, large, full or custom size)
$image = wp_get_attachment_image_src( $attachment_id, $size );
//画像IDから画像を表示 $sizeに表示サイズを設定（デフォルトは'thumbnail' 他
にはmedium, large, full 他）
echo wp_get_attachment_image($image_id, $size);
?>
Advance Custum fieldsの出力

46. <?php if( in_category( 'cat' )) : ?>
このカテゴリの場合に表示するもの
<?php eｌse; ?>
それ以外の場合に表示するもの
<?php endif; ?>
特定カテゴリーに属する投稿の場合

47. category-cat.php
特定カテゴリーのindex

48. ご清聴ありがとうございました
@shinchayaTakai Shigeki