wordpress — テーマ構成について理解しよう
TRANSCRIPT
![Page 1: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/1.jpg)
WordPressテーマ構成について理解しよう
2014/3/5
![Page 2: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/2.jpg)
テーマの最小構成• style.css
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
@charset "utf-8"; /* Theme Name: test theme */
管理画面上でテーマとして認識されるが・・・
![Page 3: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/3.jpg)
テーマの最小構成• style.css
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
@charset "utf-8"; /* Theme Name: test theme */
管理画面上でテーマとして認識されるが・・・ これだけでは「壊れているテーマ」 になってしまう
![Page 4: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/4.jpg)
テーマの最小構成• style.css
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
@charset "utf-8"; /* Theme Name: test theme */
管理画面上でテーマとして認識されるが・・・ これだけでは「壊れているテーマ」 になってしまう
←追加すると(中身は空) テーマとして認識される
• index.php
![Page 5: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/5.jpg)
テーマの最小構成• style.css
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
@charset "utf-8"; /* Theme Name: test theme */
フロントは 真っ白←追加すると(中身は空)
テーマとして認識される
管理画面上でテーマとして認識されるが・・・ これだけでは「壊れているテーマ」 になってしまう
• index.php
![Page 6: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/6.jpg)
テーマの最小構成• style.css
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
@charset "utf-8"; /* Theme Name: test theme Theme URI: http://www.yahss.net/ Author: YAH! System Service Author URI: http://www.yahss.net/ Description: This is for test. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
• index.php
もう少しテーマ情報をちゃんと記述すると
![Page 7: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/7.jpg)
• 404.php • archive.php • category.php • comments.php • content.php • footer.php • header.php • index.php
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
• page.php • screenshot.php • search.php • sidebar.php • single.php • style.css • tag.php
標準的な最小構成
最小限必要なファイルは2つ
![Page 8: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/8.jpg)
• 404.php • archive.php • category.php • comments.php • content.php • footer.php • header.php • index.php
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
• page.php • screenshot.php • search.php • sidebar.php • single.php • style.css • tag.php
標準的な最小構成
ヘッダー、サイドバー、フッター共通パーツをinclude
![Page 9: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/9.jpg)
• 404.php • archive.php • category.php • comments.php • content.php • footer.php • header.php • index.php
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
• page.php • screenshot.php • search.php • sidebar.php • single.php • style.css • tag.php
標準的な最小構成
アーカイブ(書庫) 個別記事を集めたページ
![Page 10: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/10.jpg)
• 404.php • archive.php • category.php • comments.php • content.php • footer.php • header.php • index.php
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
• page.php • screenshot.php • search.php • sidebar.php • single.php • style.css • tag.php
標準的な最小構成
固定ページ
![Page 11: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/11.jpg)
• 404.php • archive.php • category.php • comments.php • content.php • footer.php • header.php • index.php
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
• page.php • screenshot.php • search.php • sidebar.php • single.php • style.css • tag.php
標準的な最小構成
記事(シングル)
![Page 12: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/12.jpg)
• 404.php • archive.php • category.php • comments.php • content.php • footer.php • header.php • index.php
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
• page.php • screenshot.php • search.php • sidebar.php • single.php • style.css • tag.php
標準的な最小構成
その他のテンプレート
ページが存在しない
コメント
ループ内の 記事表示
検索結果
![Page 13: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/13.jpg)
• 404.php • archive.php • category.php • comments.php • content.php • footer.php • header.php • index.php
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
• page.php • screenshot.php • search.php • sidebar.php • single.php • style.css • tag.php
標準的な最小構成
Twenty Fourteenでは content-$slug.phpがたくさん
ループ内の 記事表示
![Page 14: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/14.jpg)
• page.php • screenshot.php • search.php • sidebar.php • single.php • style.css • tag.php
• 404.php • archive.php • category.php • comments.php
get_template_part( 'content', get_post_format() );
• content.php
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
標準的な最小構成
Twenty Fourteenでは content-$slug.phpがたくさん
• footer.php • header.php • index.php
archive.phpで読み込んでいる例
投稿画面の 選択に基づいて テンプレートを 選択している
![Page 15: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/15.jpg)
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
テンプレート構成http://wpdocs.sourceforge.jp/
テンプレート構成
![Page 16: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/16.jpg)
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
テンプレート構成http://wpdocs.sourceforge.jp/
テンプレート構成
特定のページを開く時にどのテンプレートを参照するか調べるのにとても便利
![Page 17: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/17.jpg)
特定のページを開く時にどのテンプレートを参照するか調べるのにとても便利
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
テンプレート構成http://wpdocs.sourceforge.jp/
テンプレート構成
開発する上でこの理解はとても大事
![Page 18: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/18.jpg)
特定のページを開く時にどのテンプレートを参照するか調べるのにとても便利
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
テンプレート構成
開発する上でこの理解はとても大事 便利なプラグイン:Show Current Template
http://wpdocs.sourceforge.jp/テンプレート構成
![Page 19: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/19.jpg)
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
テンプレート構成
トップページを表示するのはどれ?
http://wpdocs.sourceforge.jp/テンプレート構成
![Page 20: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/20.jpg)
WordPress ー テーマ構成について理解しよう
http://www.yahss.net Yusuke Hayasaki
テンプレート構成
トップページを表示するのはどれ?
http://wpdocs.sourceforge.jp/テンプレート構成
• indes.php • front-page.php • home.php
![Page 21: WordPress — テーマ構成について理解しよう](https://reader034.vdocuments.mx/reader034/viewer/2022052600/557b564bd8b42a1f1a8b47ee/html5/thumbnails/21.jpg)
WordPressテーマ構成について理解しよう
ありがとうございました