2014/03/15 WordBench宮崎のプレゼン内容です。

1. © wordbonch.org
WordPress テーマ作成
WordBench宮崎
ver.1.0.0【WordBench宮崎勉強会】

2. © wordbonch.org
自己紹介
1
高見 和也（Takami Kazuya）
Twitter@miiitaka
Facebook@miiitaka
株式会社アラタナ
サービス開発部：フロントエンドチーム
PHPやJavaScriptとかスクリプト系言語好き。

3. © wordbonch.org
まずは基本
2
WordPressの基本構造を理解
(説明内容はWordPress3.8ベースです)

4. © wordbonch.org
WordPressの基本階層は以下のとおりです。大きく3つのフォルダがあります。
WordPressの基本構造を理解（主要ディレクトリ）
3
/wp-admin/
管理画面で使用するファイルあれこれがある。基本触らない。
/wp-content/
基本、このフォルダの中をさわりましょう。
/wp-include/
WP全体で使用するJSやCSS、コアファイルがある。これも基本触らない。
/
ルート直下は、ログイン関連やRSS関連、コメント、トラックバック、メール送受信用の
ファイルなどなど

5. © wordbonch.org
wp-contentフォルダのさらに中のお話。
WordPressの基本構造を理解（wp-contentフォルダ）
4
/wp-content/
/wp-content/language/
言語パック
/wp-content/plugin/
インストールしたプラグインが保存されている場所
/wp-content/themes/
各種テーマのテンプレートが保存されている場所
/wp-content/upgrade/
バージョンアップ時に使用。
/wp-content/upload/
管理画面からアップロードしたメディアファイルが保存されている場所。
年→月でいい感じに保存されています。

6. © wordbonch.org
今回は/wp-content/themes/が主役です。
WordPressの基本構造を理解（今回の主役）
5
/wp-content/
/wp-content/language/
言語パック
/wp-content/plugin/
インストールしたプラグインが保存されている場所
/wp-content/themes/
各種テーマのテンプレートが保存されている場所
/wp-content/upgrade/
バージョンアップ時に使用。
/wp-content/upload/
管理画面からアップロードしたメディアファイルが保存されている場所。
年→月でいい感じに保存されています。
この中にオリジナルの
テーマを作成して保存
していきましょう。

7. © wordbonch.org
何はともあれテーマを作る
6
管理画面からテーマを選択する

8. © wordbonch.org
何はともあれテーマを作る（外観→テーマ）
7
ここでオリジナルテー
マを選択できるように
したい！(・∀・)

9. © wordbonch.org
テーマを作成するには、最低以下の2ファイルがあればOKです。
・index.php（内容は空でOK）
・style.css
何はともあれテーマを作る（管理画面で選択肢として表示）
8
/*
Theme Name: テーマ名
Description: テーマ説明
Theme URI: テーマURL
Author: 作成者
AuthorURI: 作成者URL
Version: バージョン
License: ライセンス
License URI:ライセンスURL
*/
style.cssの最初に以下を記述
※以下以外にも設定値は存在します。
/wp-content/themes/sample
index.php
style.css

10. © wordbonch.org
何はともあれテーマを作る（管理画面で確認）
9
[外観]→[テーマ]で選
択できるように表示さ
れます。

11. © wordbonch.org
何はともあれテーマを作る（スクリーンショット）
10
画像がない！
(´・ω・｀)

12. © wordbonch.org
スクリーンショットの画像をテーマ直下に置きます。
・screenshot.png（300×225px）
・screenshot.png（880×660px） WordPress3.8以降はこのサイズ
何はともあれテーマを作る（スクリーンショットの画像をアップロード）
11
/wp-content/themes/sample
screenshot.png

13. © wordbonch.org
何はともあれテーマを作る（スクリーンショット）
12
画像がでた！
＼(^o^)／

14. © wordbonch.org
テーマの基本構成
13
テーマの基本構成を学ぶ

15. © wordbonch.org
テーマの基本構成（レイアウトを決める）
14
ヘッダー
コンテンツ
フッター
サイドバー
よくあるこうい
うのを作ろうと
考える

16. © wordbonch.org
テーマの基本構成（パーツテンプレートを理解する）
15
パーツ パーツテンプレート テンプレートタグ
ヘッダー header.php <?php get_header(); ?>
フッター footer.php <?php get_footer(); ?>
サイドバー
sidebar.php
sidebar-content.php
<?php get_sidebar(); ?>
<?php get_sidebar(‘content’); ?>
コメント comments.php <?php comments_template(); ?>
検索フォーム searchform.php <?php get_search_form(); ?>
※カスタム
main.php
main-sub.php
<?php get_template_part(‘main’); ?>
<?php get_template_part(‘main’,’sub’); ?>
※ カスタムパーツテンプレートは、main-sub.phpがなかったら、main.phpを読む優先順位
付けができるのが特徴

