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