WordPress オリジナルテーマを作ろう!
-
Upload
yusuke-hayasaki -
Category
Technology
-
view
2.926 -
download
0
Transcript of WordPress オリジナルテーマを作ろう!
![Page 1: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/1.jpg)
オリジナルテーマを作ろう!
2014/03/19
WordPress
![Page 2: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/2.jpg)
オリジナルテーマを作ろう!
無料テーマを使おう!
2014/03/19
![Page 3: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/3.jpg)
オリジナルテーマを作ろう!
無料テーマを使おう!
2014/03/19
今日のお題を完全に無視
![Page 4: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/4.jpg)
オリジナルテーマを作ろう!
無料テーマを使おう!
2014/03/19
今日のお題を完全に無視
公式テーマ(管理画面/外観/テーマ/テーマのインストール) Google検索(「WordPress 無料テーマ」でたくさんヒット) 無料テーマを使えばステキなサイトがたちどころに!
![Page 5: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/5.jpg)
オリジナルテーマを作ろう!
無料テーマを使おう!公式テーマ(管理画面/外観/テーマ/テーマのインストール) Google検索(「WordPress 無料テーマ」でたくさんヒット) 無料テーマを使えばステキなサイトがたちどころに!
2014/03/19
今日のお題を完全に無視
テーマが用途・デザインに応じて豊富 開発コストがかからない 技術的にも基本的に安心
![Page 6: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/6.jpg)
オリジナルテーマを作ろう!
無料テーマを使おう!公式テーマ(管理画面/外観/テーマ/テーマのインストール) Google検索(「WordPress 無料テーマ」でたくさんヒット) 無料テーマを使えばステキなサイトがたちどころに!
2014/03/19
今日のお題を完全に無視
テーマが用途・デザインに応じて豊富 開発コストがかからない 技術的にも基本的に安心
理想とするテーマがなかなか見つからない 汎用的に作られているので不要な機能がある カスタマイズしたくてもどこがどうなっているか難解なことが多い
![Page 7: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/7.jpg)
オリジナルテーマを作ろう!
無料テーマを使おう!公式テーマ(管理画面/外観/テーマ/テーマのインストール) Google検索(「WordPress 無料テーマ」でたくさんヒット) 無料テーマを使えばステキなサイトがたちどころに!
2014/03/19
今日のお題を完全に無視
テーマが用途・デザインに応じて豊富 開発コストがかからない 技術的にも基本的に安心
理想とするテーマがなかなか見つからない 汎用的に作られているので不要な機能がある カスタマイズしたくてもどこがどうなっているか難解なことが多い
セキュリティなど不安な面も
![Page 8: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/8.jpg)
オリジナルテーマを作ろう!
無料テーマを使おう!公式テーマ(管理画面/外観/テーマ/テーマのインストール) Google検索(「WordPress 無料テーマ」でたくさんヒット) 無料テーマを使えばステキなサイトがたちどころに!
2014/03/19
今日のお題を完全に無視
テーマが用途・デザインに応じて豊富 開発コストがかからない 技術的にも基本的に安心
理想とするテーマがなかなか見つからない 汎用的に作られているので不要な機能がある カスタマイズしたくてもどこがどうなっているか難解なことが多い
だったらオリジナルを作ろう!
セキュリティなど不安な面も
![Page 9: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/9.jpg)
オリジナルテーマを作ろう!
オリジナルテーマを作ろう!
2014/03/19
今日の本題
![Page 10: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/10.jpg)
オリジナルテーマを作ろう!
オリジナルテーマを作ろう!
WordPressが動作する環境(MySQL、PHPが動作する環境) ローカル環境/レンタルサーバー(サーバーなら要FTPソフト) エディタ(Sublime Text, Dreamweaver, PHPStorm, Terapad)
2014/03/19
今日の本題
必要な環境
![Page 11: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/11.jpg)
オリジナルテーマを作ろう!
オリジナルテーマを作ろう!
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/
![Page 12: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/12.jpg)
オリジナルテーマを作ろう!
手順はいろいろある既成テーマをカスタマイズしていく方法 デザインカンプをスライスしてまずhtmlを構築する方法 phpファイルにhtmlとphpのタグを直接記述していく方法
2014/03/19
![Page 13: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/13.jpg)
オリジナルテーマを作ろう!
手順はいろいろある既成テーマをカスタマイズしていく方法 デザインカンプをスライスしてまずhtmlを構築する方法 phpファイルにhtmlとphpのタグを直接記述していく方法
2014/03/19
今日の手順htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
![Page 14: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/14.jpg)
オリジナルテーマを作ろう!
手順はいろいろある既成テーマをカスタマイズしていく方法 デザインカンプをスライスしてまずhtmlを構築する方法 phpファイルにhtmlとphpのタグを直接記述していく方法
2014/03/19
今日の手順htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
この手順の利点体裁(html/css)とプログラミング(php)を分けて考えることができる
![Page 15: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/15.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
![Page 16: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/16.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
図のようなページを作ってみて!
• 幅:960px = 660+20+280
![Page 17: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/17.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
図のようなページを作ってみて!
ヘッダ
メイン コンテンツ
サイドバー
フッタ
• 幅:960px = 660+20+280
• ヘッダ、メインコンテンツ、サイドバー、フッタの構造を意識
![Page 18: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/18.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
図のようなページを作ってみて!
ヘッダ
メイン コンテンツ
サイドバー
フッタ
• 幅:960px = 660+20+280
• ヘッダ、メインコンテンツ、サイドバー、フッタの構造を意識
• 配布ファイル:sample-theme1.zip
• まず編集するのは:_dummy.htmlstyle.cssstyle-reset.cssstyle-base.cssstyle-parts.css
基本構造 編集必要
スタイルを 設定していく
テーマ情報リセット
![Page 19: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/19.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
図のようなページを作ってみて!
• 幅:960px = 660+20+280
• ヘッダ、メインコンテンツ、サイドバー、フッタの構造を意識
• 配布ファイル:sample-theme1.zip
• まず編集するのは:_dummy.htmlstyle.cssstyle-reset.cssstyle-base.cssstyle-parts.css
• 各パーツの色
基本構造 編集必要
スタイルを 設定していく
テーマ情報リセット
![Page 20: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/20.jpg)
オリジナルテーマを作ろう!
ハンズオン
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
テーマ情報リセット
![Page 21: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/21.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
![Page 22: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/22.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
_dummy.html
![Page 23: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/23.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
パーツphp
![Page 24: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/24.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバーフッタ
パーツphp
![Page 25: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/25.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバーフッタ
1. 既存のコードを残したまま該当箇所にコピペ 2. 必要な関数を既成コードからコピペサイトルート:home_url(), テーマフォルダ:get_template_directory_uri()
3. 残しておいた既成コードのいらない部分を削除
パーツphp
![Page 26: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/26.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバーフッタ
パーツ
トップページ home.php
![Page 27: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/27.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバーフッタ
パーツ
トップページ home.php
メインコンテンツ
![Page 28: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/28.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバーフッタ
パーツ
トップページ home.php
メインコンテンツ
• 手順は基本的に同じ
![Page 29: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/29.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植
_dummy.html
header.php
footer.php
sidebar.php
ヘッダ
サイドバーフッタ
パーツ
トップページ home.php
メインコンテンツ
• 手順は基本的に同じ • get_header(), get_footer(), get_sidebar()各パーツphpを読み込むwp関数
![Page 30: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/30.jpg)
オリジナルテーマを作ろう!
ハンズオン
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() 消してしまうとプラグインに不具合が生じる
![Page 31: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/31.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植home.php header.php sidebar.php footer.php
![Page 32: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/32.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植home.php header.php sidebar.php footer.php
style.css テーマ情報を編集する
![Page 33: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/33.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植home.php header.php sidebar.php footer.php
style.css テーマ情報を編集するindex.php とりあえず空っぽ
![Page 34: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/34.jpg)
オリジナルテーマを作ろう!
ハンズオン
2014/03/19
htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植home.php header.php sidebar.php footer.php
style.css テーマ情報を編集するindex.php とりあえず空っぽ
テーマを有効化すればトップは完成!
![Page 35: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/35.jpg)
オリジナルテーマを作ろう!
ハンズオン
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
![Page 36: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/36.jpg)
オリジナルテーマを作ろう!
ハンズオン
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
これらは今回は取り上げてい ません
![Page 37: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/37.jpg)
オリジナルテーマを作ろう!
ハンズオン
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
これらは今回は取り上げてい ませんここまでできたら 自力でできるはず!
![Page 38: WordPress オリジナルテーマを作ろう!](https://reader035.fdocuments.net/reader035/viewer/2022062406/559849151a28ab48168b47ab/html5/thumbnails/38.jpg)
オリジナルテーマを作ろう!
2014/03/19
WordPressありがとうございました