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