オリジナルテーマを作ろう!
2014/03/19
WordPress
オリジナルテーマを作ろう!
無料テーマを使おう!
2014/03/19
オリジナルテーマを作ろう!
無料テーマを使おう!
2014/03/19
今日のお題を完全に無視
オリジナルテーマを作ろう!
無料テーマを使おう!
2014/03/19
今日のお題を完全に無視
公式テーマ(管理画面/外観/テーマ/テーマのインストール)
Google検索(「WordPress 無料テーマ」でたくさんヒット)
無料テーマを使えばステキなサイトがたちどころに!
オリジナルテーマを作ろう!
無料テーマを使おう!
公式テーマ(管理画面/外観/テーマ/テーマのインストール)
Google検索(「WordPress 無料テーマ」でたくさんヒット)
無料テーマを使えばステキなサイトがたちどころに!
2014/03/19
今日のお題を完全に無視
テーマが用途・デザインに応じて豊富
開発コストがかからない
技術的にも基本的に安心
オリジナルテーマを作ろう!
無料テーマを使おう!
公式テーマ(管理画面/外観/テーマ/テーマのインストール)
Google検索(「WordPress 無料テーマ」でたくさんヒット)
無料テーマを使えばステキなサイトがたちどころに!
2014/03/19
今日のお題を完全に無視
テーマが用途・デザインに応じて豊富
開発コストがかからない
技術的にも基本的に安心
理想とするテーマがなかなか見つからない
汎用的に作られているので不要な機能がある
カスタマイズしたくてもどこがどうなってい
るか難解なことが多い
オリジナルテーマを作ろう!
無料テーマを使おう!
公式テーマ(管理画面/外観/テーマ/テーマのインストール)
Google検索(「WordPress 無料テーマ」でたくさんヒット)
無料テーマを使えばステキなサイトがたちどころに!
2014/03/19
今日のお題を完全に無視
テーマが用途・デザインに応じて豊富
開発コストがかからない
技術的にも基本的に安心
理想とするテーマがなかなか見つからない
汎用的に作られているので不要な機能がある
カスタマイズしたくてもどこがどうなってい
るか難解なことが多い
セキュリティなど不安な面も
オリジナルテーマを作ろう!
無料テーマを使おう!
公式テーマ(管理画面/外観/テーマ/テーマのインストール)
Google検索(「WordPress 無料テーマ」でたくさんヒット)
無料テーマを使えばステキなサイトがたちどころに!
2014/03/19
今日のお題を完全に無視
テーマが用途・デザインに応じて豊富
開発コストがかからない
技術的にも基本的に安心
理想とするテーマがなかなか見つからない
汎用的に作られているので不要な機能がある
カスタマイズしたくてもどこがどうなってい
るか難解なことが多い
だったらオリジナルを作ろう!
セキュリティなど不安な面も
オリジナルテーマを作ろう!
オリジナルテーマを作ろう!
2014/03/19
今日の本題
オリジナルテーマを作ろう!
オリジナルテーマを作ろう!
WordPressが動作する環境(MySQL、PHPが動作する環境)
ローカル環境/レンタルサーバー(サーバーなら要FTPソフト)
エディタ(Sublime Text, Dreamweaver, PHPStorm, Terapad)
2014/03/19
今日の本題
必要な環境
オリジナルテーマを作ろう!
オリジナルテーマを作ろう!
WordPressが動作する環境(MySQL、PHPが動作する環境)
ローカル環境/レンタルサーバー(サーバーなら要FTPソフト)
エディタ(Sublime Text, Dreamweaver, PHPStorm, Terapad)
2014/03/19
今日の本題
必要な環境
参考:ローカル環境構築
http://nekomimi-school.com/archives/category/mamp/
http://nekomimi-school.com/archives/category/xampp-for-windows/
http://nekomimi-school.com/archives/category/wordpress%E3%81%AE
%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/
参考:エディタ
http://wp-e.org/2014/03/19/1271/
オリジナルテーマを作ろう!
手順はいろいろある
既成テーマをカスタマイズしていく方法
デザインカンプをスライスしてまずhtmlを構築する方法
phpファイルにhtmlとphpのタグを直接記述していく方法
2014/03/19
オリジナルテーマを作ろう!
手順はいろいろある
既成テーマをカスタマイズしていく方法
デザインカンプをスライスしてまずhtmlを構築する方法
phpファイルにhtmlとphpのタグを直接記述していく方法
2014/03/19
今日の手順
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
オリジナルテーマを作ろう!
手順はいろいろある
既成テーマをカスタマイズしていく方法
デザインカンプをスライスしてまずhtmlを構築する方法
phpファイルにhtmlとphpのタグを直接記述していく方法
2014/03/19
今日の手順
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
この手順の利点
体裁(html/css)とプログラミング(php)を分けて考
えることができる
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
図のようなページを作ってみて!
• 幅:960px = 660+20+280
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
図のようなページを作ってみて!
ヘッダ
メイン
コンテンツ
サイドバー
フッタ
• 幅:960px = 660+20+280
• ヘッダ、メインコンテンツ、

