ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/663/room ーーーーーーーーーーーーーーーーーーーーーーー

1. WORDCOM:MUNITYCHANNEL

2. テーマの構造、カスタマイズ基礎

3. 自己紹介
• 2年前からWebとWordPressの勉強
• WordPressサイトを中心に制作
• 東京/埼玉を中心に
WordPressコミュニティで活動
• アイコンはインパクト重視
Yutaro Miyazaki

4. テーマのしくみ
テーマをカスタマイズしてみよう
今日の流れ
WordPressコミュニティ紹介

5. 今日の目標
1. WordPressテーマの基礎知識を身につける
2. テーマをカスタマイズしていく時のTips
3. 比較的簡単にできるcssから
サイトの見た目を変えてみる。

6. wordpress.orgからダウンロードすると
wordpress/wp-content/themes/
テーマファイルの場所
テーマのしくみ > テーマファイルの構成を知ろう

7. ※サーバー環境により、若干異なる場合もあります。
/home/www
example
テーマファイルの場所
テーマのしくみ > テーマファイルの構成を知ろう

8. テーマのしくみ > テーマファイルの構成を知ろう
WordPressテーマの構成
主なファイルの種類

9. テーマのしくみ > テーマファイルの構成を知ろう
style.css
ページの見た目を担当

10. テーマのしくみ > テーマファイルの構成を知ろう
js/functions.js
ブラウザでの動きを担当

11. テーマのしくみ > テーマファイルの構成を知ろう
index.php
コンテンツの取得/出力を担当

12. テーマのしくみ > WordPressとテンプレートファイルの関係
トップページ(ブログ)では
index.php
記事10個ください
あ、どうぞ

13. テーマのしくみ > WordPressとテンプレートファイルの関係
テンプレートファイルの役割
footer.php
sidebar.php
header.php
index.php }再利用

14. テーマのしくみ > WordPressとテンプレートファイルの関係
header.php

15. テーマのしくみ > WordPressとテンプレートファイルの関係
sidebar.php

16. テーマのしくみ > WordPressとテンプレートファイルの関係
footer.php

17. テーマのしくみ > WordPressとテンプレートファイルの関係
index.php (コンテンツ部分)

18. テーマのしくみ > WordPressとテンプレートファイルの関係
index.phpと同じ働きをする
テンプレートファイル
◦index.php
◦single.php
◦page.php
◦archive.php
◦etc…
http://codex.wordpress.org/Template_Hierarchy
http://wpdocs.sourceforge.jp/テンプレート階層
テンプレート階層

19. テーマのしくみ > WordPressとテンプレートファイルの関係
固定ページでは
page.php
"サンプルページ"ください
あ、どうぞ

20. テーマのしくみ > WordPressとテンプレートファイルの関係
WordPressの気持ちになって
ページを表示する時のテンプレートファイルを探してみる

21. テーマのしくみ > テーマ編集機能の使い方
管理画面のテーマ編集から
テーマの見た目をカスタマイズしてみる

22. テーマのしくみ > テーマファイルの構成を知ろう
style.css
見た目を担当するのは
cssの役割!!

23. カスタマイズしてみよう > テーマ編集時の注意点
ん、ちょっと待てよ、
初心者は管理画面から直接
テーマ編集しないほうがいいって、
前回の放送で後藤さんが言ってた!!

24. カスタマイズしてみよう > テーマ編集時の注意点
悲しい事故を回避するために
• テキストをコピーしておく
• ローカルで編集する
• 子テーマを使う

25. カスタマイズしてみよう > テーマ編集時の注意点
悲しい事故を回避するために
http://wpdocs.sourceforge.jp/用語集
#.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.82.A8.E3.83.87.E3.82.A3.E3.82.
BF
WordPress で用いるテキストエディタ

26. カスタマイズしてみよう > 子テーマを作ってみる
子テーマという機能がある
http://wpdocs.sourceforge.jp/Child_Themes
子テーマ - Codex

27. カスタマイズしてみよう > 子テーマを作ってみる
子テーマという機能がある
遺伝 神
髪の毛はサラサラに
(header.php)
目は青くしようかな
(style.css)
足は長くしよう
(footer.php)

28. カスタマイズしてみよう > 子テーマを作ってみる
子テーマの働き
親テーマ
style.css
index.php
functions.js
etc…
子テーマ
変更したい
ファイルだけ
ex. style.css
Customized!! Customized!!

29. カスタマイズしてみよう > 子テーマを作ってみる
子テーマつくってみる
One-Click Child Theme

30. カスタマイズしてみよう > style.cssを編集して見た目を変えてみる
おまけ
background-color: 背景色;
color: テキストの色;
font-size: 文字のサイズ;
font-weight: bold; 文字を太字に出来ます。
font-weight: normal; 文字の太さが普通になります。
max-width: 要素の横幅の最大値;
width: 横幅; 変更しない方がいいと思います。

31. カスタマイズしてみよう > style.cssを編集して見た目を変えてみる
おまけ
margin-bottom: 下;
margin-left: 左; でそれぞれ個別に指定することも出来ます。
margin-right: 右;
margin-top: 上;
margin: 上 右 下 左;
※ px、em、%、rem 等は

33. WordPressコミュニティの紹介

36. http://wordbench.org/
各地の情報は公式サイトから

37. http://ja.wordpress.org/
WordPressのイベントカレンダー

38. 5月 20日 (火), 19:00 ～ 21:00
コワーキングスペース茅場町 Co-Edo（東京都中央区）
5月/6月のイベント予定
[東京] 第10回ゼロから始めるWordPress勉強会
5月 24日 (土), 11:00 ～ 14:00
コワーキングスペース茅場町 Co-Edo（東京都中央区）
[東京] WordPress Meetup Tokyo #13
5月 24日 (土), 13:00 ～ 17:30
デザインラボラトリー蒼（香川県高松市）
[香川] 第13回WordPressお茶会 WordBench香川

39. 5月 29日 (木), 18:30 ～ 21:00
コワーキングスペース「SOMETHIN' ELSE」（群馬県高崎市）
5月/6月のイベント予定
[群馬] WordPressもくもく勉強会@群馬 #11
6月 6日 (金), 19:00 ～ 21:45
ベルサール新宿グランド（東京都新宿区）
[東京] WordBench東京6月: WordPressの創始者マッ
ト・マレンウェッグがやってくる！

40. 6月 7日 (土), 10:00 ～ 18:00
ナレッジキャピタル カンファレンスルーム（大阪府大阪市）
5月/6月のイベント予定
[大阪] WordCamp Kansai 2014
6月 8日 (日), 10:00 ～ 18:00
ナレッジキャピタル カンファレンスルーム（大阪府大阪市）
[大阪] WordCamp Kansai 2014 コントリビューターデイ
6月 14日 (土), 時間未定
コワーキングスペースOffice7F（埼玉県さいたま市）
[埼玉] WordBench埼玉

42. 6月15日(日)
オリジナルテーマの準備
テーマのインストール
データベースや環境について
次回

43. 講 師：宮崎 優太郎
司 会：肥田 真紀子
協 力：CASE Shinjuku