WordPress オリジナルテーマ作り方：初心者でもわかる開発手順とポイント

CMS開発•2025/1/28

WordPress

はじめに

WordPressは、さまざまなプラグインやテーマを自由に組み合わせて使える柔軟性が大きな魅力です。ところが、既存のテーマだけでは自分好みのデザインや機能を実現しにくいと感じることはないでしょうか。

そうした場合は、オリジナルテーマを自作すると、自分だけのスタイルを追求できます。ただ、初心者の方は「複雑そう」「コードを書くのが難しそう」と感じることもあるかもしれません。

しかし、基本の仕組みやファイル構成を理解すれば、ゼロから自分でテーマを開発するのもハードルが高くありません。実務で使う際にも、オリジナルテーマをベースにサイト全体をコントロールしやすくなるメリットがあります。

この記事を読むとわかること

WordPressオリジナルテーマを作成するメリット
必要なファイル構成の基本
実務でのテーマ活用の具体例
テンプレートファイルの役割と実装フロー
デザインをカスタマイズする考え方
テーマ作成時にありがちなトラブルの回避策
機能面を拡張するためのヒント

WordPressテーマを作るメリットと実務での活用例

WordPressのテーマ開発は自由度が高く、デザインや機能において制約が少ない点が魅力です。実務でも、コーポレートサイトやネットショップ、個人ブログなど多彩なシーンでオリジナルテーマが役立ちます。

カスタマイズ性の高さ

自分でテーマを作れば、細部まで柔軟にカスタマイズできます。たとえば、記事のレイアウトを独自の形式にしたり、ヘッダーやフッターをブランドイメージに合わせたりといった変更も自由自在です。

企業の公式サイトではブランドカラーを反映したり、コンテンツ配置を厳密に調整することが大切です。オリジナルテーマを開発すると、チーム内でのデザイナーやコーダーとの連携もスムーズになります。

更新や保守がしやすい

使い慣れた自作のテーマなら、予期せぬレイアウト崩れやコードトラブルの際にも原因を追求しやすいです。テーマの構造やファイルの役割を熟知しているので、カスタマイズ後のテストや運用が安定しやすくなります。

実務でサイトを運営する場合、デザイン変更や新しい機能追加はよく発生します。あらかじめ自作テーマで全体を統制しておくと、将来のメンテナンスも負担が減ることが多いです。

テーマ開発に必要な基本ファイル

WordPressのテーマは複数のファイルによって構成され、役割が分かれています。いずれもテーマの機能やデザインを支える重要な要素なので、一度整理しておきましょう。

style.css

テーマを定義する際に必須となるCSSファイルです。独自のデザインを適用するだけでなく、テーマのメタ情報もここで宣言します。

以下は、style.cssの冒頭に入れる基本的な記述例です。


/*
Theme Name: MyOriginalTheme
Author: YourName
Description: A custom WordPress theme
Version: 1.0
*/

Theme Nameはテーマ名を示します。 Descriptionにはテーマの概要を短い文章で書くとわかりやすいです。

index.php

基本のテンプレートファイルです。サイトトップをはじめ、対応する他のテンプレートが存在しない場合に、このファイルのレイアウトやコードが適用されます。

WordPressはテンプレート階層という仕組みで、カテゴリー別や固定ページ別に異なるファイルを使い分けます。しかし、該当するテンプレートファイルがない場合はindex.phpが最後の受け皿になる形です。

functions.php

テーマ全体の設定や機能を追加するときに使うファイルです。例えば、サイドバーのウィジェットを有効にしたり、投稿サムネイルを許可したりします。

実務でも、特定のスクリプトや外部ライブラリを読み込む際はfunctions.phpにコードを書くことが多いです。テーマ固有の関数をまとめる場合もあります。


<?php
function mytheme_setup() {
  // アイキャッチ画像をサポート
  add_theme_support('post-thumbnails');

  // タイトルタグを動的に追加
  add_theme_support('title-tag');
}
add_action('after_setup_theme', 'mytheme_setup');

上のように、テーマサポートを追加する処理を記述するとWordPress管理画面からの操作範囲も広がります。

header.php / footer.php

ヘッダーとフッターの要素を共通化するファイルです。複数のテンプレートファイルで使い回すことで、全ページで統一感のあるレイアウトを実現します。

header.phpにはサイト全体のメニューやロゴ表示をまとめておき、footer.phpにはコピーライト表記やSNSリンクを記載すると便利です。テンプレートファイルの中で、以下のように呼び出します。


<?php get_header(); ?>

<!-- コンテンツ部分 -->

<?php get_footer(); ?>

テーマ作成手順の基本フロー

一連の流れを把握しておくと、テーマ開発に迷わなくなります。実際に作業をする時は、下記のステップをざっくり意識すると良いでしょう。

ディレクトリの準備

