Recommended
Recommended
More Related Content
More from Yusuke Hayasaki
Recently uploaded
Recently uploaded (8)
WordPress オリジナルテーマを作ろう！
- 10. オリジナルテーマを作ろう！ オリジナルテーマを作ろう！ WordPressが動作する環境（MySQL、PHPが動作する環境） ローカル環境/レンタルサーバー（サーバーなら要FTPソフト） エディタ（Sublime Text, Dreamweaver, PHPStorm, Terapad） 2014/03/19 今日の本題 必要な環境
- 11. オリジナルテーマを作ろう！ オリジナルテーマを作ろう！ 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/
- 16. オリジナルテーマを作ろう！ ハンズオン 2014/03/19 図のようなページを作ってみて！ • 幅：960px = 660+20+280
- 17. オリジナルテーマを作ろう！ ハンズオン 2014/03/19 図のようなページを作ってみて！ ヘッダ メイン コンテンツ サイドバー フッタ • 幅：960px = 660+20+280 • ヘッダ、メインコンテンツ、 サイドバー、フッタの構造を意識
- 18. オリジナルテーマを作ろう！ ハンズオン 2014/03/19 図のようなページを作ってみて！ ヘッダ メイン コンテンツ サイドバー フッタ • 幅：960px = 660+20+280 • ヘッダ、メインコンテンツ、 サイドバー、フッタの構造を意識 • 配布ファイル： sample-theme1.zip • まず編集するのは： _dummy.html style.css style-reset.css style-base.css style-parts.css 基本構造 編集必要 スタイルを 設定していく テーマ情報 リセット
- 19. オリジナルテーマを作ろう！ ハンズオン 2014/03/19 図のようなページを作ってみて！ • 幅：960px = 660+20+280 • ヘッダ、メインコンテンツ、 サイドバー、フッタの構造を意識 • 配布ファイル： sample-theme1.zip • まず編集するのは： _dummy.html style.css style-reset.css style-base.css style-parts.css • 各パーツの色 基本構造 編集必要 スタイルを 設定していく テーマ情報 リセット
- 20. オリジナルテーマを作ろう！ ハンズオン 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 テーマ情報 リセット
- 25. オリジナルテーマを作ろう！ ハンズオン 2014/03/19 htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植 _dummy.html header.php footer.php sidebar.php ヘッダ サイドバー フッタ 1. 既存のコードを残したまま該当箇所にコピペ 2. 必要な関数を既成コードからコピペ サイトルート：home_url(), テーマフォルダ：get_template_directory_uri() 3. 残しておいた既成コードのいらない部分を削除 パーツphp
- 29. オリジナルテーマを作ろう！ ハンズオン 2014/03/19 htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植 _dummy.html header.php footer.php sidebar.php ヘッダ サイドバー フッタ パーツ トップページ home.php メインコンテンツ • 手順は基本的に同じ • get_header(), get_footer(), get_sidebar() 各パーツphpを読み込むwp関数
- 30. オリジナルテーマを作ろう！ ハンズオン 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() 消してしまうとプラグインに不具合が生じる