初心者エンジニア必見！WordPressテーマを自作で作成する方法を徹底解説

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressのテーマを自作する方法について解説していきたいと思います。

テーマとは、WordPressで作成したウェブサイトのまさに見た目を構成する仕組みのことをいいますが、このテーマを自作できることで自由にサイトを実装することができます。

テーマを自作できればWordPressエンジニアとして活躍できるのはもちろん、Webデザイナーの方だったり、WordPressのサイトを運用するWeb担当者の方も、テーマの全体像を知っておくだけで一部カスタマイズができたり何かしらの問題解決にお役立ていただけます。

よろしければぜひ当記事をお仕事などでご活用いただけましたら幸いです。

テーマとは

テーマとは、WordPressサイトの見た目を構成する仕組みのことをいいます。

このテーマを自作できることで、WordPressでのサイトの見た目を自分の思い通りに作ることができ、完全オリジナルのウェブサイトを実現することができます。

テーマは管理画面から複数管理することができ、テーマを切り替えればサイトの見た目をテーマごとに切り替えることができます。

例えば、青色が主なテーマ、緑色が主なテーマ、など、テーマごとに構築された見栄えにテーマ単位で切り替えることが可能です。

テーマは無料・有料・オーダーメイドがある

WordPressのテーマは世界中で配布・提供されており、テーマの管理画面からは無料で配布されているテーマをクリックするだけで簡単に導入して利用することができます。

ただし、使ってみていただけると分かるのですが、無料のテーマはいまいちなデザインが多く、ご自身の気にいるテーマが見つけづらいというデメリットがあります。

この無料テーマのほかに有料で提供されているテーマもあり、日本では筆者が知る中でもTCDさんだったり、エックスサーバー株式会社が提供するXWRITE、またSmart Custom FieldsやMW WP Formという大変素晴らしいプラグインを開発されたキタジマタカシさんのSnow Monkey、unitone（ダウンロード無料）などがあります。

また、無料のテーマであっても探してみれば使いやすく優れたテーマはありますので、まずは無料でサイトを立ち上げたいという場合はご自身で探してみてください。

例えば、無料のテーマで最高峰のクオリティともいえるのがエックスサーバー株式会社で提供されている以下の「Cocoon」です。

「無料なのにこんなに機能があるの…」と度肝を抜かれました。

このように素晴らしいテーマが提供されている中で、完全にオーダーメイドでテーマを作りたい（つまり100%オリジナルで作りたい）という場合があるかと思います。

その場合、Web制作会社やフリーランスのエンジニアなどに依頼してテーマを作成するというのが一般的です。

少し費用はかかりますが、独自の導線設計や、SEO対策に対応した高品質なテーマを開発できるなどそれなりの付加価値を生み出すことが可能です。

当記事ではこのテーマ作成というエンジニアとしてのスキル取得を目指して解説していきます。

テーマ作成のメリット

テーマ作成のメリットはいくつかあります。

筆者的には以下の内容がメリットとしてあげられるかと思います。

• 100%自由に見た目を作れる
• いつでも見た目を柔軟に変更できる
• SEO対策用にカスタマイズできる

このように、サイトを自由な見た目で作れたり、運用の途中でいつでも柔軟に見た目をカスタマイズできたり、SEO対策に完全対応させたりすることが可能なところが、テーマ作成の強みといえます。

世の中大変素晴らしい無料のサイト作成サービスはありますが、実際に使ってみていただけると分かるかと思いますが、やはり限界がどこかであるので、WordPressなどのCMSでテーマなど見た目を構成する部分を自由に作成・カスタマイズできることはエンジニアとして大きなアドバンテージとなります。

テーマ作成の前提知識

WordPressのテーマ作成に必要な前提知識はいくつかあります。

前提知識を突き詰めていくと果てしないものになるので、WordPressのテーマ作成における最低限の前提知識をおさえていただき、効率的にスキル習得をしていただければと思います。

ここでは前提知識として以下の内容をあげさせていただきます。

• テーマ作成に必要なプログラミング言語・知識
• テーマ作成に必要なPHPファイルの構成
• テンプレートの階層
• テンプレートタグ

それぞれ解説していきます。

テーマ作成に必要なプログラミング言語