WordPressのインストールディレクトリ以下にあるwp-content/themes/フォルダ内に、新しいテーマ用のフォルダを作ります。フォルダ名は英字表記にしておくと管理しやすいです。

たとえば、my_original_themeという名前でフォルダを作成し、その中にstyle.cssやindex.phpを用意するとテーマとして認識されます。

必要なテンプレートファイルを追加

最初はstyle.cssとindex.phpだけでもテーマとして動作しますが、ヘッダーやフッターを分割する場合はheader.php・footer.phpを追加します。さらに、個別投稿ページ用のsingle.phpなども用意すると汎用性が高いです。

投稿一覧やアーカイブ表示にこだわるならarchive.php、カテゴリーページでレイアウトを変えたいならcategory.phpなど、必要に応じてファイルを増やします。ただし、最初からすべてのテンプレートを作る必要はありません。

WordPress管理画面でテーマを有効化

ファイルを設置したらWordPressの管理画面にアクセスし、「外観」→「テーマ」を開きます。先ほど作成したテーマ名が表示されるので、有効化して動作を確認しましょう。

まだレイアウトが整っていない状態かもしれませんが、一度実際の画面を確認すると後のカスタマイズ方針が立てやすいです。

テンプレート階層の具体的な活用

WordPressには、特定の条件ごとに使われるテンプレートを選び分ける仕組みがあります。これをテンプレート階層と呼びます。

カテゴリーページを切り分ける場合

ある特定のカテゴリーページを別レイアウトにしたいときは、category-{slug}.php というファイルを用意できます。 {slug}はカテゴリースラッグを指します。

たとえば、カテゴリースラッグがnewsの場合は、category-news.phpを置いておくと、そのカテゴリーページだけ独自のデザインが反映されます。

個別投稿ページをカスタマイズする場合

投稿タイプが普通の投稿であれば、single.phpが使われます。しかし、カスタム投稿タイプを使っている場合はsingle-{post_type}.phpを作成すれば、特定の投稿タイプだけ別のデザインにできます。

実務で商品一覧やメンバー紹介などをカスタム投稿で管理したいケースは多いです。オリジナルテーマを作っておくと、各投稿タイプに応じたビジュアルやコンテンツ表示の違いを細かく実装しやすくなります。

デザインカスタマイズの考え方

テーマの大枠ができたら、デザイン面に手を加えてサイトの独自性を高めていきます。ここでは、CSSの書き方やレイアウト構成のポイントについて見ていきましょう。

スタイルシートの分割

大きなサイトになると、1つのCSSファイルだけでは管理が難しくなることがあります。その場合は、複数のCSSファイルに分割し、@importやfunctions.phpで読み込む方法もあります。

たとえば、ヘッダーやフッターに関するスタイルをheader.cssやfooter.cssとして分けておくと、セクションごとの管理が楽です。

レスポンシブ対応

多くのユーザーがスマートフォンやタブレットからアクセスするため、レスポンシブデザインは欠かせません。 @mediaクエリを活用して、画面幅に応じてレイアウトが変わるようにしておくと利便性が高まります。

実務でも、クライアントが求めるデザインがPCとスマホで大きく異なるケースは多いです。あらかじめレスポンシブ対応のスタイルを作っておくと、後からの修正が少なくなります。

配色やフォントの工夫

初心者の方でも、配色やフォントの選び方でサイトの印象が大きく変わることを意識すると良いでしょう。背景色や文字色にコントラストをつける、可読性に配慮した文字サイズにするなど、見やすさを優先して設計するのがポイントです。

プラグインとの連携を考慮する

WordPressを使う大きな理由のひとつに、プラグインが豊富という点があります。テーマを自作する場合でも、プラグインの影響は常に念頭に置く必要があります。

ウィジェットエリアやメニューの登録

functions.phpでウィジェットエリアを登録しておくと、プラグインを利用するときに柔軟に配置を変えやすくなります。たとえばサイドバーを設置したり、フッター部分に複数のウィジェットエリアを用意すると、運用面で自由度が上がります。

同様に、ナビゲーションメニューを複数登録することで、グローバルメニューとフッターメニューを分けて管理することも可能です。


<?php
function mytheme_widgets_init() {
  register_sidebar( array(
    'name'          => 'Sidebar Widget Area',
    'id'            => 'sidebar-1',
    'description'   => 'サイドバー用のウィジェットです',
  ) );
}
add_action('widgets_init', 'mytheme_widgets_init');

このように書いておくと、管理画面の「外観」→「ウィジェット」からサイドバーにプラグインの機能を簡単に配置できます。

不要なプラグインを使わない

プラグインは便利ですが、入れ過ぎるとサイト速度の低下やセキュリティリスクが高まることがあります。オリジナルテーマを作る段階で、不要な機能はテーマ側で処理するか、そもそも導入を見送るといった判断が必要です。

