Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ユーザーにやさしい管理画面をつくるために。テーマ制作者ができること 初級編【WordCamp Kansai 2014】

7,568 views

Published on

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

Published in: Technology
  • Be the first to comment

ユーザーにやさしい管理画面をつくるために。テーマ制作者ができること 初級編【WordCamp Kansai 2014】

  1. 1. テーマ制作者ができること ユーザーにやさしい管理画面をつくるために。 2014.06.07 | WordCamp Kansai 2014 深沢 幸治郎(@witch_doktor) 初 級 編
  2. 2. 深沢 幸治郎 ウェブデザイナー / 制作者 コワーキングスペース運営 各種ウェブメディア・企業サイト WordPressは2010年から
  3. 3. このセッションのねらい
  4. 4. 制作者 ユーザー はじめに
  5. 5. ご自身で、自由に、ワープロの ようにホームページを更新・ 追加できますよ
  6. 6. 自由?
  7. 7. できません
  8. 8. ユーザーの参加領域をつくり ココ ココ ココ ココ
  9. 9. 役割分担を明確にすること
  10. 10. ユーザーにやさしい WordPressサイトは 管理画面に心を くばったサイト
  11. 11. ダメな例いきます
  12. 12. カテゴリ増やした
  13. 13. サイトに反映されない
  14. 14. 投稿画面
  15. 15. あれ?本文にすごいHTML
  16. 16. WPを提案する前に 考えよう。話しあおう。
  17. 17. 1. 静的ウェブサイトだと、   どう都合が悪いの?
  18. 18. 2. ユーザーさんはどんな利益を   期待しているの?
  19. 19. 3. それはWPの機能で   どのように提供できるの?
  20. 20. 4. ユーザーさんは、どれくらいの   役割を負ってくれるの?
  21. 21. 管理画面に関する WordPressの 機能を知ろう。
  22. 22. 各種の情報 情報の入口→情報の出口 Input 管理画面 Output テーマ
  23. 23. TinyMCEでデザインはできない
  24. 24. そこで カスタムフィールド 入力項目を自由に増やす
  25. 25. プラグインで入力項目を テンプレート化できます 質問A 質問B 質問C 選択肢A 選択肢B
  26. 26. Advanced Custom Fields 現在の一番人気。豊富なアドオンで多機能
  27. 27. Custom Field Template いま隣でしゃべってる宮下裕章さんの作
  28. 28. Custom Field Suite 期待の新星。多機能かつ軽量。
  29. 29. 例えばこんなサイト
  30. 30. こんなレイアウト、 ユーザーさんにHTMLで 書かせるわけには いきません。
  31. 31. Custom Field Templateで解決しました
  32. 32. ワイヤーフレーム描いたら すぐにカスタムフィールドを設計だ
  33. 33. 便利なユーザーのための インターフェイス
  34. 34. カスタムメニュー
  35. 35. カスタムメニュー 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. 管理画面からさわってみよう!
  36. 36. ウィジェット
  37. 37. 2. テーマ側、ウィジェットを表示したい個所にこのように。 3. 管理画面からさわってみよう! ウィジェット register_sidebars( $count, $args ); <?php dynamic_sidebar( $sidebar ); ?> 1. functions.php(後述)に1行足して
  38. 38. テーマカスタマイザー
  39. 39. テーマカスタマイザー http://wpdocs.sourceforge.jp/Theme_Customization_API WordPress Codex『Theme Customization API』 導入方法はCodexを参照してください。
  40. 40. プラグインで管理画面を お手軽カスタマイズ!
  41. 41. WP Total Hacks よくあるカスタマイズを管理画面から スタッフ・宮内隆行さんの作
  42. 42. WP Total Hacks たとえばログイン画面
  43. 43. ちょっと難しいけど functions.php
  44. 44. functions.phpってなんや テーマの中の1ファイルです Theme
  45. 45. ここにPHPで命令を書く WordPressの挙動を制御 管理画面functions.php
  46. 46. functions.phpに コードを書いた
  47. 47. メニュー 「コメント」が 消えた
  48. 48. 管理画面はテーマを 作成する前に ユーザーさんに渡して 使ってもらいましょう
  49. 49. WF デザイン コーディング CMS もったいない!
  50. 50. WF テスト CMS 設計 デザイン コーディ ング 管理画面 お渡し
  51. 51. おわりにひとこと
  52. 52. ありがとうございました

×