2016年5月22日 WordBench京都

1. 2016/05/22
WordBench京都
Cherry Pie Web 川井昌彦
”お客様のため”の
WordPress管理画面カスタマイズ

2. 2
自己紹介
●川井昌彦（かわいまさひこ）
東京の制作会社で24年間勤めた後、
京都府舞鶴市に帰郷してフリーランスで、DTP・Web制作をしています。
提案・見積・ディレクション・デザイン・プログラミング・顧客サポート
制作会社のワークフロー構築やコンサルティングまでやります。
好きなAdobeは、 と です！

3. 3
Cherry Pie Web
http://www.cherrypieweb.com
1997年開設
今年で19年目！

4. 4
北近畿くまもと地震支援チーム
http://kitakinki-kumamoto.info
地元の皆さんと共に、
ボランティアで活動しています。
ご支援
よろしく
お願いします。

5. 5
・・・それは、私がまだWordPress初心者だったころのお話

6. 6
ブログとかも
やりたいんですよ
趣味のカメラで
トップページの
写真を撮影して
変えたいんだ
じゃあ、
WordPressで作りましょう！
WordPressなら、
お客様で簡単に更新できますよ！
商品紹介
施工事例は
自分たちで
更新したい

7. 7
・・・その結果

8. 8
あまりパソコンが得意じゃない、A様
・ 管理画面の項目が多すぎてよくわからないし、なんか怖い
・ 週に１度くらいしか触らないので、操作が覚えられない
・ 毎回マニュアル見るのは面倒なので、更新が億劫になった
・ アップデートで見た目が変わってしまったので、
操作がわからなくなった

9. 9
ホームページビルダーの経験がある、B様
・ レスポンシブデザインなのに、投稿画面でテーブルレイアウトをする
→ 頭を揃えたいだけなのに？
・ テキストモードにして、fontタグを使う
→ <font face="HGP創英角ポップ体">
・ 「このメニューはどういうものなの？」と、
しょっちゅう質問してくる

10. 10
自称・パソコンが得意な、C様
・ オプションをさわって、「色が変わった」「項目が出てこない」と、
クレームを入れてくる
・ メンテナンスされていないプラグイン、怪しい非公式プラグインを入れる
・ 非公式テーマに変えて、
投稿画面にカスタムフィールドがあふれる
・ コアアップデートを行った際、
プラグインが対応しておらず、画面が真っ白に
（当然、バックアップもなし）

11. 11
・・・がっかり

12. 12
今日は、そんな私のWordPress初心者時代の苦い経験をもとに、
お客様に優しく、
制作者も楽ができる、
「"お客様のため"の管理画面カスタマイズ」
について、お話しします。

13. 13
本日の予定
1. 管理画面カスタマイズの必要性と目的
2. カスタマイズのポイント
3. カスタマイズの進め方
4. おすすめプラグイン

14. 14
かのこの
カスタマイズも
お願いなのだ
管理画面カスタマイズの
必要性と目的

15. 15
管理画面のカスタマイズは、
Web制作やサイト更新が "本業でない" 人のために行うもの
操作を覚えることに時間を費やさず、
コンテンツを作ることに
時間を使ってもらえるように！

16. 16
不用意な操作によるトラブルを未然に防げる
・ ユーザー権限を"最低限"に絞る
・ さわってほしくない項目は見せない
・ 禁止ルールが多いと、更新が億劫になる
それ、
いじっちゃ
ダメ！

17. 17
責任範囲を明確にできる
・ 顧客の操作が原因でトラブルになっても、
こちらに責任がないことを
わかってもらうのは大変！
↓
そもそも、トラブルが起きるシーンを
"作らない"ことが重要
ここから
先には
行けないのだ

18. 18
顧客の学習コストを下げられる
・ 管理画面で迷わせない
・ 間違って操作しても、
システムが壊れないという安心感を持たせられる
かじったら
こわれちゃった
のだ

19. 19
人を信じても、
人の"仕事"は信じるな！

20. 20
カスタマイズの
ポイント

