WordPressでオリジナルテーマを作る時の最小構成についてザクザクとご紹介します。

テーマ一式を入れる場所

/wordpress/wp-content/themes/

例えば「fireball」という名前のテーマを作るなら、このようにフォルダを作ります。

/wordpress/wp-content/themes/fireball

ミニマム構成

真のミニマムは「index.php」と「style.css」の二つですが、まぁだいたいの場合必要になるだろうという意味でのミニマム構成をあげてみます。フォルダに関しては整理整頓のしやすさを考えての例なので、好みで追加したり削除したりというのはまったく問題ありません。

style.css の作り方

style.cssの先頭に記載する、テーマ説明のフォーマットはこのような感じです。このコメントの内容がテーマ説明文として表示されます。

/* style.css への記述例 */
/*
Theme Name: テーマ名
Theme URI: テーマURI
Author: 作成者名
Author URI: 作者WEBサイトURI
Description: テーマ説明文
Version: テーマバージョン
License: ライセンス表記
License URI: ライセンス詳細URI
Tags: テーマタグ
Text Domain: テーマ識別子
*/

「Tags」には、WordPress Tag Filter（公式）に記載のタグを指定できます。テーマを配布するなら入れた方がいいかもしれないですね。

冒頭のコメント以外はふつうにスタイルを記述できます。勝手に全てのページに読み込まれるデフォルトスタイルシートファイルになるので、全ページ共通スタイルなどを入れるのに使います。

基本：テーマフォルダの参照タグ

テーマフォルダの中につくった「images」フォルダなどに入っている画像を呼び出すとき、テンプレートファイル（index.phpなど）から相対パスで参照することはできません。このような場合は以下のタグでテーマフォルダの絶対パスを記述します。

<?php echo get_template_directory_uri(); ?>

見ての通り、php用のタグなのでこれをcssファイルなどに記載することはできません。同テーマフォルダ内のcssファイルからimagesフォルダを参照するような場合は相対パスで記述できます。

上述ミニマル構成で用意した、「images」「css」「js」をテンプレートファイルから利用する時は、こんな感じで記述します。

/* テンプレートファイル（index.php）への記述例 */

<?img src="<?php echo get_template_directory_uri(); ?>/images/site-logo.png">

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/thema.css">

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>

【+@】ヘッダー・フッター・サイドナビのパーツ化

テンプレートを作ろうと言う人はきっとヘッダー・フッター・サイドナビくらいは切り出して共通化し、一元管理したいなぁと思っていう方が多いのではないでしょうか。

WordPressでは以下の名前でファイルを作ると、すぐに呼び出せるタグが用意されています。ファイルは、テーマフォルダ直下に置きます。

/* テンプレートファイル（index.php）への記述例 */

/* header.php 呼び出し */
<?php get_header(); ?>

/* footer.php 呼び出し */
<?php get_footer(); ?>

/* sidebar.php 呼び出し */
<?php get_sidebar(); ?>

ミニマム構成はこんな感じです。
この構成をベースに、必要なテンプレートファイル（single.phpやcategory.phpなど）を追加してテンプレートを作っていく流れになります。