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

2. WordPress ー テーマ構成について理解しよう
テーマの最小構成
•
style.css
@charset "utf-8";
/*
Theme Name: test theme
*/
管理画面上でテーマとして認識されるが・・・
http://www.yahss.net
Yusuke Hayasaki

3. WordPress ー テーマ構成について理解しよう
テーマの最小構成
•
style.css
@charset "utf-8";
/*
Theme Name: test theme
*/
管理画面上でテーマとして認識されるが・・・
これだけでは「壊れているテーマ」
になってしまう
http://www.yahss.net
Yusuke Hayasaki

4. WordPress ー テーマ構成について理解しよう
テーマの最小構成
•
style.css
@charset "utf-8";
/*
Theme Name: test theme
*/
管理画面上でテーマとして認識されるが・・・
これだけでは「壊れているテーマ」
になってしまう
•
index.php ←追加すると（中身は空）
テーマとして認識される
http://www.yahss.net
Yusuke Hayasaki

5. WordPress ー テーマ構成について理解しよう
テーマの最小構成
•
style.css
@charset "utf-8";
/*
Theme Name: test theme
*/
•
管理画面上でテーマとして認識されるが・・・
これだけでは「壊れているテーマ」
になってしまう
フロントは
index.php ←追加すると（中身は空）
真っ白
テーマとして認識される
http://www.yahss.net
Yusuke Hayasaki

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. 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. 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. 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. 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. 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. 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. 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. 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. WordPress ー テーマ構成について理解しよう
テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
http://www.yahss.net
Yusuke Hayasaki

16. WordPress ー テーマ構成について理解しよう
テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
特定のページを開く時にどのテンプレートを
参照するか調べるのにとても便利
http://www.yahss.net
Yusuke Hayasaki

17. WordPress ー テーマ構成について理解しよう
テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
特定のページを開く時にどのテンプレートを
参照するか調べるのにとても便利
開発する上でこの理解はとても大事
http://www.yahss.net
Yusuke Hayasaki

18. WordPress ー テーマ構成について理解しよう
テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
特定のページを開く時にどのテンプレートを
参照するか調べるのにとても便利
開発する上でこの理解はとても大事
便利なプラグイン：Show Current Template
http://www.yahss.net
Yusuke Hayasaki

19. WordPress ー テーマ構成について理解しよう
テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
トップページを表示するのはどれ？
http://www.yahss.net
Yusuke Hayasaki

20. WordPress ー テーマ構成について理解しよう
テンプレート構成
http://wpdocs.sourceforge.jp/
テンプレート構成
トップページを表示するのはどれ？
•
indes.php
•
front-page.php
•
home.php
http://www.yahss.net
Yusuke Hayasaki

21. WordPress
テーマ構成について理解しよう
ありがとうございました