21. 21
運用の"シーン"ごとにユーザーを設定する
・ ブログの投稿用（毎日～毎週）：投稿者をベースに
・ 会社概要などの修正用（年に数回）：編集者をベースに
・ システム管理 ：管理者
・ 担当者が一人でも、シーンによってユーザーを使い分けてもらう
・ 可能ならばサポート契約を結び、
管理者権限を顧客に与えないほうが安全
（管理者ユーザー名・パスワードは"袋とじ"にして渡しておく）

22. 22
ウィジェットの編集、メニューの編集 など
編集者や投稿者のデフォルト権限では出来ないことをやってもらうときに、
「管理者でログインして操作してください」
と言ってはダメ！
その後、ブログの更新だけでも管理者権限でログインするようになり、
操作ミスでトラブルを起こしてしまう！
→ 権限をカスタマイズして、必要な機能だけを許可する

23. 23
もう一度言います。
人を信じても、
人の"仕事"は信じるな！

24. 24
functions.phpに書かず、プラグインを使う
functions.phpに直接書くと、
テーマを変更したり、アップデートしたときに、
カスタマイズが消えてしまう！
テーマを変更したときに
無くなったら困ることは、
functions.php に書かない！

25. 25
functions.php に書かないほうがいいこと
・ カスタムフィールド、カスタム投稿タイプ、カスタムタクソノミー
・ ショートコード
・ ウィジェット
・ SEO関係（タイトル・metaタグを操作する処理とか）
・ バックエンド専用のCSS、JSの読み込み
どうしても、functions.phpに直接書くようなカスタマイズをしたい場合は、
その部分を抜き出してプラグインにする
※とても簡単なので、チャレンジしたい方はググってみてください。

26. 26
カスタマイズの手順
まずは、
においを
チェックなのだ

27. 27
１．ユーザー権限を設定・追加して、
顧客用のユーザーを作成する
まず、ユーザー権限をしっかり設計すること！
ユーザーの種類と権限 - WordPress Codex
管理者 ／ 編集者 ／ 投稿者

28. 28
・ 管理者：
WordPress自体の管理用
管理者権限は、通常運用では使わないようにする
・ 編集者：
運用責任者（店長とかチームリーダー）
必要に応じて、ウィジェット、メニューなどの編集権限を与える
・ 投稿者：
ブログ更新担当者
担当者が複数いる場合
・書き手の個性を出したいなら個別に作成（美容室など）
・記事に事務的なものが多い場合は、一つのユーザーを共用
「User Role Editor」プラグインが便利

29. 29
２．カスタムフィールドや
カスタム投稿タイプを追加する
取扱商品、施工事例などは、通常の投稿ではなく
カスタム投稿タイプとカスタムフィールドで
入力内容を制限してしまったほうが運用しやすい
（例）取扱商品、不動産、制作事例など
・ 制作側でHTML、CSSを駆使した見やすいレイアウトが組める
（bootstrapのclassを適用するとか）
・ 入力すべき内容が一目瞭然なので、覚えなくてよい、忘れない

30. 30
３．顧客ユーザーの各権限に対して、
管理画面の表示／非表示を設定する
※先に権限を設定すれば、権限がない項目は表示されない
「Adminimize」プラグイン
管理画面全般
・ 余計なリンクを非表示
フッターのWordPressリンク
ヘルプ
表示オプション
・ 管理者以外は、更新通知を非表示にする

31. 31
メニューバー
・ バックエンドとフロントエンドは別なので、両方設定すること！
サイトを表示する、ダッシュボード、ログアウトだけでいいかも
・ バックエンド
・ フロントエンド

32. 32
左サイドバーのメニュー
・ 操作されたくない項目を非表示
外観
コメント
プラグイン
ツール
設定
プラグインによって追加される項目
カスタマイザーは
使わせない！

33. 33
ダッシュボード
・ 運用に関係のないダッシュボードウィジェットを非表示にする
WordPressへようこそ
クイックドラフト
概要
WordPressニュース
プラグインが追加するウィジェット
・ ダッシュボードは通常の運用ではほとんど必要ないので
使わなくてもいい
→ ログイン時に"投稿一覧"などを表示させるようにする