テーマ作成に必要なプログラミング言語がいくつかあります。

内容としては以下になります。

• HTML
• CSS
• JavaScript（jQuery）
• PHP
• WordPress（テンプレートタグ等）
• MySQL

それぞれ解説していきます。

HTML

HTMLとは、ページの骨組みを構築するためのマークアップ言語です。

ページの中にあるテキスト、画像など一つひとつの情報を正確に伝えるためにHTMLタグ（段落のpタグ、見出しのhタグ、画像のimgタグなど）を使って入れ子形式で記述して作成します。

HTMLは、そもそもウェブサイトを作る上では必須の技術で、この言語を使わなければ基本的にウェブを作ることはできません。

CSS

CSSとは、ページの見た目をレイアウトしたりデザインしたりするためのスタイルシート言語です。

HTMLと組み合わせて使用することで、HTMLとして記述したマークアップ構造とHTMLタグをもとに、表示しているテキストや画像などに対して見た目を整えたりレイアウトしたり、デザインすることができます。

JavaScript（jQuery）

JavaScriptとは、HTMLとCSSで作られた要素に対してアニメーションなど何かしらの動きを実装するためのプログラミング言語です。

また、このJavaScriptをもっと簡単に扱えるようにしたものがjQueryです。

このjQueryはJavaScriptのライブラリであり、少ないコードで本来難しいJavaScriptの機能を簡単に呼び出すことができ、高度なアニメーションを実装することができます。

WordPressではこのjQueryがコアの機能やプラグイン、テーマで標準で利用されており、ウェブサイト制作には必須の技術といっても過言ではありません。

PHP

PHPとは、動的なウェブページの生成や処理を行うための、サーバーサイドのプログラミング言語です。

サーバーサイドで実行されるため、クライアント（ブラウザ）からのリクエストを処理し、生成された結果をクライアントに送信します。これにより、動的なコンテンツの生成やデータベースとのやり取りなどを行うことができます。

このPHPはプログラミング言語の中でも扱いやすいスクリプト言語で、多くのレンタルサーバーに標準で搭載されているため、初心者にも優しい言語といえます。

WordPress（テンプレートタグ等）

WordPressでは標準で提供されているテンプレートタグというWordPress独自の関数があります。

このテンプレートタグを使うことで、WordPressのデータベースにあるデータを簡単に呼び出して表示させることができます。

WordPressでは主にこのテンプレートタグでテーマのPHPテンプレートファイルを実装していきます。

テンプレートタグと一緒に基礎的なPHP構文などの知識（if文やwhile文、foreach文など）は必要になるので、テーマ作成を行う際にはテンプレートタグを中心に学習していただき、合わせてPHP構文などの基礎も学習しておきましょう。

MySQL

MySQLとは、オープンソースのリレーショナルデータベース管理システム（RDBMS）です。

MySQLは、データの永続的な保存、検索、更新、削除などのデータベース操作を行うためのソフトウェアです。

わかりやすく説明すると、情報を整理して保存し、必要な時にそれを取り出したり操作したりするためのツールです。

ウェブ開発の現場では、MySQLを使ってユーザーの登録情報や記事のコンテンツなどを保存し、それらを表示したり編集したりするのに使われています。

直接MySQLを触るということはテーマ開発ではそうそうないかと思いますので、ここでは知識として理解しておきましょう。（高度なテーマ開発では必要になる可能性があります）

テーマ作成に必要なPHPファイルの構成

テーマ作成に必要なPHPファイルの構成はWordPressの仕様で決まっております。

この決められたファイル名でPHPテンプレートを作成しなければWordPressのテーマとして機能しないので、ファイル名は間違えないようにご注意ください。

以下のファイル構成に従ってテーマを開発していくことになります。

上記は一通りのファイル構成になりますが、全てを作成する必要はなく、必要なものだけ作成する形で問題ありません。

ただし、上記の内容の中で以下のファイルは必須でありテーマとして成り立つ最低限のファイルになりますので、必ず作成してテーマを作成します。

• style.css
• index.php
• functions.php

最低限上記のファイルは必須なので、テーマのディレクトリファイルを作成したらそのファイル内に上記3つのファイルを作成して設置させましょう。

