WordPressでカスタムテーマを作ってみよう

WordPressは、その柔軟なカスタマイズ性で知られるCMS（コンテンツ管理システム）です。デフォルトのテーマや既存のテーマを使うだけでなく、自分の好みに合わせたカスタムテーマを作ることもできます。カスタムテーマを作成すれば、デザインや機能を完全にコントロールし、自分だけのオリジナルなWebサイトを構築可能です。

この記事では、WordPressでカスタムテーマを作るための基本ステップを初心者向けに解説します。テーマのディレクトリ構造、必須ファイル、WordPressテンプレートタグの使い方についても触れていきますので、ぜひ参考にしてください。

1. カスタムテーマ作成の準備

カスタムテーマを作る前に、以下のものを準備しておきましょう：

ローカルサーバー環境（Docker、XAMPP、MAMP、Localなど）
WordPressサイトをローカル環境でテストできるようにします。
テキストエディタ（VS CodeやSublime Textなど）
テーマファイルを編集するためにコードエディタを用意しましょう。
WordPressのインストール
ローカルサーバーにWordPressをインストールし、開発用サイトを準備します。

2. カスタムテーマ用のディレクトリ作成

まず、WordPressのテーマは wp-content/themes フォルダ内に保存されます。ここに新しいテーマ用のフォルダを作成しましょう。テーマ名に応じてわかりやすい名前を付けます。例えば「my-custom-theme」という名前のフォルダを作成します。

次に、テーマフォルダ内に少なくとも以下の2つのファイルを作成します。

style.css
テーマのスタイルシートです。テーマのメタ情報（テーマ名や作者名など）を含む必要があります。
index.php
テーマのメインテンプレートファイルです。最低限、これらのファイルがあればWordPressはテーマとして認識します。

style.cssの基本構造

style.css ファイルの先頭には、テーマの情報をコメントとして記載します。これにより、WordPressはテーマを認識します。

/*
Theme Name: My Custom Theme
Theme URI: http://example.com
Author: Your Name
Author URI: http://example.com
Description: A custom WordPress theme.
Version: 1.0
*/

index.phpの基本構造

index.php は、テーマが読み込まれる際の最初のファイルです。シンプルにHTML構造を記述します。ここでは、テンプレートタグを使って動的にコンテンツを表示するようにします。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php wp_title(); ?></title>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

  <header>
    <h1><?php bloginfo( 'name' ); ?></h1>
    <p><?php bloginfo( 'description' ); ?></p>
  </header>

  <main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <h2><?php the_title(); ?></h2>
      <div><?php the_content(); ?></div>
    <?php endwhile; endif; ?>
  </main>

  <?php wp_footer(); ?>
</body>
</html>

これで最低限のHTML構造とWordPressのテンプレートタグを使った、投稿やページが表示されるテーマが完成します。

3. テーマの有効化と確認

テーマフォルダと必要なファイルを準備したら、WordPress管理画面からカスタムテーマを有効化します。

管理画面にログインし、「外観」→「テーマ」に移動。
作成した「My Custom Theme」が一覧に表示されているはずです。「有効化」をクリック。

有効化後、サイトを表示すると、作成したカスタムテーマが適用されていることを確認できます。基本的な投稿のタイトルやコンテンツが、先ほど記述したHTML構造に沿って表示されます。

4. テーマのファイルを追加して拡張

カスタムテーマは index.php だけで動作しますが、より柔軟にカスタマイズするためには他のテンプレートファイルを追加します。一般的に使われるファイルをいくつか紹介します。

ヘッダーやフッターの部分を header.php と footer.php に分割することで、効率的なテンプレート管理が可能です。例えば、次のように index.php からこれらのファイルを読み込みます。

<?php get_header(); ?>
<main>
  <!-- メインコンテンツ -->
</main>
<?php get_footer(); ?>

functions.php

functions.php はテーマに独自の機能を追加するためのファイルです。例えば、テーマのサポートする機能（カスタムロゴ、メニューなど）を設定することができます。

<?php
// カスタムメニューをサポート
function my_custom_theme_setup() {
  register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'my-custom-theme' ),
  ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );
?>

single.php と page.php

single.php は個別の投稿ページのレイアウトを定義するテンプレートファイルです。一方、page.php は静的なページのテンプレートとして使われます。

例えば、single.php に以下のように記述することで、投稿ページに独自のレイアウトを適用できます。

<?php get_header(); ?>

<main>
  <article>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
  </article>
</main>

<?php get_footer(); ?>

style.cssの追加スタイル

style.css にカスタムCSSを追加することで、テーマのデザインを自由に調整できます。例えば、以下のようなCSSを追加して基本的なレイアウトを整えます。

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

main {
  padding: 20px;
}

5. テーマ開発のヒント

カスタムテーマを作成する際には、以下のポイントを意識すると開発がスムーズに進みます。

子テーマを使う
既存テーマをカスタマイズする際には、子テーマを作成してカスタマイズを行うと、更新による影響を受けません。
WordPress Codexを活用する
WordPressの公式ドキュメント「Codex」は、テンプレートタグや関数の詳細を確認できる便利なリソースです。
テスト環境での作業
カスタムテーマを本番環境で使う前に、テスト環境でしっかり動作確認を行うことが重要です。

まとめ

WordPressでのカスタムテーマ作成は、最初は少しハードルが高く感じられるかもしれませんが、一度基本を押さえれば柔軟にサイトを構築できます。style.css と index.php を軸に、必要に応じて他のテンプレートファイルや機能を追加し、自分だけのテーマを作り上げてください。テーマのデザインや機能を自由にコントロールすることで、WordPressサイトの可能性がさらに広がります。

アルアカ - Arcadia Academia