WordCampTokyo2017でテーマ作成について登壇してきた話

フロントエンドエンジニアの高見です。9月16日・17日にWordCamp Tokyo 2017に参加してきました。 2017.tokyo.wordcamp.org 昨年に引き続きの参加なのですが、今回は登壇とAMA(Ask Me Anything)を行うことも目的の一つ。
今回はそのWordPressのテーマ作成に関する内容で登壇しましたので、その登壇内容をまとめたいと思います。

WordPressをこれから始める人のためのテーマ講座

WordPressをこれから始める人のためのテーマ講座 from Takami Kazuya

登壇時に使用した資料はこちら。
今回は初心者向けのテーマ作成講座ということで、なるべくソースコードを出さないような内容にしようと思い、基礎知識や概念を伝えることができれば成功かなと。私もWordPressを始めたころは、構造もよくわからず作り始めた経験があって、「最初にこういうことを学んでおけばよかった」と悔やんだ経験をもとにしてます。

WordPressのフォルダ構成

WordPressをインストールするとフォルダが3つできます。wp-adminとwp-includesフォルダは編集をしません。WordPressの管理画面用のファイルやインクルードするコアファイルなどが入っていて、WordPressのバージョンアップの際に最新版に上書きされます。
ですので、テーマやプラグインの開発をする場合、wp-contentフォルダ以外はさわりません。今回はテーマ作成のお話なので、wp-contentフォルダの中にあるthemesフォルダに自分がこれから作成するテーマのフォルダを新規作成します。

テーマに必要なファイル

テーマに必要なファイルは最低2つ。index.phpとstyle.cssというファイルをテーマフォルダ内に配置します。

index.php - メインになるテーマのテンプレート。
style.css - メインのスタイルシート。テーマの情報も記述します。

以下は、TwentyThirteenの情報を記述したもの。

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

テーマの作成 - WordPress Codex 日本語版参照

共通テンプレートファイル

index.phpとstyle.cssだけでもテーマは成立するのですが、CMSを使ううま味がこのままではありません。いろいろなページを作る上で、ヘッダーやフッター・サイドバーなどの共通部分はテンプレート化してそれぞれのページで読み込むようにします。

ヘッダー・フッターなど共通パーツはそれぞれ読み込み方があるので、作成するページでそれぞれの方法でテンプレートを読み込みます。

例えば、index.phpでものすごくシンプルに読み込む処理を書くとしたら以下のようになります。

<?php
/**
 * The main template file
 */
get_header(); ?>

<?php if ( have_posts() ) : ?>
<!-- 投稿記事の一覧など、index.phpでのなんらかの処理 -->
<?php endif; ?>

<?php
get_sidebar();
get_footer();

ホームページ以外のページテンプレート

全部のページがindex.phpと同じデザインなら良いのですが、通常、ホームページ・記事の一覧ページ・記事の詳細ページなどそれぞれデザインが異なります。したがって、それぞれのページのテンプレートを準備しないといけないのですが、WordPressでは有効になるテンプレートの優先度がファイルの命名規則によって変化します。

ホームページ（home.php）、記事の一覧ページ（archive.php）、記事の詳細ページ（single.php）といったようにテンプレートを分けて作成します。例えば特定のカテゴリー一覧ページだけデザインを変えたいといった場合には、カテゴリのスラッグやIDをファイル名に追加して切り分けることができます。便利。

テンプレートの役割

いよいよ作成となると、どこから作り始めますか？ということになります。好みもありますけど、一から作るのであれば共通テンプレートから作るとよいかと思います。

テンプレートはあくまでHTMLの構造に重きを置いて、プラグインやテーマ関数でできることはそちらにおまかせしたほうが切り分けができて良いかと思います。
当然、テーマに必要最低限の機能は実装しないといけないので（フックポイントやstyle.cssにテーマに必要なクラス設定など）、そのあたりはキチンとおさえること。