テンプレートの階層

WordPressにはテーマ開発において事前に知っておくべきテンプレート階層という仕組みがあります。

テンプレート階層とは、WordPressサイトのページが表示される時に読み込まれるPHPテンプレートファイルの順番・優先順位のことをいいます。

例えば、カテゴリーアーカイブページを表示させたときに、WordPressはまず最初にテーマファイル内に以下の内容で、上から順番にテンプレートファイルを探して当てはまるものがあればそのテンプレートファイルを読み込んでページを表示させます。

• category-{slug}.php
• category-{id}.php
• category.php
• archive.php
• index.php

上記のように、どのページを表示させるときも最終的な受け皿としてindex.phpが読み込まれるようになっております。

テンプレートタグ

テンプレートタグとは、WordPressで用意された独自の関数のことをいいます。

テンプレートタグを記述するだけで、記事詳細ページのタイトルや本文、カテゴリー、記事一覧の表示などを簡単に出力して表示することができます。

例えばテンプレートタグには以下の内容があります。

<h1><?php the_title(); ?></h1>

<div class="entry-content">
    <?php the_content(); ?>
</div>

これらは基本的なテンプレートタグの例ですが、WordPressでは1000個を超えるさまざまなテンプレートタグが提供されています。

これらのテンプレートタグを使用することで、WordPressテーマ内で動的なコンテンツを簡単に表示およびカスタマイズすることができます。

テーマの種類

WordPressには現在テーマの種類として以下の3種類あります。

• クラシックテーマ
• ブロックテーマ
• ハイブリットテーマ

それぞれ解説いたします。

クラシックテーマ

クラシックテーマとは、伝統的なWordPressのテーマ形式で、PHPとCSSを使用して構築され、従来の投稿やページの表示方法をカスタマイズします。

PHPとCSSを使用して構築され、テーマファイルには主にPHPコードが含まれます。

クラシックテーマは、投稿とページの表示方法をカスタマイズするために使用されます。

典型的なクラシックテーマには、index.php、single.php、page.phpなどのテンプレートファイルが含まれます。

ブロックテーマ

ブロックテーマとは、Gutenbergエディターのブロック機能を最大限に活用した、モダンで柔軟なWordPressテーマ形式です。

ブロックテーマでは、ページや投稿のコンテンツをブロックとして編集し、それぞれのブロックに異なるスタイルや機能を適用することができます。

ブロックテーマは、HTML、CSS、JavaScriptで構築され、テーマの外観や機能をカスタマイズするためにブロックパターンやスタイルシートを使用します。

ハイブリットテーマ

ハイブリッドテーマとは、クラシックテーマとブロックテーマの両方の特性を持つ、柔軟性の高いWordPressテーマ形式です。

つまり、PHPテンプレートファイルとGutenbergブロックを組み合わせて使用します。

これにより、従来のWordPressの柔軟性とGutenbergエディターの直感的な編集機能の両方を活用することができます。

ハイブリッドテーマは、クラシックなPHPテンプレートファイルに加えて、ブロックテーマ用のスタイルや機能を追加することができます。

テーマ作成の流れ

テーマ作成には流れがあります。

ここでは、執筆者が実際の実務で進めている流れ通りに解説するので、みなさんにとっても仕事で使えるテーマ開発の流れを知ることができます。

流れとしては以下の内容になり、上から順番として進めていく形になります。

• テーマのディレクトリを作成
• HTML・CSSで静的なサイトを作成
• WordPress化に必要なファイルを作成
• HTMLをWordPress化（PHPでプログラミング）
• テーマファイルをサーバーにアップロード
• テーマを有効化

次の「テーマの作り方」でそれぞれ手順通りに解説していきます。

当記事ではもっともWebサイト制作として開発されているクラシックテーマを前提に解説いたします。

テーマの作り方

それでは早速、テーマの作り方について解説していきたいと思います。

ここでの内容にある手順通りに手を動かしていただければ無理なくWordPressテーマを作成できるようになっておりますので、ご安心ください。

テーマのディレクトリを作成

まず初めにテーマを構成するためのディレクトリを作成しましょう。

当記事ではデスクトップに「sample_theme」という名前でディレクトリを作成します。

