私は今まで有料テーマのAFFINGER6を使っていましたが、自分で有料テーマレベルのものを作れないか気になって、テーマを自作して公開するまでの手順を調べてみました。
WordPressテーマの自作は、Web開発スキルやWordPressの仕組みに理解があることが前提となりますが、以下に基本的な手順を簡単にまとめてみました。
目次
1. ローカル環境のセットアップ
ローカル環境の構築は、WordPressテーマの開発を始めるための最初のステップです。以下はXAMPP(Windows)を使ったローカル環境のセットアップ手順ですが、他のツールを使用しても同様の手順でできると思います。
1-1. XAMPPのインストール
XAMPPを公式サイトからダウンロードし、インストールします。
1-2. XAMPPの起動
インストールが完了したら、XAMPPを起動し、ApacheとMySQLを開始します。これにより、ローカルサーバーが起動します。
1-3. WordPressのダウンロード
WordPressの公式サイトからWordPressをダウンロードし、XAMPPのhtdocsディレクトリに解凍します。
1-4. データベースの作成
ブラウザでhttp://localhost/phpmyadminにアクセスし、新しいデータベースを作成します。WordPressがデータを保存するための場所です。
1-5. WordPressの設定
ブラウザでhttp://localhost/wordpressにアクセスし、WordPressのセットアップ画面が表示されるので、必要な情報を入力してインストールします。データベース名やユーザー名は先程作成したものを使用します。
1-6. WordPressの設定ファイル
WordPressが正常にインストールされたら、wp-config.phpファイルを開き、データベースの接続情報を設定します。
これでWordPressがローカル環境で動作するようになります。次に、テーマ開発に取りかかることができます。
2. テーマディレクトリの作成
WordPressテーマを作成するためには、まずテーマ用のディレクトリを作成する必要があります。以下はこのステップの詳細な手順です。
2-1. wp-content/themesディレクトリに移動
WordPressのインストールディレクトリの中にあるwp-content/themesディレクトリに移動します。このディレクトリにはWordPressのテーマが格納されます。
cd wp-content/themes
2-2. テーマディレクトリの作成
新しいテーマ用のディレクトリを作成します。このディレクトリの名前が後でWordPress管理画面で表示されるテーマ名となります。
mkdir your-theme-name
2-3. テーマディレクトリへ移動
作成したテーマディレクトリに移動します。
cd your-theme-name
2-4. スタイルシートファイルの作成
テーマの基本情報やスタイルを定義するために、style.cssファイルを作成します。
touch style.css
style.cssファイルにはテーマの基本情報を以下のように記述します。
/*
Theme Name: Your Theme Name
Author: Your Name
Description: Your theme description.
Version: 1.0
*/
これで、WordPressテーマの骨組みができました。次に、このテーマディレクトリ内に必要なファイルやディレクトリを追加していきます。
3. スタイルシートの作成
WordPressテーマを構築する際に、style.cssファイルはテーマの基本情報だけでなく、スタイルを定義するための重要なファイルです。以下はスタイルシートを作成する手順です。
3-1. テーマディレクトリに戻る
まず、テーマディレクトリに戻ります。
cd wp-content/themes/your-theme-name
3-2. スタイルシートの作成
スタイルシートファイル style.css をテーマディレクトリに作成します。
touch style.css
3-3. エディタでスタイルシートを編集
お好きなテキストエディタ（Visual Studio Code等）で style.css を開きます。
3-4. 基本情報の追加
ファイルの先頭に、テーマの基本情報を追加します。
/*
Theme Name: Your Theme Name
Author: Your Name
Description: Your theme description.
Version: 1.0
*/
3-5. スタイルの追加
その後、必要に応じてスタイルを追加します。例えば、以下のように基本的なスタイルを追加できます。
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
h1, h2, h3 {
color: #333;
}
/* その他のスタイルを追加 */
これで、style.cssに基本的なスタイルが追加されました。このファイルを編集して、テーマの外観を調整しましょう。次に、必要なテンプレートファイルを追加していきます。
4. インデックスファイルの作成
WordPressテーマの主要なファイルの一つが index.php です。このファイルは、WordPressがコンテンツを表示するための基本的なテンプレートファイルです。以下は index.php ファイルを作成する手順です。
4-1. テーマディレクトリに戻る
まず、テーマディレクトリに戻ります。
cd wp-content/themes/your-theme-name
4-2. インデックスファイルの作成
index.php ファイルを作成します。
touch index.php
4-3. エディタでファイルを編集
お好きなテキストエディタで index.php ファイルを開きます。
4-4. 基本的なコードの追加
index.php には最低限以下のコードを追加します。これにより、WordPressがコンテンツを表示できるようになります。
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>
このコードは、基本的なループを使ってWordPressの投稿を表示するものです。
これで index.php ファイルが作成され、WordPressテーマの基本的なテンプレートができました。このファイルを編集して、自分のテーマに合ったデザインやレイアウトを追加していきましょう。
5. テンプレートファイルの追加
WordPressテーマの構築において、index.php 以外のテンプレートファイルも重要です。これらのファイルは、異なるページや投稿タイプを表示する際に使用されます。以下は、いくつかの基本的なテンプレートファイルの追加手順です。
5-1. テーマディレクトリに戻る
テーマディレクトリに移動します。
cd wp-content/themes/your-theme-name
5-2. テンプレートファイルの作成
必要なテンプレートファイルを作成します。例えば、header.php, footer.php, single.php, archive.phpなどです。
touch header.php
touch footer.php
touch single.php
touch archive.php
5-3. エディタで各ファイルを編集
各ファイルをお好きなテキストエディタで開き、それぞれに必要なコードを追加します。
-
header.php: サイトのヘッダー部分のコードを追加 -
footer.php: サイトのフッター部分のコードを追加 -
single.php: 個別の投稿を表示する際のコードを追加 -
archive.php: 投稿アーカイブを表示する際のコードを追加
これらのファイルは、各ページや投稿タイプごとに異なるレイアウトやスタイルを適用するために使用されます。
5-4. テンプレートタグの利用
WordPressでは、get_header(), get_footer(), the_content(), the_title() などのテンプレートタグを使用して、動的にコンテンツを表示します。各テンプレートファイルにこれらのタグを組み込むことで、WordPressが適切に動作します。
例:
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>
これで、基本的なテンプレートファイルが作成されました。各ファイルを必要に応じて拡張し、サイトの外観や機能を調整していきましょう。
6. 機能の追加
WordPressテーマの functions.php ファイルは、テーマに機能を追加するための重要なファイルです。これには新しいウィジェット、カスタムポストタイプ、ショートコード、テーマサポートなどが含まれます。以下は functions.php ファイルに機能を追加する手順です。
6-1. テーマディレクトリに戻る
テーマディレクトリに移動します。
cd wp-content/themes/your-theme-name
6-2. functions.php ファイルの作成
functions.php ファイルを作成します。
touch functions.php
6-3. エディタで functions.php ファイルを編集
functions.php ファイルを開き、追加したい機能のコードを挿入します。
例えば、カスタムメニューやウィジェットエリアを有効にする場合:
// カスタムメニューのサポート
function theme_custom_menus() {
register_nav_menus(array(
'primary_menu' => __('Primary Menu'),
'footer_menu' => __('Footer Menu'),
));
}
add_action('init', 'theme_custom_menus');
// ウィジェットエリアのサポート
function theme_widgets_init() {
register_sidebar(array(
'name' => __('Sidebar Widget Area'),
'id' => 'sidebar-widget-area',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'theme_widgets_init');
これによって、テーマに「プライマリメニュー」と「フッターメニュー」が利用可能になり、サイドバーウィジェットエリアも作成されます。
6-4. 他の機能の追加
functions.php ファイルはさまざまな機能を追加できる場所です。例えば、カスタムポストタイプ、ショートコード、テーマのサポート機能の有効化などがあります。
// カスタムポストタイプの登録
function create_custom_post_type() {
register_post_type('custom_type', array(
'labels' => array(
'name' => __('Custom Posts'),
'singular_name' => __('Custom Post'),
),
'public' => true,
'has_archive' => true,
'rewrite' => array('slug' => 'custom-posts'),
));
}
add_action('init', 'create_custom_post_type');
これで、functions.php ファイルを使用してテーマに様々な機能を追加することができます。
7. テーマのプレビュー
以下はWordPressテーマがしっかりと動作しているか確認する手順です。
7-1. WordPressの管理画面でテーマを有効化
テーマをプレビューするには、WordPressの管理画面にログインし、「外観」 → 「テーマ」に進み、開発中のテーマを有効にします。
7-2. テーマのプレビュー
WordPressの管理画面でテーマを有効にした後、サイトにアクセスして変更されたかをプレビューします。これにより、実際のサイトにテーマの変更が反映される前に、変更を確認できます。
7-3. デバッグツールの利用
ブラウザの開発者ツールを使用して、CSSやJavaScriptのエラーをチェックします。これにより、スタイルやスクリプトが正しく読み込まれているかどうかを確認できます。
7-4. ログの確認
functions.php ファイル内でエラーログを有効にしておくと、PHPのエラーが発生した場合にそれを確認できます。以下のコードを functions.php に追加してエラーログを有効にします。
// エラーログを有効にする
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
この設定によって、wp-content ディレクトリに debug.log ファイルが生成され、そこにエラーメッセージが記録されます。
7-5. テーマチェックプラグインの利用
Theme Check プラグインをインストールし、テーマがWordPressのベストプラクティスに準拠しているかどうかを確認できます。
7-6. テーマの最適化
CSSやJavaScriptを最小化・結合し、画像を最適化するなどして、テーマの読み込み速度を向上させることができます。これによって、ユーザーエクスペリエンスを向上させることができます。
8. テーマの公開
※8.テーマ公開をする予定はないのですが、簡単に調べて手順をのせています。
テーマの開発が終了して、テーマを公開する手順です。
8-1. 不要なファイルの削除
テーマディレクトリ内には開発時に一時的に作成したファイルやディレクトリが残っているかもしれません。不要なファイルやディレクトリを削除して整理します。
8-2. テーマのドキュメンテーション
テーマの使用法やカスタマイズの手順をまとめたドキュメンテーションを作成して、テーマについて分かりやすく記録を残します。
8-3. テーマの圧縮
テーマをZIPファイルなどに圧縮します。WordPressのテーマは通常、ZIP形式で配布されます。このZIPファイルが他のユーザーがWordPressの管理画面からテーマをアップロードする際に使用されます。
8-4. 公開先の選定
WordPressの公式テーマディレクトリ（WordPress Theme Directory）に登録して一般に公開するか、または個人のウェブサイトやテーマ販売プラットフォームで提供するかなどを決めます。
8-5. 公開情報の入力
WordPressの公式テーマディレクトリに登録する場合は、テーマの基本情報、スクリーンショット、説明などを用意しておきます。これによって、ユーザーがテーマを選択する際に情報を見ることができます。
8-6. テスト
テーマを実際のWordPressサイトでテストし、表示や機能に問題がないか確認します。異なる環境やブラウザでの動作も忘れずに確認しておきます。
8-7. ライセンスの設定
テーマに適切なライセンスを設定し、使用条件や制約を明示します。もしもの場合の、法的な問題を回避するためにも必要です。
8-8. テーマの提供
テーマファイルを公開先にアップロードし、ユーザーが簡単にダウンロードできるようにします。
8-9. サポートと更新
テーマを公開した後も、ユーザーサポートやバグ修正、新しいWordPressバージョンへの対応などを継続的に行います。
「WordPressのテーマを自作して公開までの手順」をまとめてみて、意外と作れそうだったので挑戦してみたいと思います。