すきなじゅんに読んで ひょうしょうについて - Joyo読んだ日 思ったこと ・かんじたことを書こう 読んだ日 思ったこと ・かんじたことを書こう
今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]
-
Upload
onocom -
Category
Technology
-
view
2.549 -
download
1
description
Transcript of 今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]
あんなことこんなこと!
魅力、インストール、テーマ制作、運用ノウハウをデスマ的に一通り学ぶ
オノコンピュータ 小野隆士
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://wordbench.org/ http://2012.osaka.wordcamp.org/ http://2012.tokyo.wordcamp.org/ http://2012.wordbeach.org/
WordCamp Tokyo 2012 なう
WCAN 2012 Autumn
USTREAM配信中 【セッション1】 USTREAM:WordCamp Tokyo 2012 セッション1 【セッション2】 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
1フォルダ = 1テーマ
テーマフォルダ内には 沢山のファイルが…
テーマを構成するファイル達
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