お使いのパソコンのOSがMacの方はターミナルを起動して以下のコマンドで作成するか、手動でデスクトップ上でぽちぽち操作してディレクトリを作成してください。

cd //ホームディレクトリに移動します。
cd desktop //ホームディレクトリからデスクトップディレクトリに移動します。
mkdir sample_theme //デスクトップディレクトリ内に「sample_theme」という名前の新しいディレクトリを作成します。

作成できたら、このディレクトリの中にWordPressテーマとして成り立たせるために必要なPHPファイルやCSSファイルなどをどんどん作成して追加していきます。

HTML・CSSで静的なサイトを作成

テーマのディレクトリが作成できたら、次はPHPテンプレートファイルを作成する下準備としてHTMLとCSSを作成します。

ここで作成したHTMLとCSSはあとでPHPのテンプレートファイルに変換します。

先ほど作成したsample_themeの中に「index.html」というファイル名でHTMLファイルを作成してください。

作成できたらエディタでファイルを開いて、ソースコードとして以下のコードをコピー＆ペーストしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Site</title>
    <link rel="stylesheet" href="styles.css">
	<style>
	/* styles.css */
	body {
		font-family: Arial, sans-serif;
		margin: 0;
		padding: 0;
	}
	header, nav, main, footer {
		padding: 20px;
	}
	header {
		background-color: #333;
		color: #fff;
	}
	nav ul {
		list-style-type: none;
		padding: 0;
	}
	nav ul li {
		display: inline;
		margin-right: 10px;
	}
    footer {
        background-color: #333;
        color: #fff;
        text-align: center;
        width: 100%;
    }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to my site</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>About Us</h2>
            <p>This is the about page content.</p>
        </section>
        <section>
            <h2>Contact Us</h2>
            <p>This is the contact page content.</p>
        </section>
        <section>
            <h2>Posts</h2>
            <ul>
                <li>
                    <a href="#">
                        Post Title 1
                    </a>
                </li>
                <li>
                    <a href="#">
                        Post Title 2
                    </a>
                </li>
                <li>
                    <a href="#">
                        Post Title 3
                    </a>
                </li>
            </ul>
        </section>
    </main>
    <footer>
        <p>© 2024 Static Site</p>
    </footer>
</body>
</html>

ペーストして保存していただきブラウザから確認していただけますと、以下のページが作成できたかと思います。

現時点では、ただのHTMLで作成された静的なページですが、このあとPHPファイルに変換してWordPressのテーマとして成立させていきます。

（デザイナーでもある高澤的には微妙な見栄えで耐えられないのですが、目的はテーマを作れるようになることなのでお許しください…笑）

作成したHTMLをWordPress化（PHPプログラミング）

次は、作成したHTMLファイルのソースコードにWordPressのテンプレートタグや関数を組み込んでいき、テーマに最低限必要なPHPテンプレートファイルであるindex.phpを作成していきます。

index.phpを作成することにより、WordPressがコンテンツを表示する際に必要な情報を取得し、適切な形式で表示することができテーマとしてページを表示する処理をになってくれます。

まずは静的なHTMLファイルをPHPファイルに変換します。

変換方法としてはシンプルにファイルの拡張子を「.html」から「.php」に変換していただけますとPHPファイルを作成できます。

以下のようにPHPファイルに変換できたらOKです。

PHPファイルに変換することでサーバーにアップロードした際にPHPファイルとして使用できるようになり、PHPプログラムを記述することで動的なコンテンツの表示や、再利用可能なテンプレートの作成が可能になります。

