チュートリアル

【保存版】WordPressのオリジナルテーマを自作するチュートリアル

【保存版】WordPressのオリジナルテーマを自作するチュートリアル

WordPressのテーマを自作することで、デザインも機能も自由自在にカスタマイズできるようになります。本記事では、初心者の方でも理解しやすいように、WordPressテーマの自作方法をステップバイステップで丁寧に解説します。HTMLやCSS、PHPに少しずつ慣れていきながら、あなただけのオリジナルテーマを作ってみましょう。

目次

WordPressテーマ自作のメリットとは？

WordPressのテーマを自作することで、次のようなメリットがあります。

  • サイトデザインを完全に自分好みにできる
  • 不要な機能やコードを排除でき、軽量化できる
  • コーディングスキルの向上につながる
  • クライアントワークでも活用できる

自作は手間がかかりますが、それだけの価値があります。特にブログやポートフォリオ、企業サイトなどの運営者には大きなメリットです。

WordPressテーマの基本構造を理解しよう

テーマを自作する前に、まずはテーマの基本構造を押さえましょう。WordPressのテーマは、PHPとHTML、CSS、JavaScriptなどのファイルから成り立っています。

主なファイルは以下の通りです：

  • style.css：テーマのスタイル（CSS）とメタ情報を記述
  • index.php：テーマのメインテンプレート
  • functions.php：テーマに機能を追加するためのファイル
  • header.php：ヘッダー部分のテンプレート
  • footer.php：フッター部分のテンプレート
  • sidebar.php：サイドバーのテンプレート
  • single.php：投稿ページ用のテンプレート
  • page.php：固定ページ用のテンプレート

これらを組み合わせて、WordPressはページを生成しています。

テーマフォルダを作成しよう

まずは、WordPressのテーマを入れるためのフォルダを作成します。

  1. WordPressのインストールディレクトリ内の wp-content/themes/ に移動。
  2. ここに新しいテーマ名のフォルダを作成します（例：mytheme）。

この中に、先ほど紹介した style.css や index.php を入れていくことで、テーマが形成されます。

必須ファイルを準備する

WordPressがテーマとして認識するには、少なくとも style.css と index.php が必要です。

style.css の例：

/*
Theme Name: My Original Theme
Author: あなたの名前
Version: 1.0
*/

index.php の例：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
    <h1><?php bloginfo( 'name' ); ?></h1>
    <p><?php bloginfo( 'description' ); ?></p>
</body>
</html>

この状態でWordPress管理画面の「外観 > テーマ」から、新しいテーマとして認識されるようになります。

functions.phpで機能を追加しよう

functions.php を使うことで、テーマに独自の機能を追加できます。以下はよく使う記述の例です。

<?php
function mytheme_setup() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'mytheme_setup');
?>
  • title-tag：ブラウザのタイトルを自動出力
  • post-thumbnails：アイキャッチ画像の設定を可能に

header.phpとfooter.phpを分けて効率化

index.php の中にすべてのコードを書いても動きますが、メンテナンス性を高めるために header.php、footer.php に分割しましょう。

header.php の例：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body>

footer.php の例：

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

そして、index.php 側では以下のように呼び出します：

<?php get_header(); ?>

<!-- 本文コンテンツなど -->

<?php get_footer(); ?>

テンプレート階層とsingle.phpの役割

WordPressには「テンプレート階層」と呼ばれるルールがあります。これにより、表示されるページごとに最適なテンプレートが選ばれます。

例：投稿ページ → single.php

single.php の基本形は以下のようになります：

<?php get_header(); ?>

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_title('<h1>', '</h1>');
        the_content();
    endwhile;
endif;
?>

<?php get_footer(); ?>

テーマにスタイルを追加しよう（CSS）

style.css に直接CSSを書き加えることで、見た目を調整できます。

body {
    font-family: sans-serif;
    background-color: #f5f5f5;
    color: #333;
}
h1 {
    color: #2c3e50;
}

必要に応じて main.css のように外部ファイルを分け、functions.php で読み込むこともできます。

テーマの有効化とテスト

管理画面の「外観 > テーマ」から、自作したテーマを有効化します。

その後はブラウザで表示確認を行いながら、デザインや構成を調整していきましょう。コンソールエラーやレイアウト崩れなども、早い段階で確認することが重要です。

まとめ

WordPressテーマの自作は、最初はハードルが高く感じるかもしれませんが、基礎を押さえれば誰でも作れるようになります。最初はできるだけシンプルな構成で進め、徐々に機能やデザインを追加していくのがおすすめです。

自作テーマは、あなたのスキルを証明する最高のポートフォリオにもなります。ぜひ挑戦してみてください。