Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
カスタムフィールドを使って
ハッピーになろう!!!
2015年6月24日
松戸WordPress部
写真素材ぱくたそ
https://www.pakutaso.com
名前 三柴 誠一郎
出身 愛媛県
拠点 千葉県松戸市
趣味 カメラ、 旅、 料理、 滝めぐり、宅飲み
特徴 絶望的に方向音痴
自己紹介 高知城(鷹城)
彦根城(金亀城)
タコスパーティー
焼き鳥パーティー
経歴
 1996年にIT会社へ入社。業務システムの企画・構築・運用等の
 経験を経て2014年からフリーランスとして活動中。
活動
 松戸でWordPressに関するセミナーを運営
  【Facebook】 https://www.facebo...
カスタムフィールドとは
カスタムフィールドのプラグイン
実際に使ってみよう(ハンズオン)
本日のテーマ
カスタムフィールドとは
カスタムフィールドのプラグイン
実際に使ってみよう(ハンズオン)
本日のテーマ
WordPressの入力画面
入力項目は「タイトル」と「本文」
とってもシンプル
でもだいたいのサイトって
決まった項目・形式で入力する
ページがあるはず
不動産サイト

物件ページ・・・外観イメージ、広さ、価格

飲食店サイト

 メニューページ・・・食品イメージ、料理名、価格、カロリー
美容院サイト

 スタッフページ・・・スタッフ写真、名前、趣味
などなど。。。
たとえば・・・
テキストエディタやHTMLタグで
繰り返し書いて行くのは
結構手間じゃないですか?
そんな時は
カスタムフィールドを使うと
ハッピー!
写真素材ぱくたそ
https://www.pakutaso.com
カスタムフィールドは
WordPress の
基本機能にある
固定(投稿)ページの
入力画面に表示される
・・・よく解らない
そんな時は
プラグインを使うと
ハッピー!!
写真素材ぱくたそ
https://www.pakutaso.com
カスタムフィールドとは
カスタムフィールドのプラグイン
実際に使ってみよう(ハンズオン)
本日のテーマ
よく使われているだろう
プラグイン3選!
Advanced Custom Fields
Smart Custom Fields
Custom Field Suite
基本情報
Advanced Custom Fields
(ACF)
Smart Custom Fields
(SCF)
Custom Field Suite
(CFS)
最新バージョン 4.4.2 1.4.0 2.4.3
最新更新日 2015-5-20 ...
スクリーンショット
フィールド部
Advanced Custom Fields
フィールド部
入力フォームで表示される
ラベルやタイプ(テキストと
かイメージとか)を設定。
Advanced Custom Fields オプション部
表示するページタイプ(固定とか
投稿とか)や表示位置を設定。
Smart Custom Fields フィールド部
Smart Custom Fields オプション部
Custom Field Suite フィールド部
Custom Field Suite オプション部
フィールドタイプ
Advanced Custom Fields
(ACF)
Smart Custom Fields
(SCF)
Custom Field Suite
(CFS)
フィールドタイプ
基本
テキスト
テキストエリア
数値
メール
パスワード
Cont...
Advanced Custom Fields
フィールド部
基本
テキスト
テキストエリア
数値
メール
パスワード
Advanced Custom Fields
フィールド部
Content
Wysiwygエディタ
画像
ファイル
Advanced Custom Fields
フィールド部
選択肢
セレクトボックス
チェックボックス
ラジオボタン
真偽
Advanced Custom Fields
フィールド部
Relational
ページリンク
投稿オブジェクト
関連
タクソノミー
ユーザー
Advanced Custom Fields
フィールド部
Jquery
Google Map
デイトピッカー
カラーピッカー
Advanced Custom Fields
フィールド部
レイアウト
メッセージ
タブ
Smart Custom Fields
基本フィールド
真偽値
テキスト
テキストエリア
選択フィールド
チェックボックス
ラジオボタン
セレクトボックス
Smart Custom Fields
コンテンツフィールド
ファイル
画像
WYSIWYG
その他フィールド
カラーピッカー
日付ピッカー
リレーション
Smart Custom Fields
繰り返し
Custom Field Suite
単一行テキスト
テキストエリア
リッチエディタ
Custom Field Suite
ハイパーリンク
日付フォーマット
カラーピッカー
真/偽
セレクトボックス
Custom Field Suite
関連ポスト選択
ユーザー
ファイルのアップロード
Custom Field Suite
ループ
タブ
どれが簡単?
どれが便利?
写真素材ぱくたそ
https://www.pakutaso.com
① カスタムフィールドを作成する
② テンプレートファイルを編集する

 ※カスタムフィールドが表示されるようにする