変換が完了したら、先ほどのHTMLのソースコードを以下のように記述してください。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
    <?php
    if(!is_front_page()):
    wp_title('｜', true, 'right');
    endif;
    bloginfo('name');
    ?>
    </title>
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
    <style>
    /* styles.css */
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    header, nav, main, footer {
        padding: 20px;
    }
    header {
        background-color: #333;
        color: #fff;
    }
    nav ul {
        list-style-type: none;
        padding: 0;
    }
    nav ul li {
        display: inline;
        margin-right: 10px;
    }
    footer {
        background-color: #333;
        color: #fff;
        text-align: center;
        width: 100%;
    }
    </style>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1><a href="<?php echo esc_url(home_url()); ?>/"><?php bloginfo('name'); ?></a></h1>
    </header>
    <nav>
        <?php
            wp_nav_menu(array(
                'theme_location' => 'primary',
                'container' => false,
                'menu_id' => '',
                'menu_class' => '',
            ));
        ?>
    </nav>
    <main>
        <section>
            <h2>About Us</h2>
            <p>This is the about page content.</p>
        </section>
        <section>
            <h2>Contact Us</h2>
            <p>This is the contact page content.</p>
        </section>
        <section>
            <h2>Posts</h2>
            <ul>
            <?php
            // WordPressループ　クエリのパラメーターを設定
            $args = array(
                'post_type' => 'post', // 投稿タイプ
                'posts_per_page' => 3,     // 表示件数
            );
            // WP_Queryを使用してクエリを実行
            $my_query = new WP_Query( $args );
            // ループで取得した投稿を表示
            if ($my_query->have_posts()):
                while ($my_query->have_posts()):$my_query->the_post();
                // 投稿の表示
                ?>
                <li>
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </li>
                <?php
                endwhile;
                wp_reset_postdata(); // ループの後に必要
            else :
                echo '投稿がありません';
            endif;
            ?>
            </ul>
        </section>
    </main>
    <footer>
        <p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

各箇所に、WordPress専用の関数であるテンプレートタグ等を記述し、データベースに保存されたデータを適切に出力して表示してくれるようになります。

ただし、このままではテーマとしてまだ成立しないため、このあと必要なファイルを作成していきます。

上記ソースコードにあるWordPressループ（while文によるループ）の部分については当記事では詳しく解説しませんが、以下の記事で詳細に解説しておりますので、よろしければご確認ください。

WordPress化に必要なファイルを作成

HTMLファイルのソースコードを必要な箇所をPHPのソースコードに書き換えることができましたら、次はWordPressのテーマとして成立させるために、WordPressの仕様に沿ってテーマとして最低限必要なファイルをいくつか作成していきます。

WordPressテーマとして成立するためには、最低限以下のファイルが必要になります。

• style.css: テーマのスタイルシート。テーマのメタ情報を記述します。
• index.php: テーマのトップレベル階層のテンプレートファイルです。
• functions.php: テーマの機能を追加、変更、または削除するためのPHPファイルです。

もうすでにindex.phpは作成したので、残りのstyle.cssとfunctions.phpの作り方を解説していきます。

style.cssの作り方

style.cssを作成します。
sample_themeの中に「style.css」というファイル名でPHPファイルを作成します。

style.cssとは、WordPressのテーマファイルとして成り立たせるために必須のCSSファイルになります。

テーマファイルのトップレベル階層にstyle.cssを作成して、以下のコードをコピー＆ペーストしてください。

@charset "UTF-8";

/*
	Theme Name: sample_theme
*/

上記をペーストしていただけますと、WordPressテーマのメタ情報として登録されて、管理画面からテーマファイルとして操作・設定することが可能となります。

このstyle.cssの記述は「Theme Name」以外にもメタ情報として必要な項目があります。

内容としては以下になります。

@charset "UTF-8";

/*
	Theme Name: テーマ名
	Description: このテーマは、ブログやウェブサイトにクリーンでモダンな外観を提供するカスタムWordPressテーマです。カスタマイズ可能な機能を含み、さまざまなプラグインをサポートして機能を強化します。
	Theme URI: https://example.com/my-custom-theme
	Author: 山田 太郎
	Author URI: https://example.com
	Version: 1.0.0
	License: GNU General Public License v2 またはそれ以降
	License URI: https://www.gnu.org/licenses/gpl-2.0.html
	Tags: ブログ, カスタムカラー, カスタムロゴ, カスタムメニュー, フィーチャー画像, フレキシブルヘッダー, ワンカラム, ツーカラム, 翻訳対応
*/

上記のメタ情報の説明については以下になります。

上記内容の中で最低限「Theme Name」が記述されていればテーマとして成り立ちますので、すべてを記述する必要性はありません。

