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

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

on

  • 4,028 views

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

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

Statistics

Views

Total Views
4,028
Views on SlideShare
1,923
Embed Views
2,105

Actions

Likes
20
Downloads
21
Comments
0

12 Embeds 2,105

http://2014.kansai.wordcamp.org 1282
http://www.monochrome-photo.info 346
http://wp-e.org 207
http://suikoudesign.com 178
https://twitter.com 63
http://feedly.com 20
http://s.deeeki.com 2
https://www.chatwork.com 2
http://pocketusercache.com.s3.amazonaws.com 2
http://www.linkedin.com 1
http://www.feedspot.com 1
http://feeds.feedburner.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • テーマ制作者ができること ユーザーにやさしい管理画面をつくるために。 2014.06.07 | WordCamp Kansai 2014 深沢 幸治郎(@witch_doktor) 初 級 編
  • 深沢 幸治郎 ウェブデザイナー / 制作者 コワーキングスペース運営 各種ウェブメディア・企業サイト WordPressは2010年から
  • このセッションのねらい View slide
  • 制作者 ユーザー はじめに View slide
  • ご自身で、自由に、ワープロの ようにホームページを更新・ 追加できますよ
  • 自由?
  • できません
  • ユーザーの参加領域をつくり ココ ココ ココ ココ
  • 役割分担を明確にすること
  • ユーザーにやさしい 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_API WordPress 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 設計 デザイン コーディ ング 管理画面 お渡し
  • おわりにひとこと
  • ありがとうございました