34. 34
メディア
・ メディアをカテゴリ分けすると、画像が増えた時に便利
・ カテゴリでフィルタできるプラグイン
「WP Media Category Management」プラグイン
※カスタムタクソノミーでもカテゴリが作れるが、一覧でフィルタできない

35. 35
ユーザープロフィール
・ ユーザープロフィール画面には「表示オプション」がない！
・ でも触られたくない項目が多い
しかし、非表示にできない！
ビジュアルリッチエディターを使用しない
管理画面の配色
サイトを見るときにツールバーを表示する
など
・ 変更する必要がないなら、プロフィール画面を触らせない
・ プロフィール画面は操作したいが、触られたくない項目があるときは、
「Adminimize」プラグインで非表示にできる

36. 36
投稿・固定ページ
・ 不要なボックスを非表示
トラックバック送信
カスタムフィールド
ディスカッション・コメント
作成者
プラグインによって追加されるフィールド
（SEO関係はデフォルト設定をしっかりと）
・ 抜粋・アイキャッチは自動設定
・ スラッグを英数字で指定するとか、
普通の人にはまず無理なので、
パーマリンク設定をよく考える

37. 37
４．ビジュアルエディタをカスタマイズ
「TinyMCE Advanced」プラグイン
「続きを読む」「両端揃え」「ヘルプ」は、非表示にしたほうが良い
「段落タグを保持」オプションを有効にする（p, brタグの自動整形をしない）
（カスタマイズ例）

38. 38
ビジュアルエディタに、実際の表示と同じスタイルを適用
ビジュアルエディタ用のCSSをフロントエンド用のCSSに読み込ませる
※テーマに依存するものなので、functions.phpで設定するのが良い
１．ビジュアルエディタ用CSSを作成
テーマディレクトリに保存：typography.css（ファイル名は任意）
２．functions.phpで読み込み
add_editor_style() ：エディター用に読み込み
wp_enqueue_style() ：フロントエンド用に読み込み
※cssを、バックエンドとフロントエンドで重複して書かず、
バックエンド用のcssをフロントエンドでも読み込ませる
※sassでインポートしてもOK

39. 39
functions.phpのサンプル
// for editor
add_editor_style("typography.css");
// for front-end
function editor_styles() {
wp_enqueue_style( 'editor-style',
get_stylesheet_directory_uri().'typography.css', array('my-
style'),
date('YmdHis', filemtime(get_stylesheet_
directory().'typography.css')));
}
add_action( 'wp_enqueue_scripts', 'editor_styles' );

40. 40
プラグインの紹介
かのこは
赤れんが博物館を
ご紹介するのだ

41. 41
Toolset Types
カスタムフィールド、カスタム分類、カスタム投稿タイプを管理する
・ ユーザープロフィール画面にフィールドを追加できる
ググってもたいてい「連絡先情報」のことしか出てこない！
・ 投稿画面で不要なフィールドを非表示にできる
（後述の「Adminimize」を使うなら、触らないほうがいいかも）
・ 過去にインストールしたプラグインなどが勝手に追加して残ってしまった
不要なカスタムフィールドを削除できる（上級者向け）

42. 42
Adminimize
ユーザー権限ごとに項目の表示／非表示を設定できる
汎用性が非常に高いおすすめプラグイン
・ 管理画面上のあらゆるパーツに対し、
「ユーザー権限ごと」に表示／非表示を設定できる
・ ウィジェットも個別に設定できる
・ CSSのセレクターで指定できるものなら設定項目を追加できる！
→ ほとんどすべての項目の設定が可能！ すごい！

43. 43
管理画面からマニュアルを見れるようにする
PDFで操作マニュアルを作成し、管理画面から見れるようにする
（参考リンク）
配布したWP管理画面マニュアルをプラグイン化して管理画面で確認出来るようにしてみた -
かちびと.net http://kachibito.net/wordpress/manual-plugin.html

44. 44
ご清聴ありがとうございました。