WordPressのテーマを自作して公開までの手順まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958142/1d25fe97-13ae-57d3-19bd-aba5d5f7a9ee.png)

私は今まで有料テーマのAFFINGER6を使っていましたが、自分で有料テーマレベルのものを作れないか気になって、テーマを自作して公開するまでの手順を調べてみました。

WordPressテーマの自作は、Web開発スキルやWordPressの仕組みに理解があることが前提となりますが、以下に基本的な手順を簡単にまとめてみました。

&emsp;

### 目次

1. [ローカル環境のセットアップ](https://qiita.com/umashikate/items/a768458b778dd4b6934a#1-%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97)
2. [テーマディレクトリの作成](https://qiita.com/umashikate/items/a768458b778dd4b6934a#2-%E3%83%86%E3%83%BC%E3%83%9E%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AE%E4%BD%9C%E6%88%90)
3. [スタイルシートの作成](https://qiita.com/umashikate/items/a768458b778dd4b6934a#3-%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)
4. [インデックスファイルの作成](https://qiita.com/umashikate/items/a768458b778dd4b6934a#4-%E3%82%A4%E3%83%B3%E3%83%87%E3%83%83%E3%82%AF%E3%82%B9%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90)
5. [テンプレートファイルの追加](https://qiita.com/umashikate/items/a768458b778dd4b6934a#5-%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E8%BF%BD%E5%8A%A0)
6. [機能の追加](https://qiita.com/umashikate/items/a768458b778dd4b6934a#6-%E6%A9%9F%E8%83%BD%E3%81%AE%E8%BF%BD%E5%8A%A0)
7. [テーマのプレビュー](https://qiita.com/umashikate/items/a768458b778dd4b6934a#7-%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC)
8. [テーマの公開](https://qiita.com/umashikate/items/a768458b778dd4b6934a#8-%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E5%85%AC%E9%96%8B)
&emsp;

## 1. ローカル環境のセットアップ

ローカル環境の構築は、WordPressテーマの開発を始めるための最初のステップです。以下はXAMPP(Windows)を使ったローカル環境のセットアップ手順ですが、他のツールを使用しても同様の手順でできると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958142/760b1e71-1673-85b5-4b7b-844d27e780a7.png)

#### 1-1. XAMPPのインストール
   XAMPPを[公式サイト](https://www.apachefriends.org/index.html)からダウンロードし、インストールします。

#### 1-2. XAMPPの起動
   インストールが完了したら、XAMPPを起動し、ApacheとMySQLを開始します。これにより、ローカルサーバーが起動します。

#### 1-3. WordPressのダウンロード
   [WordPressの公式サイト](https://wordpress.org/download/)から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テーマを作成するためには、まずテーマ用のディレクトリを作成する必要があります。以下はこのステップの詳細な手順です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958142/1d6fcd4d-f29e-0149-da76-51a91def5fe2.png)

#### 2-1. wp-content/themesディレクトリに移動
   WordPressのインストールディレクトリの中にある`wp-content/themes`ディレクトリに移動します。このディレクトリにはWordPressのテーマが格納されます。

   ```bash
   cd wp-content/themes
   ```

#### 2-2. テーマディレクトリの作成
   新しいテーマ用のディレクトリを作成します。このディレクトリの名前が後でWordPress管理画面で表示されるテーマ名となります。

   ```bash
   mkdir your-theme-name
   ```

#### 2-3. テーマディレクトリへ移動
   作成したテーマディレクトリに移動します。

   ```bash
   cd your-theme-name
   ```

#### 2-4. スタイルシートファイルの作成
   テーマの基本情報やスタイルを定義するために、`style.css`ファイルを作成します。

   ```bash
   touch style.css
   ```

   `style.css`ファイルにはテーマの基本情報を以下のように記述します。

   ```css
   /*
   Theme Name: Your Theme Name
   Author: Your Name
   Description: Your theme description.
   Version: 1.0
   */
   ```

これで、WordPressテーマの骨組みができました。次に、このテーマディレクトリ内に必要なファイルやディレクトリを追加していきます。

## 3. スタイルシートの作成

WordPressテーマを構築する際に、`style.css`ファイルはテーマの基本情報だけでなく、スタイルを定義するための重要なファイルです。以下はスタイルシートを作成する手順です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958142/817f472f-eace-8da6-83f8-d3b357b91df1.png)

#### 3-1. テーマディレクトリに戻る
   まず、テーマディレクトリに戻ります。

   ```bash
   cd wp-content/themes/your-theme-name
   ```

#### 3-2. スタイルシートの作成
   スタイルシートファイル `style.css` をテーマディレクトリに作成します。

   ```bash
   touch style.css
   ```

#### 3-3. エディタでスタイルシートを編集
   お好きなテキストエディタ（Visual Studio Code等）で `style.css` を開きます。

#### 3-4. 基本情報の追加
   ファイルの先頭に、テーマの基本情報を追加します。

   ```css
   /*
   Theme Name: Your Theme Name
   Author: Your Name
   Description: Your theme description.
   Version: 1.0
   */
   ```

#### 3-5. スタイルの追加
   その後、必要に応じてスタイルを追加します。例えば、以下のように基本的なスタイルを追加できます。

   ```css
   body {
       font-family: 'Arial', sans-serif;
       background-color: #f4f4f4;
   }

   h1, h2, h3 {
       color: #333;
   }

   /* その他のスタイルを追加 */
   ```

これで、`style.css`に基本的なスタイルが追加されました。このファイルを編集して、テーマの外観を調整しましょう。次に、必要なテンプレートファイルを追加していきます。

## 4. インデックスファイルの作成

WordPressテーマの主要なファイルの一つが `index.php` です。このファイルは、WordPressがコンテンツを表示するための基本的なテンプレートファイルです。以下は `index.php` ファイルを作成する手順です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958142/4ba220ca-efeb-6745-2b13-5f528da2d4c8.png)

#### 4-1. テーマディレクトリに戻る
   まず、テーマディレクトリに戻ります。

   ```bash
   cd wp-content/themes/your-theme-name
   ```

#### 4-2. インデックスファイルの作成
   `index.php` ファイルを作成します。

   ```bash
   touch index.php
   ```

#### 4-3. エディタでファイルを編集
   お好きなテキストエディタで `index.php` ファイルを開きます。

#### 4-4. 基本的なコードの追加
   `index.php` には最低限以下のコードを追加します。これにより、WordPressがコンテンツを表示できるようになります。

   ```php
   <?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` 以外のテンプレートファイルも重要です。これらのファイルは、異なるページや投稿タイプを表示する際に使用されます。以下は、いくつかの基本的なテンプレートファイルの追加手順です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958142/2a06232b-a9f8-afae-a5b6-33a230f5f247.png)

#### 5-1. テーマディレクトリに戻る
   テーマディレクトリに移動します。

   ```bash
   cd wp-content/themes/your-theme-name
   ```

#### 5-2. テンプレートファイルの作成
   必要なテンプレートファイルを作成します。例えば、`header.php`, `footer.php`, `single.php`, `archive.php`などです。

   ```bash
   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
   <?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` ファイルに機能を追加する手順です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958142/c824c460-ac8a-eaed-67c5-179bf4246b37.png)

#### 6-1. テーマディレクトリに戻る
   テーマディレクトリに移動します。

   ```bash
   cd wp-content/themes/your-theme-name
   ```

#### 6-2. `functions.php` ファイルの作成
   `functions.php` ファイルを作成します。

   ```bash
   touch functions.php
   ```

#### 6-3. エディタで `functions.php` ファイルを編集
   `functions.php` ファイルを開き、追加したい機能のコードを挿入します。

   例えば、カスタムメニューやウィジェットエリアを有効にする場合:

   ```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` ファイルはさまざまな機能を追加できる場所です。例えば、カスタムポストタイプ、ショートコード、テーマのサポート機能の有効化などがあります。

   ```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テーマがしっかりと動作しているか確認する手順です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958142/01053861-61cc-2667-9f67-4469b0180f64.png)

#### 7-1. WordPressの管理画面でテーマを有効化
   テーマをプレビューするには、WordPressの管理画面にログインし、「外観」 → 「テーマ」に進み、開発中のテーマを有効にします。

#### 7-2. テーマのプレビュー
   WordPressの管理画面でテーマを有効にした後、サイトにアクセスして変更されたかをプレビューします。これにより、実際のサイトにテーマの変更が反映される前に、変更を確認できます。

#### 7-3. デバッグツールの利用
   ブラウザの開発者ツールを使用して、CSSやJavaScriptのエラーをチェックします。これにより、スタイルやスクリプトが正しく読み込まれているかどうかを確認できます。

#### 7-4. ログの確認
   `functions.php` ファイル内でエラーログを有効にしておくと、PHPのエラーが発生した場合にそれを確認できます。以下のコードを `functions.php` に追加してエラーログを有効にします。

   ```php
   // エラーログを有効にする
   define('WP_DEBUG', true);
   define('WP_DEBUG_LOG', true);
   define('WP_DEBUG_DISPLAY', false);
   ```

   この設定によって、`wp-content` ディレクトリに `debug.log` ファイルが生成され、そこにエラーメッセージが記録されます。

#### 7-5. テーマチェックプラグインの利用
   [Theme Check](https://wordpress.org/plugins/theme-check/) プラグインをインストールし、テーマがWordPressのベストプラクティスに準拠しているかどうかを確認できます。

#### 7-6. テーマの最適化
   CSSやJavaScriptを最小化・結合し、画像を最適化するなどして、テーマの読み込み速度を向上させることができます。これによって、ユーザーエクスペリエンスを向上させることができます。


## 8. テーマの公開

※8.テーマ公開をする予定はないのですが、簡単に調べて手順をのせています。

テーマの開発が終了して、テーマを公開する手順です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958142/cfb95621-69f5-ff79-f799-6149e67f3fe2.png)

#### 8-1. 不要なファイルの削除
   テーマディレクトリ内には開発時に一時的に作成したファイルやディレクトリが残っているかもしれません。不要なファイルやディレクトリを削除して整理します。

#### 8-2. テーマのドキュメンテーション
   テーマの使用法やカスタマイズの手順をまとめたドキュメンテーションを作成して、テーマについて分かりやすく記録を残します。

#### 8-3. テーマの圧縮
   テーマをZIPファイルなどに圧縮します。WordPressのテーマは通常、ZIP形式で配布されます。このZIPファイルが他のユーザーがWordPressの管理画面からテーマをアップロードする際に使用されます。

#### 8-4. 公開先の選定
   WordPressの公式テーマディレクトリ（[WordPress Theme Directory](https://wordpress.org/themes/)）に登録して一般に公開するか、または個人のウェブサイトやテーマ販売プラットフォームで提供するかなどを決めます。

#### 8-5. 公開情報の入力
   WordPressの公式テーマディレクトリに登録する場合は、テーマの基本情報、スクリーンショット、説明などを用意しておきます。これによって、ユーザーがテーマを選択する際に情報を見ることができます。

#### 8-6. テスト
   テーマを実際のWordPressサイトでテストし、表示や機能に問題がないか確認します。異なる環境やブラウザでの動作も忘れずに確認しておきます。

#### 8-7. ライセンスの設定
   テーマに適切なライセンスを設定し、使用条件や制約を明示します。もしもの場合の、法的な問題を回避するためにも必要です。

#### 8-8. テーマの提供
   テーマファイルを公開先にアップロードし、ユーザーが簡単にダウンロードできるようにします。

#### 8-9. サポートと更新
   テーマを公開した後も、ユーザーサポートやバグ修正、新しいWordPressバージョンへの対応などを継続的に行います。

「WordPressのテーマを自作して公開までの手順」をまとめてみて、意外と作れそうだったので挑戦してみたいと思います。