カスタムフィールドを使ってハッピーになろう

1. カスタムフィールドを使ってハッピーになろう!!! 2015年6月24日松戸WordPress部写真素材ぱくたそ https://www.pakutaso.com

2. 名前　三柴誠一郎出身　愛媛県拠点　千葉県松戸市趣味　カメラ、旅、料理、滝めぐり、宅飲み特徴　絶望的に方向音痴自己紹介高知城（鷹城）彦根城（金亀城）タコスパーティー焼き鳥パーティー

3. 経歴　1996年にIT会社へ入社。業務システムの企画・構築・運用等の　経験を経て2014年からフリーランスとして活動中。活動　松戸でWordPressに関するセミナーを運営　　【Facebook】 https://www.facebook.com/groups/wordpress.banana.cluster/ 　　【Doorkeeper】 https://wpmatsudo.doorkeeper.jp/ 経歴・活動

4. カスタムフィールドとはカスタムフィールドのプラグイン実際に使ってみよう（ハンズオン）本日のテーマ

6. WordPressの入力画面入力項目は「タイトル」と「本文」

7. とってもシンプル

8. でもだいたいのサイトって決まった項目・形式で入力するページがあるはず

9. 不動産サイト  物件ページ・・・外観イメージ、広さ、価格  飲食店サイト  　メニューページ・・・食品イメージ、料理名、価格、カロリー美容院サイト  　スタッフページ・・・スタッフ写真、名前、趣味などなど。。。たとえば・・・

10. テキストエディタやHTMLタグで繰り返し書いて行くのは結構手間じゃないですか？

11. そんな時はカスタムフィールドを使うと

12. ハッピー! 写真素材ぱくたそ https://www.pakutaso.com

13. カスタムフィールドは WordPress の基本機能にある

14. 固定（投稿）ページの入力画面に表示される

15. ・・・よく解らない

16. そんな時はプラグインを使うと

17. ハッピー!! 写真素材ぱくたそ https://www.pakutaso.com

19. よく使われているだろうプラグイン３選！

20. Advanced Custom Fields

21. Smart Custom Fields

22. Custom Field Suite

23. 基本情報

24. Advanced Custom Fields (ACF) Smart Custom Fields (SCF) Custom Field Suite (CFS) 最新バージョン 4.4.2 1.4.0 2.4.3 最新更新日 2015-5-20 2015-4-29 2015-5-13 要件 3.5.0 以降 3.9 以降 3.8 以降ダウンロード数 3,537,173 3,331 135,410 インストール数 900,000+ 1,000+ 20,000+ 作者 elliotcondon さん Takashi Kitajima さん Matt Gibbs さん MW WP Form の作者さん ※2015年6月24日調べ

25. スクリーンショット

26. フィールド部 Advanced Custom Fields フィールド部入力フォームで表示されるラベルやタイプ（テキストとかイメージとか）を設定。

27. Advanced Custom Fields オプション部表示するページタイプ（固定とか投稿とか）や表示位置を設定。

28. Smart Custom Fields フィールド部

29. Smart Custom Fields オプション部

30. Custom Field Suite フィールド部

31. Custom Field Suite オプション部

32. フィールドタイプ

33. Advanced Custom Fields (ACF) Smart Custom Fields (SCF) Custom Field Suite (CFS) フィールドタイプ基本テキストテキストエリア数値メールパスワード Content Wysiwygエディタ画像ファイル選択肢セレクトボックスチェックボックスラジオボタン真偽 Relational ページリンク投稿オブジェクト関連タクソノミーユーザー Jquery Google Map デイトピッカーカラーピッカーレイアウトメッセージタブ（繰り返し）基本フィールド真偽値テキストテキストエリア選択フィールドチェックボックスラジオボタンセレクトボックスコンテンツフィールドファイル画像 WYSIWYG その他フィールドカラーピッカー日付ピッカーリレーション単一行テキストテキストエリアリッチエディタハイパーリンク日付フォーマットカラーピッカー真/偽セレクトボックス関連ポストユーザーファイルのアップロードループタブ

34. Advanced Custom Fields フィールド部基本テキストテキストエリア数値メールパスワード

35. Advanced Custom Fields フィールド部 Content Wysiwygエディタ画像ファイル

