ゼロからのWordPress（第三回）〜テーマの構造、カスタマイズの基礎〜

WORD COM:MUNITYCHANNEL

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

自己紹介

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

Yutaro Miyazaki

テーマのしくみ

テーマをカスタマイズしてみよう

今日の流れ

WordPressコミュニティ紹介

今日の目標

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

wordpress.orgからダウンロードすると

wordpress/wp-content/themes/

テーマファイルの場所

テーマのしくみ > テーマファイルの構成を知ろう

}

※サーバー環境により、若干異なる場合もあります。

/home/www

example

テーマファイルの場所



WordPressテーマの構成

主なファイルの種類


style.css

ページの見た目を担当


js/functions.js

ブラウザでの動きを担当


index.php

コンテンツの取得/出力を担当

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

トップページ(ブログ)では

index.php

記事10個くださいあ、どうぞ


テンプレートファイルの役割

footer.php

sidebar.php

header.php

index.php }再利用


header.php


sidebar.php


footer.php


index.php (コンテンツ部分)


index.phpと同じ働きをするテンプレートファイル◦ index.php◦single.php◦page.php◦archive.php◦etc…

http://codex.wordpress.org/Template_Hierarchyhttp://wpdocs.sourceforge.jp/テンプレート階層

テンプレート階層


固定ページでは

page.php

"サンプルページ"ください

あ、どうぞ


WordPressの気持ちになってページを表示する時のテンプレートファイルを探してみる

テーマのしくみ > テーマ編集機能の使い方

管理画面のテーマ編集からテーマの見た目をカスタマイズしてみる


style.css

見た目を担当するのはcssの役割!!

カスタマイズしてみよう > テーマ編集時の注意点

ん、ちょっと待てよ、初心者は管理画面から直接テーマ編集しないほうがいいって、前回の放送で後藤さんが言ってた!!


悲しい事故を回避するために

• テキストをコピーしておく• ローカルで編集する• 子テーマを使う


悲しい事故を回避するために

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 で用いるテキストエディタ

カスタマイズしてみよう > 子テーマを作ってみる

子テーマという機能がある

http://wpdocs.sourceforge.jp/Child_Themes子テーマ - Codex


子テーマという機能がある

遺伝神

髪の毛はサラサラに(header.php)

目は青くしようかな(style.css)

足は長くしよう(footer.php)


子テーマの働き

親テーマ

style.cssindex.phpfunctions.jsetc…

子テーマ

変更したいファイルだけex. style.css

Customized!! Customized!!


子テーマつくってみる

One-Click Child Theme

カスタマイズしてみよう > style.cssを編集して見た目を変えてみる

おまけbackground-color: 背景色;color: テキストの色;font-size: 文字のサイズ; font-weight: bold; 文字を太字に出来ます。font-weight: normal; 文字の太さが普通になります。max-width: 要素の横幅の最大値;width: 横幅; 変更しない方がいいと思います。

カスタマイズしてみよう > style.cssを編集して見た目を変えてみる

おまけmargin-bottom: 下;margin-left: 左; でそれぞれ個別に指定することも出来ます。margin-right: 右;margin-top: 上;margin: 上右下左;

※ px、em、%、rem 等は

WordPressコミュニティの紹介

http://wordbench.org/

各地の情報は公式サイトから

http://ja.wordpress.org/

WordPressのイベントカレンダー

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香川

5月 29日 (木), 18:30 ～ 21:00

コワーキングスペース「SOMETHIN' ELSE」（群馬県高崎市）


[群馬] WordPressもくもく勉強会@群馬 #11

6月 6日 (金), 19:00 ～ 21:45

ベルサール新宿グランド（東京都新宿区）

[東京] WordBench東京6月: WordPressの創始者マット・マレンウェッグがやってくる！

6月 7日 (土), 10:00 ～ 18:00

ナレッジキャピタルカンファレンスルーム（大阪府大阪市）


[大阪] WordCamp Kansai 2014

6月 8日 (日), 10:00 ～ 18:00

ナレッジキャピタルカンファレンスルーム（大阪府大阪市）

[大阪] WordCamp Kansai 2014 コントリビューターデイ

6月 14日 (土), 時間未定

コワーキングスペースOffice7F（埼玉県さいたま市）

[埼玉] WordBench埼玉

6月15日(日)

オリジナルテーマの準備テーマのインストール

データベースや環境について

次回

講　師：宮崎優太郎司　会：肥田真紀子

協　力：CASE Shinjuku

Business

ゼロからのWordPress（第三回）〜テーマの構造、カスタマイズの基礎〜