17. © wordbonch.org
テーマの基本構成（テンプレートを理解する）
16
該当ページ 優先度
TOPページ
index.php
home.php
月別ページ
archive.php
date.php
カテゴリーページ category.php category-id.php category-slug.php
タグページ tag.php tag-id.php tag-slug.php
タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php
投稿タイプページ archive-posttype.php
ユーザーページ author.php author-id.php author-nicename.php
メディアページ
single.php
attachment.php MIME_type.php
記事ページ single-posttype.php
固定ページ page.php page-id.php page-slug.php custom.php
検索結果ページ search.php
404ページ 404.php
低 高

18. © wordbonch.org
テーマの基本構成（テンプレートを理解する）
17
該当ページ 優先度
TOPページ
index.php
home.php
月別ページ
archive.php
date.php
カテゴリーページ category.php category-id.php category-slug.php
タグページ tag.php tag-id.php tag-slug.php
タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php
投稿タイプページ archive-posttype.php
ユーザーページ author.php author-id.php author-nicename.php
メディアページ
single.php
attachment.php MIME_type.php
記事ページ single-posttype.php
固定ページ page.php page-id.php page-slug.php custom.php
検索結果ページ search.php
404ページ 404.php
低 高
最低限作るべき
テンプレート

19. © wordbonch.org
テーマの基本構成（配置）
18
header.php
index.php
archive.php
single.php
page.php
search.php
404.php
・
・
・
etc…
footer.php
sidebar.php
この部分が良い
感じでかわる
＼(^o^)／

20. © wordbonch.org
パーツテンプレートの基本
19
パーツテンプレートの基本

21. © wordbonch.org
header.phpに以下のコードを記述。絶対に書いておきたいのがこれ。
パーツテンプレートの基本（header.php）
20
省略（通常のヘッダーに記述）
・
<?php wp_head(); ?>
</head>
<body>
wp-includes/general-template.php 内に含まれている関数。
関数自体は、do_action()→add_action()へのフックを担っているもの。
プラグインとかはこれをフックにすることが多いので、記述していないと
プラグイン入れたけど動かない！ということがありえる。

22. © wordbonch.org
footer.phpにもheader.phpと同じように以下のコードを記述。
パーツテンプレートの基本（footer.php）
21
省略
・
<?php wp_footer(); ?>
</body>
</html>
こちらもheader.phpと同様にプラグイン導入時などの時のフックポイントとなります。
wp_head()同様、記述するようにしましょう。

23. © wordbonch.org
ウィジェットを配置するエリアとしてsidebar.phpを置きます。
パーツテンプレートの基本（sidebar.php）
22
カレンダーやカテゴリー
リストなどなど

24. © wordbonch.org
ウィジェットメニューはデフォルトでは出てません。
パーツテンプレートの基本（sidebar.php）
23
ある設定をしないとメニ
ューに出てこない。 /wp-content/themes/sample
functions.php
テーマ直下に配置

25. © wordbonch.org
functions.php にウィジェット使うよと記述。
パーツテンプレートの基本（functions.php）
24
<?php
if (function_exists('register_sidebar')){
register_sidebar();
}
?>
※functions.phpの活用法に関しては、
次回以降の勉強会で…。
でた！＼(^o^)／
※メニューもでた！

26. © wordbonch.org
sidebar.php にウィジェット表示用の記述。
パーツテンプレートの基本（sidebar.php）
25
<?php dynamic_sidebar(); ?>
これだけ。
レイアウトに沿って、「sidebar.php」に記述しましたけど、基本、どこでも表示できます。
functions.phpに登録する時にサイドバーに名前をつけて、サイドバーエリアを増やすことも可能。
共通パーツを配置したりするのにとても便利です＼(^o^)／

27. © wordbonch.org
ご清聴ありがとうございました。
26
ありがとうございました。
次回は2ヶ月後の5月開催です。

28. © wordbonch.org
WordPressテンプレート階層
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%
BC%E3%83%88%E9%9A%8E%E5%B1%A4
WordPress関数リファレンス
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%
A1%E3%83%AC%E3%83%B3%E3%82%B9/
参考URL
27