ですが、できる限り記述しておくことで、テーマファイルとしてちゃんとした作りである印象を持たせることができ、また、テーマを公式で配布する場合はほぼほぼ必須の記述となりますので、できる限りしっかり記述しましょう。

またこれは余談ですが、本格的にテーマを作成する場合、例えばお仕事としてWebサイト制作としてテーマ開発する場合や、テーマを公式で配布する場合などは必要なものはすべて記述しましょう。

functions.phpの作り方

最後に、functions.phpを作成します。
sample_themeの中に「functions.php」というファイル名でPHPファイルを作成します。

逆にいうとこれだけです。すごく簡単かと思います。

functions.phpは、WordPressテーマの重要なファイルの一つで、テーマにカスタム機能や追加機能を追加するために使用されます。

要するに、WordPressプラグインの処理、テーマの処理、コアの処理などをカスタマイズするための処理を記述するためのPHPテンプレートファイルになります。

functions.phpの役割は多岐にわたりますが、主な役割をいくつかご紹介いたします。

テーマのセットアップ

functions.phpファイルは、テーマの初期設定やセットアップを行うために使用されます。これには、テーマのサポート機能（例えば、カスタムロゴ、フィードリンク、自動フィードリンクのサポートなど）の有効化が含まれます。

function my_theme_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

スクリプトやスタイルシートの追加

テーマにJavaScriptファイルやCSSファイルを追加するために、functions.phpファイルでwp_enqueue_scriptやwp_enqueue_style関数を使用します。

function my_theme_scripts() {
    wp_enqueue_style( 'main-styles', get_stylesheet_uri() );
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

カスタムメニューの登録

ナビゲーションメニューをカスタマイズするために、カスタムメニューを登録します。

function my_theme_menus() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my_theme' ),
        'footer'  => __( 'Footer Menu', 'my_theme' ),
    ));
}
add_action( 'init', 'my_theme_menus' );

ウィジェットエリアの追加

サイドバーやフッターにウィジェットエリアを追加するためのコードを記述します。

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my_theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Widgets in this area will be shown on all posts and pages.', 'my_theme' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

カスタム投稿タイプの作成

特定のタイプのコンテンツ（例：ポートフォリオ、イベントなど）に対応するカスタム投稿タイプを作成します。

function create_post_type() {
    register_post_type( 'portfolio',
        array(
            'labels' => array(
                'name' => __( 'Portfolios' ),
                'singular_name' => __( 'Portfolio' )
            ),
            'public' => true,
            'has_archive' => true,
        )
    );
}
add_action( 'init', 'create_post_type' );

ショートコードの追加

ショートコードを作成し、投稿やページにカスタムコンテンツを挿入できるようにします。

function my_custom_shortcode() {
    return '<p>これはカスタムショートコードです。</p>';
}
add_shortcode( 'custom_shortcode', 'my_custom_shortcode' );

その他の役割

• カスタムフィルターやアクションの追加：WordPressの動作を変更するために、フィルターやアクションフックを追加します。
• 外部APIとの連携：外部サービスと連携するためのコードを追加します。
• カスタムウィジェットの作成：独自のウィジェットを作成してテーマに追加します。

以上のように、functions.phpファイルは、テーマ全体のカスタマイズや機能拡張を行うための中心的な場所であり、テーマ開発者にとって非常に重要な役割を果たします。

functions.phpによってまだまだ自由自在にWordPressをカスタマイズすることができるので、functions.phpをどんどん使いこなしていきましょう。

index.phpの役割

ここで先ほど作成したindex.phpの役割について解説しておきたいと思います。

index.phpは、ウェブサイトやウェブアプリケーションのルートディレクトリにある主要なファイルの一つです。

WordPressの場合、index.php はWordPressのテーマの中でも最も基本的なファイルの一つであり、WordPressがページの表示を制御するための重要なファイルです。

具体的には、WordPressの index.php ファイルは以下の役割を持っています。

index.phpファイルは、テーマの中で最も基本的なファイルであり、最低限ページを表示するためのテンプレートファイルとして必要であるというページを構成する最後の受け皿の役割があります。

テーマ開発者はこのファイルを適切に設計してウェブサイトの外観や機能をカスタマイズします。

（当記事では静的なページを構成するHTMLファイルをWordPressテーマとして作り替えることを「WordPress化」と呼ぶことにします。）

