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