WCAN 2012 Autumn セッション2-C で使用したプレゼンテーションです。 「 今さら聞けないWordPressのあんなことこんなこと 」と題してWordPressのインストール方法、テーマ制作、運用ノウハウを駆け足でご紹介しました。 CMSはWordPressじゃなきゃダメ！という論調にはしたくなかったので、最初にCMSを使用する意義をお話させて頂きました。 お客様の要求にマッチするCMSを選択する事はとても大切だと思います。 もし色々なCMSを触ってみたい場合、デモで使用したWindowsソフトの「WebMatrix」を活用することをオススメ致します。色んなCMSがクリック操作で速攻インストールできるのでオススメです。 WCAN 2012 Autumn http://wcan.jp/2012autumn/ WordBench コミュニティ http://wordbench.org/ WebMatrix(デモで使用したソフトウェアWin専用) http://www.microsoft.com/web/webmatrix/

1. 今さら聞けない！！！
あんなことこんなこと！
魅力、インストール、テーマ制作、運用ノウハウをデスマ的に一通り学ぶ
オノコンピュータ 小野隆士
Twitter: @onocom
WCAN 2012 Autumn

2. 目次
• コンテンツ管理の必要性
• WordPress あんなこと、こんなこと。
– WordPressの魅力
– 基本編
– テーマ制作編
– 運用編
WCAN 2012 Autumn

3. CMSを使う理由をまず考えよう！
コンテンツ管理の必要性
WCAN 2012 Autumn

4. WEB制作の課題
コンテンツ数の増加 多様化する閲覧環境
どう対処する？
コスト削減 迅速な情報発信の必要性
WCAN 2012 Autumn

5. 一昔前のWEB
HTML ＋ CSS ＋ JS
構造 ＋ コンテンツ スタイル アクション
WCAN 2012 Autumn

6. 一昔前のWEBのイメージ
example.com
PCサイト 携帯サイト スマホサイト
index. menu index. menu index. menu
index. menu index. menu index. menu
html
トップ .html
サブペ html
トップ .html
サブペ html
トップ .html
サブペ
html .html html .html html .html
ページ ージ ページ ージ ページ ージ
style. action style. action style. action
css .js css .js css .js
WCAN 2012 Autumn

7. 一昔前のWEBのイメージ
example.com
PCサイト 携帯サイト スマホサイト
index. menu index. menu index. menu
コンテンツ毎に増えていくHTMLたち…
index.
html
html
menu
トップ .html
サブペ
.html
index.
html
html
menu
トップ .html
サブペ
.html
index.
html
menu
トップ .html
html
サブペ
.html
ページ ージ ページ ージ ページ ージ
style. action style. action style. action
css .js css .js css .js
WCAN 2012 Autumn

8. 無理無理無理無理
無理無理無理無理
WCAN 2012 Autumn

9. 解決方法
HTML ＋ CSS ＋ JS
構造 スタイル アクション
＋CMS
コンテンツ
WCAN 2012 Autumn

10. これからのWEBのイメージ
example.com
PCサイト 携帯サイト スマホサイト
テン テン テン
style actio style actio style actio
プレ プレ プレ
.css n.js .css n.js .css n.js
ート ート ート
CMS
（コンテンツ）
WCAN 2012 Autumn

11. example.com
PCサイト 携帯サイト スマホサイト
テン テン テン
style actio style actio style actio
プレ プレ プレ
.css n.js .css n.js .css n.js
ート ート ート
CMS
（コンテンツ）
デスクトップ
スマホアプリ なんでも！
アプリケーション
WCAN 2012 Autumn

12. CMS導入で
夢は広がる！
WCAN 2012 Autumn

13. CMSいろいろ
• a-blog CMS
• Geeklog
• Movable Type
• concrete5 それぞれの特性を見極めて、
要求にあったCMSを選択しましょう！
• WordPress
• Magento
• Moodle
• Wiki
• OpenPNE もっと見たい方はWikipediaをチェック♫
http://ja.wikipedia.org/wiki/コンテンツマネージメントシステム
………
WCAN 2012 Autumn

14. 今さら聞けない！！！ 本
題
あんなことこんなこと！
魅力、インストール、テーマ制作、運用ノウハウをデスマ的に一通り学ぶ
WCAN 2012 Autumn

15. 第1章
WordPressの魅力
WCAN 2012 Autumn

16. シンプルな操作性
WCAN 2012 Autumn