コードで実装できる箇所をテーマ側でカバーすれば、余計なプラグインを減らせる可能性があります。軽量かつシンプルなサイト運用を目指すなら、最小限のプラグインだけを厳選しましょう。

ありがちなトラブルと回避策

テーマ開発は自由度が高い分、慣れないうちは細かいエラーや不具合に悩むことがあります。ここでは、初心者がつまずきやすいポイントと対処法を押さえておきましょう。

PHPの構文エラー

WordPressのテーマはPHPコードを多用します。ちょっとしたスペルミスやセミコロン抜けで、画面が真っ白になったりエラーメッセージが表示されたりします。

エディタの構文ハイライト機能を活用したり、試しにテーマを一時的に別のテーマに切り替えてからコードをチェックするのも方法の一つです。落ち着いてエラーログを確認し、該当箇所を修正すればすぐに復旧できます。

CSSのキャッシュ問題

CSSを修正しても反映されない場合、ブラウザやサーバー側のキャッシュが原因になっていることがあります。ブラウザのキャッシュをクリアするか、ファイル名を変えるなどしてキャッシュを更新すると解決しやすいです。

functions.phpでCSSやJSを読み込む際に、バージョンパラメータをつけてキャッシュを制御する手法もあります。例として、wp_enqueue_style( 'mytheme-style', get_template_directory_uri() . '/style.css', array(), '1.0.1' );のように書くと、ファイルバージョンを認識してくれます。

テンプレートファイルの呼び出し順が把握できない

テンプレート階層を理解しないままファイルを増やすと、どのページにどのテンプレートが適用されているか混乱することがあります。あらかじめ、どんなURL構造に対してどのテンプレートが呼ばれるかを整理しておくと、無駄なファイルを作らなくて済みます。

デバッグプラグインを使うなどして、表示中のテンプレートを確認できるようにすると学習効率が上がるでしょう。

テーマ開発で押さえておきたいポイント

テーマ開発はデザインと機能の両方を意識する必要があります。ここでは、より実務に直結しやすい観点から重要なポイントをまとめてみます。

コードの整合性

複数人で開発する場合は、コード規約を決めておくと混乱を防げます。 PHPの書き方やCSSの命名ルールなど、ある程度チームで統一するとメンテナンスが楽です。

テスト環境で十分に検証

本番サイトで直接テーマを編集するのはリスクがあります。テスト環境やローカル環境で十分に表示確認してから、本番サイトに適用するほうが安心です。

テーマを有効化するたびにサイトが反映されるので、作業途中で空白ページが表示されることがあります。実務ではテスト用のステージング環境を使って検証してから公開すると安全です。

子テーマで拡張

テーマを作るうえで、ベースとなる親テーマを用意しておいて、子テーマで機能を拡張するアプローチもあります。大幅な変更を加えたい場合は自作テーマとして構築しつつ、小さな変更は子テーマで対応するのも選択肢です。

実務での学びにどう活かすか

WordPressのテーマ作りは、実務レベルでのデザインや開発スキルを大きく伸ばす機会にもなります。ここでは、学習と実務を結びつける視点で考えてみましょう。

クライアントワークへの応用

企業や店舗のWebサイト制作を請け負う場合、固有のブランドイメージを反映させることが重視されます。オリジナルテーマを使ってクライアントのニーズに合わせたレイアウトを用意できると、提案力が高まり、リピート依頼をもらえることも多いです。

チーム開発と役割分担

デザイナーが作成したデザインカンプをもとに、フロントエンドエンジニアがCSSやJSを実装し、WordPressエンジニアがPHPを組み込むなど、役割分担が明確になります。オリジナルテーマの開発を通して、チームワークやコミュニケーションの仕方を学ぶきっかけにもなります。

テーマ開発のノウハウは他のCMSやフレームワークでも役に立ちます。レイアウト構造を意識する練習にもなるので、総合的なWeb制作スキルが身につきやすいです。

スキル証明としてのポートフォリオ

自分で作ったオリジナルテーマは、そのままポートフォリオになることがあります。テーマファイル一式を公開しなくても、スクリーンショットやデモサイトなどを示すだけでも、コードを書ける証明として評価されるでしょう。

まとめ

WordPressのオリジナルテーマを作ると、デザインや機能を自分の思い通りにコントロールしやすくなります。実務でもメンテナンス性が高く、クライアントの要望に柔軟に対応できる強みがあります。

最初は最低限のファイルだけ準備し、動かしてみるところから始めましょう。テンプレート階層を活用してページごとにレイアウトを変える方法や、デザインを調整するテクニックなど、段階的に学ぶと理解が深まります。

ぜひ一歩ずつ試しながら、自分だけのテーマを完成させてみてください。オリジナルテーマの開発経験は、将来的にWeb制作の幅を広げるチャンスになるかもしれません。