Download as PDF, PPTX
WordPress オリジナルテーマを作ろう！
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 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/
- 12.
- 13.
- 14.
- 15.
- 16.
- 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 テーマ情報 リセット
- 21.
- 22.
- 23.
- 24.
- 25. オリジナルテーマを作ろう！ ハンズオン 2014/03/19 htmlとcssでトップのダミーページを構築 シンプルな既成テーマにダミーページを移植 _dummy.html header.php footer.php sidebar.php ヘッダ サイドバー フッタ 1. 既存のコードを残したまま該当箇所にコピペ 2. 必要な関数を既成コードからコピペ サイトルート：home_url(),テーマフォルダ：get_template_directory_uri() 3. 残しておいた既成コードのいらない部分を削除 パーツphp
- 26.
- 27.
- 28.
- 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() 消してしまうとプラグインに不具合が生じる
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.