WordPress
テーマ構成について理解しよう

2014/3/5
WordPress ー テーマ構成について理解しよう

テーマの最小構成
•

style.css
@charset "utf-8";
/*
Theme Name: test theme
*/

管理画面上でテーマとして認識されるが・・・

h...
WordPress ー テーマ構成について理解しよう

テーマの最小構成
•

style.css
@charset "utf-8";
/*
Theme Name: test theme
*/

管理画面上でテーマとして認識されるが・・・
これ...
WordPress ー テーマ構成について理解しよう

テーマの最小構成
•

style.css
@charset "utf-8";
/*
Theme Name: test theme
*/

管理画面上でテーマとして認識されるが・・・
これ...
WordPress ー テーマ構成について理解しよう

テーマの最小構成
•

style.css
@charset "utf-8";
/*
Theme Name: test theme
*/

•

管理画面上でテーマとして認識されるが・・・...
WordPress ー テーマ構成について理解しよう

テーマの最小構成
•

style.css もう少しテーマ情報をちゃんと記述すると
@charset "utf-8";
/*
Theme Name: test theme
Theme UR...
WordPress ー テーマ構成について理解しよう

標準的な最小構成
•

404.php

•

page.php

•

archive.php

•

screenshot.php

•

category.php

•

searc...
WordPress ー テーマ構成について理解しよう

標準的な最小構成
•

404.php

•

page.php

•

archive.php

•

screenshot.php

•

category.php

•

searc...
WordPress ー テーマ構成について理解しよう

標準的な最小構成
•

404.php

•

page.php

•

archive.php

•

screenshot.php

•

category.php

•

searc...
WordPress ー テーマ構成について理解しよう

標準的な最小構成
•

404.php

•

page.php

•

archive.php

•

screenshot.php

•

category.php

•

searc...
WordPress ー テーマ構成について理解しよう

標準的な最小構成
•

404.php

•

page.php

•

archive.php

•

screenshot.php

•

category.php

•

searc...
WordPress ー テーマ構成について理解しよう

標準的な最小構成
•

404.php

•

ページが存在しない
•

page.php

archive.php

•

screenshot.php

•

category.php...
WordPress ー テーマ構成について理解しよう

標準的な最小構成
•

404.php

•

page.php

•

archive.php

•

screenshot.php

•

category.php

•

searc...
WordPress ー テーマ構成について理解しよう

標準的な最小構成
archive.phpで読み込んでいる例
• 404.php
• page.php
get_template_part( 'content', get_post_form...
WordPress ー テーマ構成について理解しよう

テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成

http://www.yahss.net

Yusuke Hayasaki
WordPress ー テーマ構成について理解しよう

テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
特定のページを開く時にどのテンプレートを
参照するか調べるのにとても便利

http://w...
WordPress ー テーマ構成について理解しよう

テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
特定のページを開く時にどのテンプレートを
参照するか調べるのにとても便利

開発する上でこの...
WordPress ー テーマ構成について理解しよう

テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
特定のページを開く時にどのテンプレートを
参照するか調べるのにとても便利

開発する上でこの...
WordPress ー テーマ構成について理解しよう

テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
トップページを表示するのはどれ?

http://www.yahss.net

Yusuke...
WordPress ー テーマ構成について理解しよう

テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
トップページを表示するのはどれ?
•

indes.php

•

front-page.p...
WordPress
テーマ構成について理解しよう

ありがとうございました
Upcoming SlideShare
Loading in …5
×

WordPress — テーマ構成について理解しよう

948 views

Published on

Published in: Education
  • Be the first to comment

WordPress — テーマ構成について理解しよう

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

×