2014年6月7日、WordCamp Kansai 2014でのセッションのスライドです。

1. テーマ制作者ができること
ユーザーにやさしい管理画面をつくるために。
2014.06.07 | WordCamp Kansai 2014
深沢 幸治郎（@witch_doktor）
初 級 編

2. 深沢 幸治郎
ウェブデザイナー / 制作者
コワーキングスペース運営
各種ウェブメディア・企業サイト
WordPressは2010年から

3. このセッションのねらい

4. 制作者 ユーザー
はじめに

5. ご自身で、自由に、ワープロの
ようにホームページを更新・
追加できますよ

6. 自由？

7. できません

8. ユーザーの参加領域をつくり
ココ
ココ ココ
ココ

9. 役割分担を明確にすること

10. ユーザーにやさしい
WordPressサイトは
管理画面に心を
くばったサイト

11. ダメな例いきます

12. カテゴリ増やした

13. サイトに反映されない

14. 投稿画面

15. あれ？本文にすごいHTML

16. WPを提案する前に
考えよう。話しあおう。

17. 1. 静的ウェブサイトだと、
どう都合が悪いの？

18. 2. ユーザーさんはどんな利益を
期待しているの？

19. 3. それはWPの機能で
どのように提供できるの？

20. 4. ユーザーさんは、どれくらいの
役割を負ってくれるの？

21. 管理画面に関する
WordPressの
機能を知ろう。

22. 各種の情報
情報の入口→情報の出口
Input
管理画面
Output
テーマ

26. TinyMCEでデザインはできない

27. そこで
カスタムフィールド
入力項目を自由に増やす

28. プラグインで入力項目を
テンプレート化できます
質問A
質問B
質問C 選択肢A 選択肢B

29. Advanced Custom Fields
現在の一番人気。豊富なアドオンで多機能

30. Custom Field Template
いま隣でしゃべってる宮下裕章さんの作

31. Custom Field Suite
期待の新星。多機能かつ軽量。

32. 例えばこんなサイト

33. こんなレイアウト、
ユーザーさんにHTMLで
書かせるわけには
いきません。

34. Custom Field Templateで解決しました

35. ワイヤーフレーム描いたら
すぐにカスタムフィールドを設計だ

36. 便利なユーザーのための
インターフェイス

37. カスタムメニュー

38. カスタムメニュー
register_nav_menu(’mainnav’, ‘メインメニュー’);
・・・
<nav>
<?php wp_nav_menu( array(
‘theme_location’=>’mainnav’,
‘container’ =>’’,
‘menu_class’ =>’’,
‘items_wrap’ =>’<ul id=”main-nav”>%3$s</ul>’));
?>
</nav>
・・・
1. functions.php（後述）に1行足して
2. テーマ側、メニューを表示したい個所にこのように。
3. 管理画面からさわってみよう！

39. ウィジェット

40. 2. テーマ側、ウィジェットを表示したい個所にこのように。
3. 管理画面からさわってみよう！
ウィジェット
register_sidebars( $count, $args );
<?php dynamic_sidebar( $sidebar ); ?>
1. functions.php（後述）に1行足して

41. テーマカスタマイザー

42. テーマカスタマイザー
http://wpdocs.sourceforge.jp/Theme_Customization_API
WordPress Codex『Theme Customization API』
導入方法はCodexを参照してください。

43. プラグインで管理画面を
お手軽カスタマイズ！

44. WP Total Hacks
よくあるカスタマイズを管理画面から
スタッフ・宮内隆行さんの作

45. WP Total Hacks
たとえばログイン画面

46. ちょっと難しいけど
functions.php

47. functions.phpってなんや
テーマの中の1ファイルです
Theme

48. ここにPHPで命令を書く
WordPressの挙動を制御
管理画面functions.php

49. functions.phpに
コードを書いた

50. メニュー
「コメント」が
消えた

51. 管理画面はテーマを
作成する前に
ユーザーさんに渡して
使ってもらいましょう

52. WF デザイン コーディング CMS
もったいない！

53. WF テスト
CMS
設計
デザイン コーディ
ング
管理画面
お渡し

54. おわりにひとこと

55. ありがとうございました