17. プラグインによる拡張性
公式プラグイン数
21,209
（2012/09/09現在）
http://wordpress.org/extend/plugins/
WCAN 2012 Autumn

18. 豊富なテーマ
公式テーマ数
1,592
（2012/09/09現在）
http://wordpress.org/extend/themes/
WCAN 2012 Autumn

19. 豊富な情報
http://wpdocs.sourceforge.jp/
WCAN 2012 Autumn

20. コミュニティ
http://wordbench.org/
http://2012.osaka.wordcamp.org/
http://2012.tokyo.wordcamp.org/
http://2012.wordbeach.org/
WCAN 2012 Autumn

21. WordCamp Tokyo 2012 なう
USTREAM配信中
【セッション１】
USTREAM：WordCamp Tokyo 2012 セッション1
【セッション２】
USTREAM：WordCamp Tokyo 2012 セッション2
【現地局】
USTREAM：WeeklyCMS チャンネル
WCAN 2012 Autumn

22. WordBench 名古屋 10月勉強会
日時 10月 20日 (土) 14:00 - 17:00（その後懇親会）
AWS（Amazon Web Services）で
内容
WordPressを動かすハンズオン
講師 AWS堀内様
ベースキャンプ名古屋
場所
http://basecamp-nagoya.jp/
ATND
募集方法
（立てたら #wbNagoya で告知します！）
WCAN 2012 Autumn

23. まだまだ魅力盛りだくさん
• オープンソース（GPLライセンス）
• スマホ・Wordからも書き込める
• 開発スピードが速い
• 世界中で人気急上昇
（WEB全体の約13%）
• 無料
WCAN 2012 Autumn

24. 第2章 インストール～基本操作
WordPress 基本編
WCAN 2012 Autumn

25. 動作環境
WordPress 3.4 日本語版
PHP バージョン 5.2.4 以上
MySQL バージョン 5.0.15 以上
今回のデモ環境
WebMatrix
http://www.microsoft.com/web/webmatrix/
WCAN 2012 Autumn

26. インストール手順
インストールしてみましょう。
1. DB準備
2. WordPressをダウンロード
（ http://ja.wordpress.org/ ）
3. 設定ファイル(wp-config.php)の書き換え
4. WordPressをサーバにアップロード
5. WEB上から設定
WCAN 2012 Autumn

27. 管理画面操作
管理画面の操作を学びましょう！
 管理画面を眺める
 投稿を書く
 固定ページを書く
 ウィジェットを配置する
 テーマを切り替え・カスタマイザー
 プラグイン導入
WCAN 2012 Autumn

28. 第3章 テーマ制作の為の基礎知識習得
WordPress テーマ制作編
WCAN 2012 Autumn

29. テーマの場所
/wp-content/themes
１フォルダ ＝ １テーマ
テーマフォルダ内には
沢山のファイルが…
WCAN 2012 Autumn

30. テーマを構成するファイル達
必須 ファイル名 内容
● style.css テーマの情報およびウェブページの外観を制御するスタイルシート
● index.php 記事一覧とかその他もろもろの表示を担当。テーマの親分！
single.php 個別の投稿を担当
page.php 個別のページを担当
header.php ヘッダを担当（get_header()で読み込まれる）
footer.php フッター担当（get_footer()で読み込まれる）
sidebar.php サイドバー担当（get_sidebar()で読み込まれる）
comments.php コメント欄担当（comment_form()で読み込まれる） ※
screenshot.png テーマ選択時のスクリーンショット ※
functions.php フックや自作の関数等を記載する
他にも沢山あるので興味のある方は以下のリンクをチェック
http://wpdocs.sourceforge.jp/テーマの作成
※ 公式テーマ登録の際には、「comments.php」と「screenshot.png」も必須
http://codex.wordpress.org/Theme_Review#Theme_Template_Files
WCAN 2012 Autumn

31. http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
WCAN 2012 Autumn

32. ファイルの役割イメージ
header.php
index.php sideb
(or home.php) ar.ph
p
footer.php
WCAN 2012 Autumn

33. ファイルの役割イメージ
header.php
sideb
ar.ph single.php
p
footer.php
WCAN 2012 Autumn

34. 超簡単なテーマ制作の流れ
①デザイン＆HTML作成
②テーマとして認識させる
③テンプレート関数に置き換え
④動作確認
WCAN 2012 Autumn

