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

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.htmlstyle.cssstyle-reset.cssstyle-base.cssstyle-parts.css

基本構造 編集必要

スタイルを 設定していく

テーマ情報リセット

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

ハンズオン

2014/03/19

図のようなページを作ってみて！

• 幅：960px = 660+20+280

• ヘッダ、メインコンテンツ、サイドバー、フッタの構造を意識

• 配布ファイル：sample-theme1.zip

• まず編集するのは：_dummy.htmlstyle.cssstyle-reset.cssstyle-base.cssstyle-parts.css

• 各パーツの色

基本構造 編集必要

スタイルを 設定していく

テーマ情報リセット

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

ハンズオン

2014/03/19

図のようなページを作ってみて！

• 幅：960px = 660+20+280

• ヘッダ、メインコンテンツ、サイドバー、フッタの構造を意識

• 配布ファイル：sample-theme1.zip

• まず編集するのは：_dummy.htmlstyle.cssstyle-reset.cssstyle-base.cssstyle-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ありがとうございました