③ ページを作成する(カスタムフィールドに値を入力)
④ ページを表示して確認する
基本的な使い方は同じ
ここでの書き方がプラ...
サイト内容にあったもの?
でも実際に使ってみて
まずは自分の好みを
見つけてみよう
そうすれば
ハッピー!!
写真素材ぱくたそ
https://www.pakutaso.com
カスタムフィールドとは
カスタムフィールドのプラグイン
実際に使ってみよう(ハンズオン)
本日のテーマ
ハンズオンの流れ
① プラグインを導入する
② カスタムフィールドを作成する
③ ページを作成する
④ テンプレートファイルを編集する
⑤ ページを表示する
① プラグイン⇒新規追加
② プラグインの検索に Custom Field Suite を入力
③
プラグインを導入する
クリック
カスタムフィールドを作成する
名前ラベル フィールドタイプ
ドラッグして
ループ内に移動
配置ルールの投稿タイプでpageを指定
ページを作成する(例)
項目 値
ショップ情報 新松戸バナナ肉店
商品リスト (ループ行)
商品名 バナナハンバーグ
販売開始日 2015-06-25
商品イメージ -
商品名 バナナ肉
販売開始日 2015-07-01
商品イメージ -
フィールドの値を取得する

 <?php echo CFS()->get('フィールド名'); ?>
ループフィールドの値を取得する

 <?php

  $loops = CFS()->get('ループフィールド名');

  foreach...
テンプレートファイルを編集する(例)
<dl>
<dt>店舗名:<?php echo CFS()->get('shop'); ?></dt>
 <?php
 $loops = CFS()->get('goods-loop');
 foreach...
ページを表示する
ループフィールド内の
画像やテキストが表示されている
フィールドのテキストが表示されている
フィールドの値を取得する

 <?php the_field('フィールド名'); ?>
カスタムフィールドの値を取得する
Advanced Custom Fields の場合
Smart Custom Fields の場合
フィールドの値を取...
ご清聴ありがとうございました
おわり!!
カスタムフィールドを使ってハッピーになろう
Upcoming SlideShare
Loading in …5
×

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

3,019 views

Published on

松戸WordPress部:2015年6月24日