35. 超簡単なテーマ制作の流れ
①デザイン＆HTML作成
②テーマとして認識させる
③テンプレート関数に置き換え
index style.css
.html
④動作確認
WCAN 2012 Autumn

36. 超簡単なテーマ制作の流れ
①デザイン＆HTML作成
index style.css
.html
②テーマとして認識させる
③テンプレート関数に置き換え
index
④動作確認
.php
WCAN 2012 Autumn

37. 超簡単なテーマ制作の流れ
style.css の行頭に以下を記述
/*
Theme Name: テーマ名
①デザイン＆HTML作成
Theme URI: http://theme-uri.example.org/
Description: テーマの説明
Author: 作成者 style.css
Author URI: http://example.org/
②テーマとして認識させる
Version: 1.0
*/
③テンプレート関数に置き換え
index style.css
④動作確認
.php
WCAN 2012 Autumn

38. 超簡単なテーマ制作の流れ
①デザイン＆HTML作成
index style.css
②テーマとして認識させる .php
③テンプレート関数に置き換え
/wp-content/themes/mytheme/
④動作確認
WCAN 2012 Autumn

39. 超簡単なテーマ制作の流れ
①デザイン＆HTML作成 【index.php】
該当箇所を以下コードに置き換え
style.css読み込み
<?php bloginfo( ‘stylesheet_url’ ); ?>
②テーマとして認識させる テーマディレクトリのURL表示
<?php bloginfo( ‘template_directory’ ); ?>
サイトタイトル表示
<?php bloginfo( ‘name’ ); ?>
説明文表示
③テンプレート関数に置き換え
<?php bloginfo( ‘description’ ); ?>
</head>タグの直前に挿入
<?php wp_head(); ?>
</body>タグの直前に挿入
④動作確認 <?php wp_footer(); ?>
WCAN 2012 Autumn

40. 超簡単なテーマ制作の流れ
①デザイン＆HTML作成
【index.php】
投稿記事表示
<?php while (have_posts()) : the_post(); ?>
<h2>
②テーマとして認識させる
<a href=“<?php the_permalink(); ?>”>
<?php the_title(); ?>
</a>
</h2>
③テンプレート関数に置き換え <p>
<?php the_time('Y/m/d G:i'); ?>
</p>
<div><?php the_content(); ?></div>
④動作確認 <?php endwhile; ?>
WCAN 2012 Autumn

41. 超簡単なテーマ制作の流れ
①デザイン＆HTML作成
②テーマとして認識させる
③テンプレート関数に置き換え
④動作確認
WCAN 2012 Autumn

42. テーマ制作の参考になるテーマ
Classic テーマ
http://wordpress.org/extend/themes/classic
初期頃のデフォルトテーマ
機能が少ないため、テーマの基礎を学ぶには最適
半日でわかる！WordPressのお作法
https://gihyo.jp/dp/ebook/2011/G11B04
無料の電子書籍です。WordPressを学ぶ取っ掛かりとしてご利用下さい。
WCAN 2012 Autumn

43. 第4章
WordPress運用編
WCAN 2012 Autumn

44. データのバックアップ
WordPressのバックアップは、
・FTPサーバ上のファイル
・データベース内のデータ
の両方をバックアップする必要がある。
プラグイン名 BackWPup
URL http://wordpress.org/extend/plugins/backwpup/
WCAN 2012 Autumn

45. 入力支援
ビジュアルエディタを強化して、テーブル
挿入やスタイル選択を可能にする。
プラグイン名 TinyMCE Advanced
URL http://wordpress.org/extend/plugins/tinymce-advanced/
WCAN 2012 Autumn

46. 誤操作防止
使用しない機能をメニューから消すことで
ユーザの誤操作を防ぐ。
プラグイン名 Adminimize
URL http://wordpress.org/extend/plugins/adminimize/
WCAN 2012 Autumn

47. データを効率良く管理する
カスタム投稿タイプ＆カスタムフィールド
＆カスタムタクソノミーを活用してデータ
を効率良く管理する。
プラグイン名 Custom Field Template
URL http://wordpress.org/extend/plugins/custom-field-template/
プラグイン名 Custom Post Type UI
URL http://wordpress.org/extend/plugins/custom-post-type-ui/
WCAN 2012 Autumn

48. データを効率良く管理する
WCAN 2012 Autumn

49. 質問コーナー
WCAN 2012 Autumn

50. おわり
ご清聴ありがとうございました。
WCAN 2012 Autumn