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