こんにちは。

佐藤です。

 

今日は超スーパーウルトラ簡単にワードプレスの子テーマを作る方法を解説します。

子テーマについての解説は後にするとして早速やっていきましょう。

※ちなみにこちらの内容を元に解説していきます。

 

1.  テーマフォルダを作成する

/wp-content/themes/内に好きな名前でフォルダを作成します。

好きな名前でと言っても全角文字は避けましょう。

 

2.  style.cssファイルを作成する

1で作ったフォルダの中にstyle.cssファイルを作成します。

内容は下記の様にします。

/*
Theme Name:  twentynineteen child 
Description:  既存テーマの修正用テーマ
Author:  Shinji Sato
Author URI:https://kaminarimagazine.com/
Template:  twentynineteen（「/wp-content/themes/」内フォルダ名）
Version:  1.0
*/

ちなみに最低限必要なのは
「Theme Name」
「Template」
の二つのみなので面倒な人は以下内容でも問題ありません。

/*
Theme Name:  twentynineteen child 
Template:  twentynineteen
*/

項目の大事な大事な内容説明

「Theme Name」：テーマの名前、なんでもよい

「Template」：親テーマを指定する、親テーマの「Theme Name」ではなくフォルダ名を指定する

 

そしてここまでで子テーマの作成は終了しました。

お疲れ様でした。

 

っと終わらせたいところですがこのままでは親テーマの直下にある「style.css」が読み込まれないので「3」の処理で読み込ませましょう。

※親テーマの「style.css」を読み込ませる必要がなければ「3」は飛ばしても問題ありません。

 

3. functions.phpファイルを作成する

1で作ったフォルダの中にfunctions.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'));
 }

軽く解説しておくと

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ )の部分で親テーマのstyle.cssを読み込み、

wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’))で子テーマのスタイルを読み込んでいます。

※普通wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’))は記述しなくても読み込まれますが、せっかくなので付けておいても損はないでしょう。

 

4. テーマを有効化する

後はワードプレスの管理画面から「外観」→「Theme Nameで設定した名前のテーマを有効化」

させれば完成。

 

あと必須ではないですが「screenshot.png」を作成するとサムネが表示される様になります。

 

あとは作ったテーマを好きに修正していきましょう。

 

5. オマケ

フックでスマートにheadタグ内やfooterタグ内、body開始タグ直後に追加しよう！

functions.phpに少し追加すればheader.phpやfooter.phpを作らずとも簡単に好きなhtmlを挿入できます。
例としてstyleやjavascriptを読み込んでみましょう。

ヘッダーなら

//wp_headへのフック
function add_head_items(){
  echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/css/main.css" />';
}
add_action('wp_head', 'add_head_items');

こんな感じ

フッターなら

//wp_footerへのフック
function add_footer_items(){
  echo '<script type="text/javascript" href="'.get_stylesheet_directory_uri().'/js/main.js"></script>';
}
add_action('wp_footer', 'add_footer_items');

こんな感じ

body開始タグ直後なら

//wp_body_openへのフック
function add_body_items(){
  echo '<p>やったね</p>';
}
add_action( 'wp_body_open', 'add_body_items');

こんな感じ
※「wp_body_open」はwp5.2以上且つbody開始タグ直後に「wp_body_open()」が入力されている必要があります。