WordPress

【コピペOK】WordPressの子テーマの作り方

こんにちは!副業ブログで小遣い稼ぎしているエンジニアのセンリです。

今回は子テーマの作り方について解説します。

テーマをカスタマイズしたいなら子テーマ作成は必須です。

そもそも子テーマは必須なのかという点については「WordPressの子テーマは必要?面倒だけど実は超大事な役割がある」で解説しています。

今まで使っていた親テーマの設定は引き継げません。時間のあるときに子テーマの設定をしましょう。

子テーマの作り方

子テーマの作り方
子テーマの作り方

子テーマはレンタルサーバーのファイルマネージャーの中で作るのがラクです。

もちろんコードエディタのアプリを持っている人はそれでもOK。

ちなみに当ブログでおすすめしているConoHa WINGのファイルマネージャーはこちらを参考にしてみてください>>ファイルマネージャーを利用する

手順1:子テーマのフォルダを作る

手順1:子テーマのフォルダを作る
手順1:子テーマのフォルダを作る

まずは子テーマのデータを入れるフォルダを作ります。

作る場所は下記の通りです。

子テーマのフォルダを作る場所

public_html
→ご利用のドメイン
→wp-content
→themes

名前は適当でもいいのですが「親テーマの名前-child」みたいな名前で作ると管理しやすいのでおすすめです。

この後作っていくファイルはすべてこのフォルダにいれていきます。

手順2:style.cssを作る

手順2:style.cssを作る
手順2:style.cssを作る

子テーマのフォルダを開いたらstyle.cssを作ります。

ConoHa WINGをご利用なら上部のメニューから「新規ファイルを作成」→「CSS:スタイルシート」を選んでください。

ファイル名は必ず「style.css」にしてください。

/*
 Theme Name:   親テーマの名前-child
 Theme URI:    テーマのHP(任意)
 Description:  テーマの説明(任意)
 Author:       作った人の名前(任意)
 Author URI:   http://example.com
 Template:     親テーマのディレクトリ名(ファイル名)
 Version:      1.0
*/

任意のものは書かなくてもOKです。見た目を本物のテーマっぽくしたい人は書いてみてください。

Templateは間違えるとテーマが反映されません。スペルミスに気をつけましょう。

手順3:function.phpを作る

手順3:function.phpを作る
手順3:function.phpを作る

次にfunction.phpのファイルを作ります。

新規ファイル作成からPHPを選べば作れます・

ファイル名は必ず「function.php」にしてください。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

どのテーマでも同じコードなのでそのままコピペしましょう!

手順4:有効化してアレンジする

手順4:有効化してアレンジする
手順4:有効化してアレンジする

最後にWordPressの管理画面から「外観」→「テーマ」から有効化しましょう。

これで子テーマは完成です。

これまで親テーマで設定したものは反映されなくなります。

-WordPress