あんなことこんなこと！

魅力、インストール、テーマ制作、運用ノウハウをデスマ的に一通り学ぶ

オノコンピュータ 小野隆士

Twitter: @onocom

WCAN 2012 Autumn

今さら聞けない！！！

目次

• コンテンツ管理の必要性

• WordPress あんなこと、こんなこと。

– WordPressの魅力

– 基本編

– テーマ制作編

– 運用編

WCAN 2012 Autumn

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

WCAN 2012 Autumn

WEB制作の課題

WCAN 2012 Autumn

コンテンツ数の増加 多様化する閲覧環境

コスト削減 迅速な情報発信の必要性

どう対処する？

一昔前のWEB

HTML ＋ CSS ＋ JS

WCAN 2012 Autumn

構造 ＋ コンテンツ スタイル アクション

一昔前のWEBのイメージ

WCAN 2012 Autumn

example.com

PCサイト 携帯サイト スマホサイト

index.html

menu.html

index.html

menu.html

トップページ

サブページ

style.css

action.js

index.html

menu.html

index.html

menu.html

トップページ

サブページ

index.html

menu.html

index.html

menu.html

トップページ

サブページ

style.css

action.js

style.css

action.js

一昔前のWEBのイメージ

WCAN 2012 Autumn

example.com

PCサイト 携帯サイト スマホサイト

index.html

menu.html

index.html

menu.html

トップページ

サブページ

style.css

action.js

index.html

menu.html

index.html

menu.html

トップページ

サブページ

index.html

menu.html

index.html

menu.html

トップページ

サブページ

style.css

action.js

コンテンツ毎に増えていくHTMLたち…

style.css

action.js

WCAN 2012 Autumn

無理無理無理無理 無理無理無理無理

解決方法

HTML ＋ CSS ＋ JS

＋CMS WCAN 2012 Autumn

構造 スタイル アクション

コンテンツ

これからのWEBのイメージ

WCAN 2012 Autumn

example.com

PCサイト 携帯サイト スマホサイト

テンプレート

style.css

action.js

テンプレート

style.css

action.js

テンプレート

style.css

action.js

CMS （コンテンツ）

WCAN 2012 Autumn

example.com

PCサイト 携帯サイト スマホサイト

テンプレート

style.css

action.js

テンプレート

style.css

action.js

テンプレート

style.css

action.js

CMS （コンテンツ）

スマホアプリ デスクトップ

アプリケーション なんでも！

WCAN 2012 Autumn

CMS導入で 夢は広がる！

CMSいろいろ

• a-blog CMS • Geeklog • Movable Type • concrete5 • WordPress • Magento • Moodle • Wiki • OpenPNE … … …

WCAN 2012 Autumn

もっと見たい方はWikipediaをチェック♫ http://ja.wikipedia.org/wiki/コンテンツマネージメントシステム

それぞれの特性を見極めて、 要求にあったCMSを選択しましょう！

WCAN 2012 Autumn

あんなことこんなこと！

魅力、インストール、テーマ制作、運用ノウハウをデスマ的に一通り学ぶ

今さら聞けない！！！ 本題

WordPressの魅力 第1章

WCAN 2012 Autumn

シンプルな操作性

WCAN 2012 Autumn

プラグインによる拡張性

WCAN 2012 Autumn

公式プラグイン数

21,209 （2012/09/09現在）

http://wordpress.org/extend/plugins/

豊富なテーマ

WCAN 2012 Autumn

公式テーマ数

1,592 （2012/09/09現在）

http://wordpress.org/extend/themes/

豊富な情報

WCAN 2012 Autumn

http://wpdocs.sourceforge.jp/

コミュニティ

WCAN 2012 Autumn

http://wordbench.org/ http://2012.osaka.wordcamp.org/ http://2012.tokyo.wordcamp.org/ http://2012.wordbeach.org/

WordCamp Tokyo 2012 なう

WCAN 2012 Autumn

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

WordBench 名古屋 10月勉強会

WCAN 2012 Autumn

日時 10月 20日 (土) 14:00 - 17:00（その後懇親会）

内容 AWS（Amazon Web Services）で WordPressを動かすハンズオン

講師 AWS堀内様

場所 ベースキャンプ名古屋 http://basecamp-nagoya.jp/

募集方法 ATND （立てたら #wbNagoya で告知します！）

まだまだ魅力盛りだくさん

• オープンソース（GPLライセンス）

• スマホ・Wordからも書き込める

• 開発スピードが速い

• 世界中で人気急上昇 （WEB全体の約13%）

• 無料

WCAN 2012 Autumn

