【一番シンプル】WordPressの子テーマ制作手順

自分用のメモですが、端的にwordpressの子テーマの作り方をノートしておきます。

子テーマの制作手順

1. １FTPクライアント（「FFFTP」や「WinSCP」など）で、サイトのサーバーにアクセスして、親テーマのディレクトリ（フォルダ）名を確認する。
2. ２コードエディタを使って、「style.css」ファイルを作成し、以下のコードを書いて保存する。
   

   style.css

   /*
   Theme Name: sample_theme
   Template: parent_directory_name
   */
   

   注意点

   • 名前は「style.css」にすること。
   • Theme Name：には、新しく作りたい子テーマの名前（任意）をつける。
   • Template:には、親テーマのディレクトリ名を入れる。大文字小文字の間違いに注意。テーマ名ではなく、テーマのディレクトリ（フォルダ）名であることに注意。

   ファイルを作るのがめんどくさい方は、以下からcssファイルをダウンロードできます。ダウンロード後、必ずコード中の「sample_theme」と「parent_directory_name」を書き換えて使ってください。
   

   

   style.css

   1 ファイル 0.07 KB

   DOWNLOAD

3. ３コードエディタを使って、「functions.php」ファイルを作成し、以下のコードを書いて保存する。
   

   functions.php

   <?php
   function my_theme_enqueue_styles() {
       wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
   }
   add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
   function my_theme_enqueue_child_styles() {
       wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
   }
   add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_child_styles', 11 );
   

   注意点

   • 名前は「functions.php」にすること。

   ファイルを作るのがめんどくさい方は、以下からphpファイルをダウンロードできます。
   

   

   functions.php

   1 ファイル 8.00 KB

   DOWNLOAD

4. ４子テーマのフォルダ（例：「sample_theme」など）を作り、２で作った「style.css」ファイルと、３で作った「functions.php」を入れ、.zip形式で圧縮する。
   

   注意点

   • フォルダ名にスペースは入れないこと。私はわかりやすいように、子テーマの名前とディレクトリ名（フォルダ名）は同じにしています。
5. ５wordpress管理画面の「テーマ」に移動し、「新規追加」＞「テーマのアップロード」、先ほど作成したzipファイルを選択してインストールし、有効化する。
   「テーマファイルエディター」からstyle.cssファイルを編集するなどして、テーマがちゃんと効いていることを確認して終了。

適用されない場合に確認する事

きちんと親テーマと子テーマが読み込まれない場合、以下を確認しましょう。

• 「Template:」で親テーマのディレクトリ名を正しく表記しているか。テンプレートによって「テーマ名」と「ディレクトリ名」が異なる場合があります。かならず「テーマ名」ではなく、「ディレクトリ名」を確認して記入しましょう。
• ファイル名がちゃんと「style.css」と「functions.php」になっているか。私は「function.php」（sが抜けてる）になっていて、動かないということがありました。
• 「Theme Name:」「Template:」の後には、「半角スペース」が必要です。ここが全角になっていたりしないか確認しましょう。
  また「Template : 」のように、「:」の前に半角スペースが入っているのもNGです。

おまけ

style.cssには「Theme Name」と「Template」があれば問題ありませんが、このほかにも以下の情報など（他にもある）を入れることもできます。

/*
Theme Name: 子テーマ名
Template: 親テーマのディレクトリ名
Theme URI: テーマのダウンロードURLなど
Description: テーマの説明文
Author: テーマの作者名
Author URI: 作者のサイトなどのURL
Version: テーマのバージョン
License: ライセンス
License URI: ライセンスに関する情報のURL
*/

また、テーマのフォルダに「screenshot.jpg」という名前のサムネイル（縦横比3:4推奨）を入れると、テーマ一覧のページにサムネイルが表示されます。

Tweet