36. Advanced Custom Fields フィールド部選択肢セレクトボックスチェックボックスラジオボタン真偽

37. Advanced Custom Fields フィールド部 Relational ページリンク投稿オブジェクト関連タクソノミーユーザー

38. Advanced Custom Fields フィールド部 Jquery Google Map デイトピッカーカラーピッカー

39. Advanced Custom Fields フィールド部レイアウトメッセージタブ

40. Smart Custom Fields 基本フィールド真偽値テキストテキストエリア選択フィールドチェックボックスラジオボタンセレクトボックス

41. Smart Custom Fields コンテンツフィールドファイル画像 WYSIWYG その他フィールドカラーピッカー日付ピッカーリレーション

42. Smart Custom Fields 繰り返し

43. Custom Field Suite 単一行テキストテキストエリアリッチエディタ

44. Custom Field Suite ハイパーリンク日付フォーマットカラーピッカー真/偽セレクトボックス

45. Custom Field Suite 関連ポスト選択ユーザーファイルのアップロード

46. Custom Field Suite ループタブ

47. どれが簡単？どれが便利？写真素材ぱくたそ https://www.pakutaso.com

48. ① カスタムフィールドを作成する ② テンプレートファイルを編集する  　※カスタムフィールドが表示されるようにする ③ ページを作成する（カスタムフィールドに値を入力） ④ ページを表示して確認する基本的な使い方は同じここでの書き方がプラグインによって少し違ってくる

49. サイト内容にあったもの？でも実際に使ってみてまずは自分の好みを見つけてみよう

50. そうすれば

51. ハッピー!! 写真素材ぱくたそ https://www.pakutaso.com

53. ハンズオンの流れ ① プラグインを導入する ② カスタムフィールドを作成する ③ ページを作成する ④ テンプレートファイルを編集する ⑤ ページを表示する

54. ① プラグイン⇒新規追加 ② プラグインの検索に Custom Field Suite を入力 ③ プラグインを導入するクリック

55. カスタムフィールドを作成する名前ラベルフィールドタイプドラッグしてループ内に移動配置ルールの投稿タイプでpageを指定

56. ページを作成する（例）項目値ショップ情報新松戸バナナ肉店商品リスト（ループ行）商品名バナナハンバーグ販売開始日 2015-06-25 商品イメージ - 商品名バナナ肉販売開始日 2015-07-01 商品イメージ -

57. フィールドの値を取得する  　<?php echo CFS()->get('フィールド名'); ?> ループフィールドの値を取得する  　<?php  　　$loops = CFS()->get('ループフィールド名');  　　foreach ( $loops as $loop ) {  　　　echo $loop['フィールド名'];  　　}  　?> カスタムフィールドの値を取得する Custom Fields Suits の場合

58. テンプレートファイルを編集する（例） <dl> <dt>店舗名：<?php echo CFS()->get('shop'); ?></dt> 　<?php 　$loops = CFS()->get('goods-loop'); 　foreach ( $loops as $loop ) { 　echo '<dd>' . wp_get_attachment_image( $loop['image'] ) . '</dd>'; 　echo '<dd>商品名：' . $loop['goods'] . '</dd>'; 　echo '<dd>販売開始日：' . $loop['date'] . '</dd>'; 　　} ?> </dl> 表示させたい箇所に以下を記入 Twenty Fifteen の場合 content-page.php の22行目 <?php the_content(); ?> の下あたり

59. ページを表示するループフィールド内の画像やテキストが表示されているフィールドのテキストが表示されている

60. フィールドの値を取得する  　<?php the_field('フィールド名'); ?> カスタムフィールドの値を取得する Advanced Custom Fields の場合 Smart Custom Fields の場合フィールドの値を取得する  　<?php echo esc_html( SCF::get( 'フィールド名' ) ); ?> 時間に余裕のある方は、他のプラグインでも試してみてください。

61. ご清聴ありがとうございましたおわり！！

カスタムフィールドを使ってハッピーになろう

Esté a ler uma amostra.

Confira estes a seguir

カスタムフィールドを使ってハッピーになろう

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a カスタムフィールドを使ってハッピーになろう (12)

Mais de Seiichiro Mishiba (9)

Mais recentes (20)