Más contenido relacionado Similar a 今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn] (20) 今さら聞けないWordPressのあんなことこんなこと [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
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
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
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
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配信中
【セッション1】
USTREAM:WordCamp Tokyo 2012 セッション1
【セッション2】
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
25. 動作環境
WordPress 3.4 日本語版
PHP バージョン 5.2.4 以上
MySQL バージョン 5.0.15 以上
今回のデモ環境
WebMatrix
http://www.microsoft.com/web/webmatrix/
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
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
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
42. テーマ制作の参考になるテーマ
Classic テーマ
http://wordpress.org/extend/themes/classic
初期頃のデフォルトテーマ
機能が少ないため、テーマの基礎を学ぶには最適
半日でわかる!WordPressのお作法
https://gihyo.jp/dp/ebook/2011/G11B04
無料の電子書籍です。WordPressを学ぶ取っ掛かりとしてご利用下さい。
WCAN 2012 Autumn