本稿では、WordPressテーマの作り方について解説します。とは言っても、ゼロからテーマを作るのは少し大変。ここでは、すでにあるHTMLファイルを利用してテーマを作っていきたいと思います。テーマの仕組みや必要なファイルについても解説しています。
テーマの構造がわかっていれば、子テーマを利用したテーマのカスタマイズもできるようになります。ある程度WordPressサイトを弄ったことがある方にも参考にしていただければと思います。
WordPressテーマの仕組み
それでは、WordPressテーマの作り方について見ていきましょう。まずは、テーマの仕組みについて簡単に解説します。
WordPressは一つのページを、複数のテンプレートファイルで構成しています。大まかに言うと、一つのページはヘッダーとフッター、コンテンツの3つの部分に分かれます。このそれぞれを異なるPHPファイルとして、別々に用意しているのです。
実際にページが表示される時は、この3つのテンプレートを組み合わせて、一つのページとして表示しています。トップページであれば、index.phpとheader.php、footer.phpの3つが組み合わさっています。固定ページだとpage.phpとheader.php、footer.php、投稿ページだとsingle.phpとheader.php、footer.phpの3つです。
なお、WordPressテーマで使用できるテンプレートは上記の他にも多数あります。より詳しくは、下記のWordPress公式オンラインマニュアルをご覧ください。
テーマ作成の手順
テーマ作成の手順です。本記事では、すでにあるHTMLファイル（下記）を使ってテーマを作っていきたいと思います。適当な名前で、事前にHTMLファイルを作っておいてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>ヘッダー</header>
<div>コンテンツ</div>
<footer>フッター</footer>
</body>
</html>
テーマ用のフォルダをつくる
はじめに、作成するテーマのフォルダを作りましょう。フォルダを配置する場所は、/wp-content/themes/の直下です。テーマ用のフォルダをsampleとするなら、/wp-content/themes/sampleとなります。
テンプレートファイルをつくる
次に、テンプレートファイルを作っていきます。ファイルの保存場所は、先ほど作成したテーマ用フォルダの中です。下記の3つのPHPファイルを作成して、保存してください。ファイルの中身は、まだ空欄で大丈夫です。
- index.php
- header.php
- footer.php
今回はトップページのみ作成しますが、この他にも下に列挙したテンプレートも同時に作ることが多いです。
- home.php
- sidebar.php
- page.php
- single.php
- archive.php
- category.php
- tag.php
- search.php
- 404.php
各固定ページごとに、テンプレートを分けることもできます。ハイフンを使って、page-about.phpやpage-inquiry.phpなどのようにそれぞれのテンプレートを分ければOKです。
HTMLを分割する
次に、事前に用意しておいたHTMLを分割していきましょう。上から順番に、header.php、index.php、footer.phpの3つのファイルに分割します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>ヘッダー</header>
<div>コンテンツ</div>
<footer>フッター</footer> </body> </html>
これで、今回使うテンプレートファイルが揃いました。
テンプレートをつくる
HTMLを分割しただけでは、まだテーマとして動きません。WordPressに合わせて、テンプレートを修正していきましょう。
header.php
headタグ内の最後に、wp_headと記述します。これを書いておかないと、必要なコードを読み込めずページが表示されません。忘れずに追加しておきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<header>ヘッダー</header>
その他にもtitleタグやCSSファイルのリンク先を変えていますが、話が逸れるのでここでは割愛します。
index.php
index.phpでは、分割したヘッダーとフッターを読み込むコードを追加します。
<?php get_header(); ?> <div>コンテンツ</div> <?php get_footer(); ?>
footer.php
header.phpと同じように、wp_footerを書き加えてください。あとは変更しなくて大丈夫です。
<footer>フッター</footer> <?php wp_footer(); ?> </body> </html>
style.cssを作成する
テンプレートができたら、テーマのCSSファイルをつくりましょう。テーマ用のフォルダ直下にstyle.cssというファイルを作成して、冒頭に下記のコードを書き込んでください。
※style.cssは、WordPressテーマの必須ファイルの一つです。必ず作るようにしましょう。
/* Theme Name: テーマの名称 Description:テーマの説明文 Theme URI: テーマと関連するページのURL Author: 作成者 Author URI: 作成者と関連するページのURL Version: バージョン License: ライセンス License URI: ライセンスのURL */
ここで記述した内容は、管理画面のテーマ選択画面で表示されます。テーマの名称など、わかりやすい名前にしておきましょう。
なおCSSコードがある場合は、先ほどのコメントの下に書いておきます。
以上で、テーマの骨組みが完成です。テーマ一覧画面から、ここで作成したテンプレートが選択・有効化できるようになっているかと思います。
なお、テーマ一覧画面では各テーマの画像（サムネイル）が表示されます。サムネイルがなくてもテーマは使えるのですが、配布予定のテーマであれば必須でしょう。サムネイルはscreenshot.pngという画像ファイルでつくり、サイズは880×660が推奨されています。
あとがき
WordPressのテーマ作成の基本について解説しました。骨組みができたら、WordPressの記事一覧（ループ部分）や投稿ページなど、テーマの詳細を作っていきます。