ユーザーにやさしい管理画面をつくるために。テーマ制作者ができること...

テーマ制作者ができることユーザーにやさしい管理画面をつくるために。

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 設計

デザイン コーディ ング

管理画面 お渡し

おわりにひとこと

ありがとうございました