Wordpress - Theme
テーマ開発の流れ
- PHP / WordPress のエラーを修正する。この際、
wp-config.php
にdefine('WP_DEBUG', true)
を追記して行うと良い。 - チェックリストでチェックを行う
- Unit Testを行う
- Validationを行う
- JS のエラーを修正する
- 複数のブラウザでテストを行う
- 不要な comment、デバッグ設定、TODO を消す
基本
ファイル構成
テーマファイルはhtdocs/wp-content/themes
にあり、下記の 3 つから構成される
- Stylesheet(
style.css
) - Template files
- Functions file(
functions.php
)
Stylesheet
- 通常の CSS ファイルである
- テーマのメタ情報を一番上に記載する。Wordpress はこの情 報を使ってテーマを識別しているため、名前の重複などは許されない。
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
......
*/
Function File
functions.php
はプラグインのようにふるまう。単一のテーマ内で使う機能はfunctions.php
が適しているが、複数のテーマで共通して使う機能は Plugins として作成するほうがよい。
このファイルの目的は下記の通り。
- css ファイルや js ファイルを Enqueue(
wp_enqueue_scripts
)する時に使う - 下記の機能を有効にする時に使う
- Sidebars
- Navigation Menus
- Post Thumbnails
- Post Formats
- Custom Headers
- Custom Backgrounds
- 複数のテンプレートファイルで共通して使う機能を定義する
- サイトオーナーがオプション設定するときの、カスタマイズメニューの設定に使う
Themplate Files
テンプレートファイルは、HTML, PHP, Worspress Template Tagからなる。
極端な例では、一つのindex.php
にすべてを記載することもできるが、分けて作成することで様々なカスタマイズが可能になる。
下記のファイル名は予約済みであり、特別な役割を果たす。
name | desc |
---|---|
style.css | メインの stylesheet。テーマのメタ情報をヘ ッダとして含める必要がある。 |
rtl.css | RTL 環境で採用される CSS。このファイルは RTLer plugin を使って作成できる。 |
index.php | メインのテンプレート。必須。投稿一覧、カテゴリ一覧、タグ一覧、検索結果一覧など一覧と名の付くものすべてを表示するためのテンプレートとして扱うとよい。 |
comments.php | コメントのテンプレート |
front-page.php | ルートパスで表示するページのテンプレートは常にこれ。 |
home.php | 「設定>表示設定>ホームページの表示>固定ページを表示」になっている場合の「投稿ページ(一覧表示するページ)」のテンプレート |
single.php | 個別投稿のテンプレート。 |
single-{post-type}.php | カスタム投稿タイプごとの、個別投稿のテンプレート。 |
page.php | 固定ページ用テンプレート |
category.php | カテゴリ* |
tag.php | タグ* |
taxonomy.php | タクソノミ* |
author.php | Author* |
date.php | 日時・時間用* |
archive.php | アーカイブ用テンプレート。上記*がない場合に採用される。 |
search.php | 検索結果用 |
attachment.php | 単一の添付ファイルを閲覧する用のテンプレート |
image.php | 単一の画像ファイル用のテンプレート。なければattachment.php が採用される。 |
404.php | 404 |
テンプレートの優先順位
基本部分の構築
下準備
最低限必要な下記のファイルを配置する
- index.php
- style.css
- screenshot.jpg (管理画面のサムネイル用)
ヘッダ
<!DOCTYPE html>
<html <?php language_attributes() ?>>
<head>
<meta charset="<?php bloginfo('charset') ?>">
<meta name="description" content="<?php bloginfo('description'); ?>"/>
<title>
<?php bloginfo('name'); ?><?php wp_title(); ?>
</title>
</head>
language_attributes()
- html タグの lang 属性を出力する
bloginfo('charset')
- meta タグの charset 属性を出力する
bloginfo('name');
- サイト名を出力
bloginfo('description');
- サイトの説明を出力
wp_title()
- 生成された「ページ」に応じて最適なタイトルを出力
- 引数で、区切り文字の設定が可能
自動生成されたクラスを BODY にインジェクト
<body <?php body_class() ?>>
body_class()
- WP が自動生成したクラスをインジェクトする。
- ページを区別するクラス名、ユーザがログイン中かどうかを示すクラス名、プラグインが使用するクラス名などが出力される
body_class('my-class')
のように引数を指定するとすると、自動生成されたクラスの一番最後に指定したクラス(my-class
)を追加してくれる