ここまでで下図のようにテーマとして最低限の構成でのテーマ作成は完了です。

あとは作成したテーマをWordPress管理画面からアップロードしてテーマとして有効化すれば作成したページのデザイン通りにサイトが機能します。

テーマファイルをサーバーにアップロード

ここまで来ているということは無事sample_themeというディレクトリ名でテーマファイルを作成することができたかと思います。

あとはこのテーマをサーバーにアップロードしていきます。

アップロードする方法としては以下の方法があります。

• FTPファイルからサーバーへアップロード
• WordPress管理画面からアップロード

当記事ではそれぞれ解説いたします。

FTPファイルからサーバーへアップロード

まずはFTPファイルからレンタルサーバーを想定してアップロードする方法について解説いたします。

FTPソフトからサーバーへ接続し、wp-content/themes/ディレクトリ内にテーマフォルダを配置します。

当記事ではFileZillaを利用して解説いたします。
FTPシフトからサーバーへ接続するには以下の情報が必要です。

• ホスト：例）ftp.example.com または 192.168.1.1
• ユーザー名：例）example_user
• パスワード：例）example_password

上記接続情報に関しては、レンタルサーバー管理画面からFTPアカウントとして作成するなどすることで設定することができます。

下図のそれぞれの箇所に適切な情報を入力し、「クイック接続」をクリックしてください。

すると無事サーバーと接続されて下図のように右側にサーバーの内容が表示されたかと思います。

ご自身のWordPress本体のトップディレクトリ名のファイルをクリックして以下のように階層を進んでください。

【WordPress本体のトップディレクトリ名】/wp-content/themes/

すると下図のように「themes」の階層の一覧にインストール済みのテーマがずらりと表示されているかと思います。この階層に作成したテーマをアップロードします。

右側に作成したテーマをそのままドラッグ＆ドロップしてアップロードしてください。

アップロードが完了すると下図のようにテーマ名が表示されているかと思います。あとはWordPress管理画面から有効化します。

管理画面左メニューの「外観」をクリックしてください。

すると、インストール済みのテーマ一覧に作成したテーマが追加されているのが確認できたかと思います。

作成したテーマの箇所をホバーしていただき、「有効化」ボタンをクリックしてください。

「有効化」ボタンをクリックしていただくとサイトの見た目が作成したテーマの内容として反映されます。

トップページを確認してみてください。下図のようにテーマが反映されたことが確認できるかと思います。

WordPress管理画面からアップロード

次にWordPress管理画面からアップロードする方法について解説いたします。

まずざっくりやり方としては、WordPressの管理画面にログインし、外観 > テーマから新しく作成したテーマを選択して有効化します。すると、サイトは新しいWordPressテーマに変更され、作成したテーマのデザインと機能が適用されます。

ここからは図を通して解説いたします。

まずは管理画面左メニューの「外観」をクリックしてください。

「テーマのアップロード」をクリックしてください。

クリックすると、下図のように「ファイルを選択」というテーマをアップする箇所が表示されるので、作成したテーマをzipファイルに変換していただき、ドラッグ＆ドロップしていただくか、もしくは「ファイルを選択」ボタンからzipファイルのテーマを選択してアップロードしてください。

アップできたら、「今すぐインストール」をクリックしてください。

すると下図のようにインストールの処理が開始されて完了します。

有効化のリンクがあるのでクリックしてください。これでサイトの見た目が作成したテーマの見た目になります。

試しにトップページを確認してみてください。

下図のように表示されているかと思います。

これで最低限のテーマは完成です。長かったですね、お疲れ様でした！

あとはご自身の好きなようにカスタマイズして本格的なテーマ開発をしてください。

まとめ

WordPressのテーマを自作で作る方法についての解説は以上になります。

テーマを自作出来ることによって、WordPressでのサイト構築において100%自由な見た目でデザインを作ることができ、他にもSEO対策のためのカスタマイズをおこなったり柔軟に対応することが可能です。

また、WordPressのテーマを自作できるようになれば、WordPressエンジニアとして活躍できる可能性が高まります。

そのため、よろしければぜひ当記事をお仕事などでお役立ていただけましたら幸いです。