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

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を初めとして、ウェブ制作に関する情報交換の場
 話を聞くだけでも、発表する側になるのも、OK
- 参加は誰でもお気軽に（興味のある回だけでもOK）
- とくに先生役は決まっていません
 新松戸駅近くのコワーキングスペース Banana Cluster にて、毎月または隔月で開催
管理画面を使いやすくする、さまざまな方法

 WordPressは初心者には難しい
- 画像の入れ方がわからない
- メディア？アイキャッチ画像？？
- 機能が多すぎて何がなんだか
- すっきりさせたい！
 簡単に投稿できるように、改造しよう
- 方法はいろいろ
- たとえば、機能を削る TinyMCE Advanced
- よく使う機能のボタンを作る AddQuickTag
- 今回のメインのお話カスタムフィールド

 TinyMCE Advanced
好きなボタンだけ配置できる！

 AddQuickTag
新しいボタンを作って配置できる！

それでも――
使い方が分からない、と
問い合わせの電話が来る

もっと分かりやすい画面を
作らなければ……！

マニュアルを読まなくても、
見れば分かる管理画面を作りたい

そこで、カスタムフィールドの出番です

 好きな「名前」と「値」を作って、表示できる
- 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'); ?>

 画像をアップロードして、表示させてみよう
 フィールド作成時の設定
- 返り値は「画像オブジェクト」「画像 URL」「画像 ID」の3種類
- どれを選んでも良いが、今回は「画像 ID」の方法をご紹介
 テーマの設定
- 画像を表示する img タグを出力してみる。大きさも指定したい
- 記述例
<?php
$img_id = get_field('test_img');
echo wp_get_attachment_image($img_id, 'large');
?>

 メッセージ
- 管理画面の使い方を説明する文章などを表示
 プレースホルダ
- フィールド内に、入力のヒントをうっすらと表示
 フィールド記入のヒント
- ラベルの下などに説明文を表示
 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
次回以降の予告（上級編？）

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

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

Semelhante a カスタムフィールドで親切な管理画面を作ろう～初級編～ (9)