WordPress 基本編 第2章 インストール～基本操作

WCAN 2012 Autumn

動作環境

WordPress 3.4 日本語版

PHP バージョン 5.2.4 以上

MySQL バージョン 5.0.15 以上

今回のデモ環境

WebMatrix http://www.microsoft.com/web/webmatrix/

WCAN 2012 Autumn

インストール手順

インストールしてみましょう。

1. DB準備

2. WordPressをダウンロード （ http://ja.wordpress.org/ ）

3. 設定ファイル(wp-config.php)の書き換え

4. WordPressをサーバにアップロード

5. WEB上から設定

WCAN 2012 Autumn

管理画面操作

管理画面の操作を学びましょう！

管理画面を眺める

投稿を書く

固定ページを書く

ウィジェットを配置する

テーマを切り替え・カスタマイザー

プラグイン導入

WCAN 2012 Autumn

WordPress テーマ制作編 第3章 テーマ制作の為の基礎知識習得

WCAN 2012 Autumn

テーマの場所

WCAN 2012 Autumn

/wp-content/themes

１フォルダ ＝ １テーマ

テーマフォルダ内には 沢山のファイルが…

テーマを構成するファイル達

WCAN 2012 Autumn

必須 ファイル名 内容

● 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

http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

ファイルの役割イメージ

WCAN 2012 Autumn

index.php (or home.php)

header.php

sidebar.ph

p

footer.php

ファイルの役割イメージ

WCAN 2012 Autumn

single.php

header.php

sidebar.ph

p

footer.php

超簡単なテーマ制作の流れ

WCAN 2012 Autumn

①デザイン＆HTML作成

②テーマとして認識させる

③テンプレート関数に置き換え

④動作確認

超簡単なテーマ制作の流れ

WCAN 2012 Autumn

①デザイン＆HTML作成

②テーマとして認識させる

③テンプレート関数に置き換え

④動作確認

index .html

style.css

超簡単なテーマ制作の流れ

WCAN 2012 Autumn

①デザイン＆HTML作成

②テーマとして認識させる

③テンプレート関数に置き換え

④動作確認

index .html

style.css

index .php

超簡単なテーマ制作の流れ

WCAN 2012 Autumn

①デザイン＆HTML作成

②テーマとして認識させる

③テンプレート関数に置き換え

④動作確認

style.css

index .php

style.css

style.css の行頭に以下を記述 /* Theme Name: テーマ名 Theme URI: http://theme-uri.example.org/ Description: テーマの説明 Author: 作成者 Author URI: http://example.org/ Version: 1.0 */

超簡単なテーマ制作の流れ

WCAN 2012 Autumn

①デザイン＆HTML作成

②テーマとして認識させる

③テンプレート関数に置き換え

④動作確認

index .php

style.css

/wp-content/themes/mytheme/

超簡単なテーマ制作の流れ

WCAN 2012 Autumn

①デザイン＆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

①デザイン＆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

①デザイン＆HTML作成

②テーマとして認識させる

③テンプレート関数に置き換え

④動作確認

テーマ制作の参考になるテーマ

Classic テーマ http://wordpress.org/extend/themes/classic

初期頃のデフォルトテーマ

機能が少ないため、テーマの基礎を学ぶには最適

WCAN 2012 Autumn

半日でわかる！WordPressのお作法 https://gihyo.jp/dp/ebook/2011/G11B04 無料の電子書籍です。WordPressを学ぶ取っ掛かりとしてご利用下さい。

WordPress運用編 第4章

WCAN 2012 Autumn

データのバックアップ

WCAN 2012 Autumn

WordPressのバックアップは、

・FTPサーバ上のファイル

・データベース内のデータ

の両方をバックアップする必要がある。

プラグイン名 BackWPup

URL http://wordpress.org/extend/plugins/backwpup/

入力支援

WCAN 2012 Autumn

ビジュアルエディタを強化して、テーブル挿入やスタイル選択を可能にする。

プラグイン名 TinyMCE Advanced

URL http://wordpress.org/extend/plugins/tinymce-advanced/

誤操作防止

WCAN 2012 Autumn

使用しない機能をメニューから消すことでユーザの誤操作を防ぐ。

プラグイン名 Adminimize

URL http://wordpress.org/extend/plugins/adminimize/

データを効率良く管理する

カスタム投稿タイプ＆カスタムフィールド＆カスタムタクソノミーを活用してデータを効率良く管理する。

WCAN 2012 Autumn

プラグイン名 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

質問コーナー

WCAN 2012 Autumn

ご清聴ありがとうございました。 おわり

WCAN 2012 Autumn