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.4.1 第16回 松戸WordPress部
カスタムフィールドで
親切な管理画面を作ろう ~初級編~
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 管理画面を使いやすくする、さまざまな方法
 カスタムフィールドとは?
 Advanced Custom Fields とは?
 基本的な使い方
 管理画面のレイアウト変更、メッ...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 ウェブ制作に関する情報交換の場
- 今までのまとめ http://wp-m.org/
- 参加申し込み https://wpmatsudo.doorkeeper.jp/
- Faceb...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 小久保勇樹(こくぼ ゆうき)
 経歴
- 1984年 埼玉県生まれ
- 社会学部 → 文学部 → 中退 → 自転車日本縦断+アラスカ縦断
- 2009年 結婚式場カメラマン(はじめて...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 WordPressを初めとして、ウェブ制作に関する情報交換の場
- 今までのまとめ http://wp-m.org/
- 参加申し込み https://wpmatsudo.doorke...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 WordPressは初心者には難しい
- 画像の入れ方がわからない
- メディア? アイキャッチ画像??
- 機能が多すぎて何がなんだか
- すっきりさせたい!
 簡単に投稿できるよ...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 TinyMCE Advanced
管理画面を使いやすくする、さまざまな方法
好きなボタンだけ配置できる!
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 AddQuickTag
管理画面を使いやすくする、さまざまな方法
新しいボタンを作って配置できる!
それでも――
使い方が分からない、と
問い合わせの電話が来る
もっと分かりやすい画面を
作らなければ……!
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 WordPressを初めとして、ウェブ制作に関する情報交換の場
- 今までのまとめ http://wp-m.org/
- 参加申し込み https://wpmatsudo.doorke...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 WordPressを初めとして、ウェブ制作に関する情報交換の場
- 今までのまとめ http://wp-m.org/
- 参加申し込み https://wpmatsudo.doorke...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 好きな「名前」と「値」を作って、表示できる
- WordPress標準のカスタムフィールドは、とてもシンプル
- そのままだと、ちょっと使いづらい
カスタムフィールドとは?
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 カスタムフィールドの使い勝手を格段に高めてくれるプラグイン
- 公式サイト http://www.advancedcustomfields.com/
- 作者はオーストラリア・メルボル...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
ACFを使ってみよう
 固定ページや投稿に、カスタムフィールドを追加してみよう
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 ACFのデータを取り出す関数、2つ
 get_field()
- 基本的にはこちらを使う
- 取り出したデータを加工したいときに用いる関数
- 表示したいときは自分で echo する...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 画像をアップロードして、表示させてみよう
 フィールド作成時の設定
- 返り値は「画像オブジェクト」「画像 URL」「画像 ID」の3種類
- どれを選んでも良いが、今回は「画像 I...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 メッセージ
- 管理画面の使い方を説明する文章などを表示
 プレースホルダ
- フィールド内に、入力のヒントをうっすらと表示
 フィールド記入のヒント
- ラベルの下などに説明文を...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 タブ
- 表示したいフィールドが多いとき、機能ごとにタブを作って整理
 真偽値
- チェックをつけると、隠れていたフィールドが表示
 画面に表示しないアイテム
- コンテンツエディ...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 the_field() を使わないほうがいい理由「エスケープ」
- 入力したテキストをそのまま表示すると、セキュリティ上の問題がある
- クロスサイトスクリプティング(XSS)対策がさ...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 WordPressで使える3つのエスケープ関数
 esc_html()
- 画面に表示する文字列に対し、HTMLタグなどをエスケープ
 esc_attr()
- HTMLタグの属性...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 Googleマップを表示してみよう
- 返り値として緯度経度を取得し GoogleMaps JavaScript API で地図表示
 カスタムタクソノミーと連携してみよう
- カス...
カスタムフィールドで親切な管理画面を作ろう ~初級編~
 フロントエンドで使うACF
- 新規投稿や編集フォームを表示する acf_form()
- サイドバーを表示して編集可能にする Live Edit プラグイン
 カスタムフィールドの...
Upcoming SlideShare
Loading in …5
×

カスタムフィールドで親切な管理画面を作ろう ~初級編~

2,513 views

Published on

Published in: Software
  • 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.4.1 第16回 松戸WordPress部 カスタムフィールドで 親切な管理画面を作ろう ~初級編~
  2. 2. カスタムフィールドで親切な管理画面を作ろう ~初級編~  管理画面を使いやすくする、さまざまな方法  カスタムフィールドとは?  Advanced Custom Fields とは?  基本的な使い方  管理画面のレイアウト変更、メッセージ表示  随時、ハンズオンあり  カスタムフィールドを使うときの注意点!  次回以降の予告(中級編・上級編)  ライトニングトーク! 本日の概要
  3. 3. カスタムフィールドで親切な管理画面を作ろう ~初級編~  ウェブ制作に関する情報交換の場 - 今までのまとめ http://wp-m.org/ - 参加申し込み https://wpmatsudo.doorkeeper.jp/ - Facebook https://www.facebook.com/groups/wordpress.banana.cluster/  話を聞くだけでも、発表するのもOK - 参加はお気軽に(興味のある回だけでもOK) - 先生役は決まっていません - 5分や10分のライトニングトークも大歓迎!  新松戸のコワーキングスペース Banana Cluster にて、毎月または隔月開催 - Banana Cluster は毎日9:30から営業 - 勉強会の参加者は、朝からドロップイン利用可能! 松戸WordPress部とは?
  4. 4. カスタムフィールドで親切な管理画面を作ろう ~初級編~  小久保勇樹(こくぼ ゆうき)  経歴 - 1984年 埼玉県生まれ - 社会学部 → 文学部 → 中退 → 自転車日本縦断+アラスカ縦断 - 2009年 結婚式場カメラマン(はじめての就職) - 2013年 ウェブ制作を始める(4社目の就職) - 2014年 無謀にもフリーランスになる - WordPressなどのOSSを使ったサイト構築、写真撮影  趣味 - 娘と遊ぶこと - 登山、読書、自転車、写真など 自己紹介
  5. 5. カスタムフィールドで親切な管理画面を作ろう ~初級編~  WordPressを初めとして、ウェブ制作に関する情報交換の場 - 今までのまとめ http://wp-m.org/ - 参加申し込み https://wpmatsudo.doorkeeper.jp/ - Facebook https://www.facebook.com/groups/wordpress.banana.cluster/  話を聞くだけでも、発表する側になるのも、OK - 参加は誰でもお気軽に(興味のある回だけでもOK) - とくに先生役は決まっていません - 5分や10分のライトニングトークも大歓迎!  新松戸駅近くのコワーキングスペース Banana Cluster にて、毎月または隔月で開催 - Banana Cluster は毎日9:30から営業 - 勉強会の参加者は、朝からドロップイン利用可能! 松戸WordPress部とは? 管理画面を使いやすくする、さまざまな方法
  6. 6. カスタムフィールドで親切な管理画面を作ろう ~初級編~  WordPressは初心者には難しい - 画像の入れ方がわからない - メディア? アイキャッチ画像?? - 機能が多すぎて何がなんだか - すっきりさせたい!  簡単に投稿できるように、改造しよう - 方法はいろいろ - たとえば、機能を削る TinyMCE Advanced - よく使う機能のボタンを作る AddQuickTag - 今回のメインのお話 カスタムフィールド 管理画面を使いやすくする、さまざまな方法
  7. 7. カスタムフィールドで親切な管理画面を作ろう ~初級編~  TinyMCE Advanced 管理画面を使いやすくする、さまざまな方法 好きなボタンだけ配置できる!
  8. 8. カスタムフィールドで親切な管理画面を作ろう ~初級編~  AddQuickTag 管理画面を使いやすくする、さまざまな方法 新しいボタンを作って配置できる!
  9. 9. それでも―― 使い方が分からない、と 問い合わせの電話が来る
  10. 10. もっと分かりやすい画面を 作らなければ……!
  11. 11. カスタムフィールドで親切な管理画面を作ろう ~初級編~  WordPressを初めとして、ウェブ制作に関する情報交換の場 - 今までのまとめ http://wp-m.org/ - 参加申し込み https://wpmatsudo.doorkeeper.jp/ - Facebook https://www.facebook.com/groups/wordpress.banana.cluster/  話を聞くだけでも、発表する側になるのも、OK - 参加は誰でもお気軽に(興味のある回だけでもOK) - とくに先生役は決まっていません - 5分や10分のライトニングトークも大歓迎!  新松戸駅近くのコワーキングスペース Banana Cluster にて、毎月または隔月で開催 - Banana Cluster は毎日9:30から営業 - 勉強会の参加者は、朝からドロップイン利用可能! 松戸WordPress部とは? マニュアルを読まなくても、 見れば分かる管理画面を作りたい
  12. 12. カスタムフィールドで親切な管理画面を作ろう ~初級編~  WordPressを初めとして、ウェブ制作に関する情報交換の場 - 今までのまとめ http://wp-m.org/ - 参加申し込み https://wpmatsudo.doorkeeper.jp/ - Facebook https://www.facebook.com/groups/wordpress.banana.cluster/  話を聞くだけでも、発表する側になるのも、OK - 参加は誰でもお気軽に(興味のある回だけでもOK) - とくに先生役は決まっていません - 5分や10分のライトニングトークも大歓迎!  新松戸駅近くのコワーキングスペース Banana Cluster にて、毎月または隔月で開催 - Banana Cluster は毎日9:30から営業 - 勉強会の参加者は、朝からドロップイン利用可能! 松戸WordPress部とは? そこで、カスタムフィールドの出番です
  13. 13. カスタムフィールドで親切な管理画面を作ろう ~初級編~  好きな「名前」と「値」を作って、表示できる - WordPress標準のカスタムフィールドは、とてもシンプル - そのままだと、ちょっと使いづらい カスタムフィールドとは?
  14. 14. カスタムフィールドで親切な管理画面を作ろう ~初級編~  カスタムフィールドの使い勝手を格段に高めてくれるプラグイン - 公式サイト http://www.advancedcustomfields.com/ - 作者はオーストラリア・メルボルンのElliot Condon氏  様々な入力フォームが用意されている - チェックボックス、カレンダー、Googleマップ、画像……その他いろいろ  管理画面をのレイアウトを整理できる - 使わない機能を非表示にすれば、ユーザーが迷わない  ドキュメントが充実 - 公式サイトでは使い方を動画で解説 - プラグイン利用者が多いのでネットの情報も豊富 Advanced Custom Fields(ACF)とは?
  15. 15. カスタムフィールドで親切な管理画面を作ろう ~初級編~ ACFを使ってみよう  固定ページや投稿に、カスタムフィールドを追加してみよう
  16. 16. カスタムフィールドで親切な管理画面を作ろう ~初級編~  ACFのデータを取り出す関数、2つ  get_field() - 基本的にはこちらを使う - 取り出したデータを加工したいときに用いる関数 - 表示したいときは自分で echo する - 使用例 <?php echo get_field('test_date'); ?>  the_field() - 基本的には使わない(理由は後述します) - 取り出したデータをそのまま表示するときに用いる関数 - 自動的に echo してくれる - 使用例 <?php the_field('test_date'); ?> ACFを使ってみよう
  17. 17. カスタムフィールドで親切な管理画面を作ろう ~初級編~  画像をアップロードして、表示させてみよう  フィールド作成時の設定 - 返り値は「画像オブジェクト」「画像 URL」「画像 ID」の3種類 - どれを選んでも良いが、今回は「画像 ID」の方法をご紹介  テーマの設定 - 画像を表示する img タグを出力してみる。大きさも指定したい - 記述例 <?php $img_id = get_field('test_img'); echo wp_get_attachment_image($img_id, 'large'); ?> ACFを使ってみよう
  18. 18. カスタムフィールドで親切な管理画面を作ろう ~初級編~  メッセージ - 管理画面の使い方を説明する文章などを表示  プレースホルダ - フィールド内に、入力のヒントをうっすらと表示  フィールド記入のヒント - ラベルの下などに説明文を表示  Prepend, Append - フィールドの前後に、補助的なテキストを表示(たとえば単位など) 管理画面にメッセージを表示
  19. 19. カスタムフィールドで親切な管理画面を作ろう ~初級編~  タブ - 表示したいフィールドが多いとき、機能ごとにタブを作って整理  真偽値 - チェックをつけると、隠れていたフィールドが表示  画面に表示しないアイテム - コンテンツエディタ、アイキャッチ画像、カテゴリーなど、 使わない機能を選び、管理画面から消すことができる 管理画面のレイアウトを変更
  20. 20. カスタムフィールドで親切な管理画面を作ろう ~初級編~  the_field() を使わないほうがいい理由「エスケープ」 - 入力したテキストをそのまま表示すると、セキュリティ上の問題がある - クロスサイトスクリプティング(XSS)対策がされていない  get_field() と3つのエスケープ関数を組み合わせて使おう - WordPressで使えるエスケープ関数は、主に3つ - PHPの関数 htmlspecialchars() とだいたい同じだが、 2重エスケープを防いでくれたり、いろいろ便利 カスタムフィールドを使うときの注意点
  21. 21. カスタムフィールドで親切な管理画面を作ろう ~初級編~  WordPressで使える3つのエスケープ関数  esc_html() - 画面に表示する文字列に対し、HTMLタグなどをエスケープ  esc_attr() - HTMLタグの属性値(alt や value など)に入る文字列をエスケープ  esc_url() - URLとして不適切な文字列をエスケープ  使用例 - <?php $user_name = get_field('user_name'); echo esc_html($user_name); ?> カスタムフィールドを使うときの注意点
  22. 22. カスタムフィールドで親切な管理画面を作ろう ~初級編~  Googleマップを表示してみよう - 返り値として緯度経度を取得し GoogleMaps JavaScript API で地図表示  カスタムタクソノミーと連携してみよう - カスタムタクソノミーの選択方法を、 チェックボックス、ラジオボタン、プルダウンメニューなどにカスタマイズ  ACF 無料版 と ACF PRO の違い - 4つの追加機能や、細かな使い勝手の違いなど - The Repeater Field - The Gallery Field - The Flexible Content Field - Option Pages 次回以降の予告(中級編?)
  23. 23. カスタムフィールドで親切な管理画面を作ろう ~初級編~  フロントエンドで使うACF - 新規投稿や編集フォームを表示する acf_form() - サイドバーを表示して編集可能にする Live Edit プラグイン  カスタムフィールドの値を使って検索 - WP_Query, meta_key, meta_value など 他にも「こんな機能を作れないかな?」という質問などあれば、教えてください。 調べて実装してみることで僕の勉強にもなるので、質問は大歓迎です! カスタムフィールド中級編は2~3ヶ月後に発表予定です。 本日はご清聴ありがとうございましたm(_ _)m 次回以降の予告(上級編?)

×