サイドバー、フッタの構造を意識
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
図のようなページを作ってみて!
ヘッダ
メイン
コンテンツ
サイドバー
フッタ
• 幅:960px = 660+20+280
• ヘッダ、メインコンテンツ、

サイドバー、フッタの構造を意識
• 配布ファイル:

sample-theme1.zip
• まず編集するのは:

_dummy.html

style.css

style-reset.css

style-base.css

style-parts.css
基本構造
編集必要
スタイルを
設定していく
テーマ情報
リセット
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
図のようなページを作ってみて!
• 幅:960px = 660+20+280
• ヘッダ、メインコンテンツ、

サイドバー、フッタの構造を意識
• 配布ファイル:

sample-theme1.zip
• まず編集するのは:

_dummy.html

style.css

style-reset.css

style-base.css

style-parts.css
• 各パーツの色
基本構造
編集必要
スタイルを
設定していく
テーマ情報
リセット
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
図のようなページを作ってみて!
• 幅:960px = 660+20+280
• ヘッダ、メインコンテンツ、

サイドバー、フッタの構造を意識
• 配布ファイル:

sample-theme1.zip
• まず編集するのは:

_dummy.html

style.css

style-reset.css

style-base.css

style-parts.css
• 各パーツの色
基本構造
編集必要
スタイルを
設定していく
#F06
好きな色、好きなレイアウトで
そうぞ!
h2: #F90
h3: #FFC66F
背景:#FFF9EE
テーマ情報
リセット
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
_dummy.html
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
パーツphp
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバー
フッタ
パーツphp
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバー
フッタ
1. 既存のコードを残したまま該当箇所にコピペ
2. 必要な関数を既成コードからコピペ

サイトルート:home_url(), テーマフォルダ:get_template_directory_uri()
3. 残しておいた既成コードのいらない部分を削除
パーツphp
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバー
フッタ
パーツ
トップページ home.php
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバー
フッタ
パーツ
トップページ home.php
メインコンテンツ
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバー
フッタ
パーツ
トップページ home.php
メインコンテンツ
• 手順は基本的に同じ
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバー
フッタ
パーツ
トップページ home.php
メインコンテンツ
• 手順は基本的に同じ
• get_header(), get_footer(), get_sidebar()

各パーツphpを読み込むwp関数
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバー
フッタ
パーツ
トップページ home.php
メインコンテンツ
• 手順は基本的に同じ
• get_header(), get_footer(), get_sidebar()

各パーツphpを読み込むwp関数
• wp_head(), wp_footer() 

消してしまうとプラグインに不具合が生じる
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
home.php
header.php
sidebar.php
footer.php
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
home.php
header.php
sidebar.php
footer.php
style.css テーマ情報を編集する
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
home.php
header.php
sidebar.php
footer.php
style.css テーマ情報を編集する
index.php とりあえず空っぽ
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
home.php
header.php
sidebar.php
footer.php
style.css テーマ情報を編集する
index.php とりあえず空っぽ
テーマを有効化すればトップは完成!
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
home.php
header.php
sidebar.php
footer.php
style.css テーマ情報を編集する
index.php とりあえず空っぽ
テーマを有効化すればトップは完成!
404.php
single.php
page.php
archive.php
search.php
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
home.php
header.php
sidebar.php
footer.php
style.css テーマ情報を編集する
index.php とりあえず空っぽ
テーマを有効化すればトップは完成!
404.php
single.php
page.php
archive.php
search.php
これらは今回は

取り上げてい
ません
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築
シンプルな既成テーマにダミーページを移植
home.php
header.php
sidebar.php
footer.php
style.css テーマ情報を編集する
index.php とりあえず空っぽ
テーマを有効化すればトップは完成!
404.php
single.php
page.php
archive.php
search.php
これらは今回は

取り上げてい
ません
ここまでできたら
自力でできるはず!
オリジナルテーマを作ろう!
2014/03/19
WordPress
ありがとうございました

WordPress オリジナルテーマを作ろう!