Published in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. カスタムフィールドを使って ハッピーになろう!!! 2015年6月24日 松戸WordPress部 写真素材ぱくたそ https://www.pakutaso.com
  2. 2. 名前 三柴 誠一郎 出身 愛媛県 拠点 千葉県松戸市 趣味 カメラ、 旅、 料理、 滝めぐり、宅飲み 特徴 絶望的に方向音痴 自己紹介 高知城(鷹城) 彦根城(金亀城) タコスパーティー 焼き鳥パーティー
  3. 3. 経歴  1996年にIT会社へ入社。業務システムの企画・構築・運用等の  経験を経て2014年からフリーランスとして活動中。 活動  松戸でWordPressに関するセミナーを運営   【Facebook】 https://www.facebook.com/groups/wordpress.banana.cluster/   【Doorkeeper】 https://wpmatsudo.doorkeeper.jp/ 経歴・活動
  4. 4. カスタムフィールドとは カスタムフィールドのプラグイン 実際に使ってみよう(ハンズオン) 本日のテーマ
  5. 5. カスタムフィールドとは カスタムフィールドのプラグイン 実際に使ってみよう(ハンズオン) 本日のテーマ
  6. 6. WordPressの入力画面 入力項目は「タイトル」と「本文」
  7. 7. とってもシンプル
  8. 8. でもだいたいのサイトって 決まった項目・形式で入力する ページがあるはず
  9. 9. 不動産サイト
 物件ページ・・・外観イメージ、広さ、価格
 飲食店サイト
  メニューページ・・・食品イメージ、料理名、価格、カロリー 美容院サイト
  スタッフページ・・・スタッフ写真、名前、趣味 などなど。。。 たとえば・・・
  10. 10. テキストエディタやHTMLタグで 繰り返し書いて行くのは 結構手間じゃないですか?
  11. 11. そんな時は カスタムフィールドを使うと
  12. 12. ハッピー! 写真素材ぱくたそ https://www.pakutaso.com
  13. 13. カスタムフィールドは WordPress の 基本機能にある
  14. 14. 固定(投稿)ページの 入力画面に表示される
  15. 15. ・・・よく解らない
  16. 16. そんな時は プラグインを使うと
  17. 17. ハッピー!! 写真素材ぱくたそ https://www.pakutaso.com
  18. 18. カスタムフィールドとは カスタムフィールドのプラグイン 実際に使ってみよう(ハンズオン) 本日のテーマ
  19. 19. よく使われているだろう プラグイン3選!
  20. 20. Advanced Custom Fields
  21. 21. Smart Custom Fields
  22. 22. Custom Field Suite
  23. 23. 基本情報
  24. 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. 25. スクリーンショット
  26. 26. フィールド部 Advanced Custom Fields フィールド部 入力フォームで表示される ラベルやタイプ(テキストと かイメージとか)を設定。
  27. 27. Advanced Custom Fields オプション部 表示するページタイプ(固定とか 投稿とか)や表示位置を設定。
  28. 28. Smart Custom Fields フィールド部
  29. 29. Smart Custom Fields オプション部
  30. 30. Custom Field Suite フィールド部
  31. 31. Custom Field Suite オプション部
  32. 32. フィールドタイプ
  33. 33. Advanced Custom Fields (ACF) Smart Custom Fields (SCF) Custom Field Suite (CFS) フィールドタイプ 基本 テキスト テキストエリア 数値 メール パスワード Content Wysiwygエディタ 画像 ファイル 選択肢 セレクトボックス チェックボックス ラジオボタン 真偽 Relational ページリンク 投稿オブジェクト 関連 タクソノミー ユーザー Jquery Google Map デイトピッカー カラーピッカー レイアウト メッセージ タブ (繰り返し) 基本フィールド 真偽値 テキスト テキストエリア 選択フィールド チェックボックス ラジオボタン セレクトボックス コンテンツフィールド ファイル 画像 WYSIWYG その他フィールド カラーピッカー 日付ピッカー リレーション 単一行テキスト テキストエリア リッチエディタ ハイパーリンク 日付フォーマット カラーピッカー 真/偽 セレクトボックス 関連ポスト ユーザー ファイルのアップロード ループ タブ
  34. 34. Advanced Custom Fields フィールド部 基本 テキスト テキストエリア 数値 メール パスワード
  35. 35. Advanced Custom Fields フィールド部 Content Wysiwygエディタ 画像 ファイル
  36. 36. Advanced Custom Fields フィールド部 選択肢 セレクトボックス チェックボックス ラジオボタン 真偽
  37. 37. Advanced Custom Fields フィールド部 Relational ページリンク 投稿オブジェクト 関連 タクソノミー ユーザー
  38. 38. Advanced Custom Fields フィールド部 Jquery Google Map デイトピッカー カラーピッカー
  39. 39. Advanced Custom Fields フィールド部 レイアウト メッセージ タブ
  40. 40. Smart Custom Fields 基本フィールド 真偽値 テキスト テキストエリア 選択フィールド チェックボックス ラジオボタン セレクトボックス
  41. 41. Smart Custom Fields コンテンツフィールド ファイル 画像 WYSIWYG その他フィールド カラーピッカー 日付ピッカー リレーション
  42. 42. Smart Custom Fields 繰り返し
  43. 43. Custom Field Suite 単一行テキスト テキストエリア リッチエディタ
  44. 44. Custom Field Suite ハイパーリンク 日付フォーマット カラーピッカー 真/偽 セレクトボックス
  45. 45. Custom Field Suite 関連ポスト選択 ユーザー ファイルのアップロード
  46. 46. Custom Field Suite ループ タブ
  47. 47. どれが簡単? どれが便利? 写真素材ぱくたそ https://www.pakutaso.com
  48. 48. ① カスタムフィールドを作成する ② テンプレートファイルを編集する
  ※カスタムフィールドが表示されるようにする ③ ページを作成する(カスタムフィールドに値を入力) ④ ページを表示して確認する 基本的な使い方は同じ ここでの書き方がプラグイン によって少し違ってくる
  49. 49. サイト内容にあったもの? でも実際に使ってみて まずは自分の好みを 見つけてみよう
  50. 50. そうすれば
  51. 51. ハッピー!! 写真素材ぱくたそ https://www.pakutaso.com
  52. 52. カスタムフィールドとは カスタムフィールドのプラグイン 実際に使ってみよう(ハンズオン) 本日のテーマ
  53. 53. ハンズオンの流れ ① プラグインを導入する ② カスタムフィールドを作成する ③ ページを作成する ④ テンプレートファイルを編集する ⑤ ページを表示する
  54. 54. ① プラグイン⇒新規追加 ② プラグインの検索に Custom Field Suite を入力 ③ プラグインを導入する クリック
  55. 55. カスタムフィールドを作成する 名前ラベル フィールドタイプ ドラッグして ループ内に移動 配置ルールの投稿タイプでpageを指定
  56. 56. ページを作成する(例) 項目 値 ショップ情報 新松戸バナナ肉店 商品リスト (ループ行) 商品名 バナナハンバーグ 販売開始日 2015-06-25 商品イメージ - 商品名 バナナ肉 販売開始日 2015-07-01 商品イメージ -
  57. 57. フィールドの値を取得する
  <?php echo CFS()->get('フィールド名'); ?> ループフィールドの値を取得する
  <?php
   $loops = CFS()->get('ループフィールド名');
   foreach ( $loops as $loop ) {
    echo $loop['フィールド名'];
   }
  ?> カスタムフィールドの値を取得する Custom Fields Suits の場合
  58. 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. 59. ページを表示する ループフィールド内の 画像やテキストが表示されている フィールドのテキストが表示されている
  60. 60. フィールドの値を取得する
  <?php the_field('フィールド名'); ?> カスタムフィールドの値を取得する Advanced Custom Fields の場合 Smart Custom Fields の場合 フィールドの値を取得する
  <?php echo esc_html( SCF::get( 'フィールド名' ) ); ?> 時間に余裕のある方は、他のプラグインでも試してみてください。
  61. 61. ご清聴ありがとうございました おわり!!

×