Upload
yusuke-hayasaki
View
2.926
Download
0
Embed Size (px)
Citation preview
オリジナルテーマを作ろう!
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ありがとうございました