初心者でも3分でわかる！WordPressの子テーマの作り方

WordPress 子テーマの作り方をいい加減に学ぼうと思った

どうも、Linです。熱帯魚、泳がせてます。

WordPress のテーマを更新したら編集箇所が消えてしまった！！

FuuuuuuuK!!!

という経験はありませんか？？

ぼくにはあります笑

先日、 WordPress の某サイトで503エラーが発生してしまい、やけくそでテーマを更新したら編集箇所が一気に消えてしまったのです。

FREE SWORDER

WordPressで503エラー（503 Service Unavailable）が出た時の対処法

https://freesworder.net/wordpress-503-service-unavailable/

WordPressで503エラーが出たんだけど！？どうも、Linです。マスク、2枚ゲットです。先日、エックスサーバーで運用していたWordPressのサイトが突然逝きました。いつもの通りサイトにアクセスしようとしたら、503 Service Unavailableというエラーが出てうんと...

これまでめんどくさくて子テーマを作るのを拒否していたので、100%自己責任。。

そういった事件もありまして、

「今後は WordPress のテーマを更新しても編集箇所が消えないようにしよう」

と決心し、子テーマの作り方を一から勉強してみました。

なお、勉強にあたりこちらの神記事様たちを参考にさせていただきました↓

アフィリエイトで稼ぐ方法を全部話そうと思う

子テーマの作り方と有効化する方法【図解】

https://affiliate150.com/child-theme-set-up

前回までの記事でWordPressをカスタマイズするには子テーマを最初に作っておく事が重要という記事を書いてきました。おさらいしておくと、テーマが更新する度にカスタマイズしたファイル達は全部初期化さ

wpdocs.osdn.jp

子テーマ - WordPress Codex 日本語版

https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

SANGOカスタマイズガイド

WordPressで子テーマを活用して安全にカスタマイズを行う方法

https://saruwakakun.com/sango/child-theme

WordPressにはカスタマイズを安全に行うために「子テーマ」と呼ばれるものを使うことができます。目次子テーマとは？子テーマを使うメリット誤って重要なコードを消してしまう不安が軽減テーマのアップデート時にもカスタマイ ...

寝ログ

WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など

https://nelog.jp/wordpress-child-theme

Wordpressテーマのカスタマイズに必要な「子テーマ」と「親テーマ」に関する概念に関する説明です。子テーマの作り方や、使い方についても説明しています。テンプレートやスタイルを変更するなら、必ず押さえておきたいWordpressのテクニッ

今日は子テーマの作り方を自分なりにまとめてみたので、ワードプレス初心者の方に参考にしていただけると嬉しいです。

WordPress 子テーマの作り方の基本

数々の神記事を読み漁った結果、次の4つのフェーズにわかれていると悟りました。

作る
編集する
入れる
有効化する

これらのステップを忠実に再現し、子テーマを作ることに成功すると、

子テーマでエラーが起きても親テーマには影響がない
親テーマを更新しても自分の編集箇所を残すことができる

という2つのメリットを享受できることができます。

それぞれのステップごとに見ていきましょう。

[1] WordPress の子テーマを作る

まずWordPress の子テーマ作るという作業ですね。

子テーマの作り方は次の2ステップ。

Step1. 子テーマ用のフォルダを作成する

最初にやるべきことは、

子テーマのファイルたちを入れるフォルダを作成するということです。

ここで重要になってくるのがフォルダの命名方法。

フォルダ名はぶっちゃけ何でもいいのですが、どのテーマの子テーマなのかはっきりさせるために、

テーマ名 – child

というフォルダ名が望ましいでしょう。

例えば、WordPressテーマ「ストーク」の子テーマでしたら、

stork-child

となるわけです。

こちらのフォルダをPC のローカルにでも保存しておけば良いですね。

Step2. ファイル等を入れる

子テーマのフォルダにWordPress ファイルを入れて行きます。

ここで重要になってくるのが、

最低限入れる2つのファイルです。

それは、

style.css
functions.php

子テーマを作る際に編集する予定がなくても入れる必要があります。

空のファイルをテキストエディタで作成して子テーマフォルダにぶち込んでおきましょう。

ぼくはSublime Textというエディタを使いました

もし、それ以外に編集したいファイルがありましたら、テキストエディタで作成してフォルダに入れときましょう。

ぼくの場合ですと、style.css、functions.phpに加えてsingle.php、 header.phpも編集したかったので、

style.css
functions.php
single.php
header.php

という4つのファイルを子テーマフォルダ（stork-child）にぶち込んでおきました。

これで子テーマを作るフェーズは終了ですね。

[2] WordPress のテーマのファイルを編集する

先ほど作成したファイルたちをガンガン編集していきます。

style.css

まずデザインを決める style.cssの編集からです。

style.cssは次のように編集すると良いでしょう。

@charset "UTF-8";
/*
 Theme Name:   テーマ名 + Child
 Template:     親テーマのディレクトリ名
*/

追加したいCSSコード

@charset "UTF-8";

Theme Name: テーマ名 + Child

Template: 親テーマのディレクトリ名

追加したいCSSコード

決まり文句を書いてから、追加の CSS のコードを書いていきます。

ぼくの場合ですと、

テーマ名 Stork
親テーマのディレクトリ名 stork

で、「クラス名がgrayの要素の背景をグレーにする」というコードを入れたかったのでこんな感じになりましたね↓

@charset "UTF-8";
/*
 Theme Name:   Stork Child
 Template:     stork
*/

.gray{
padding: 16px;  background-color: #f7f7f7; margin-top: 30px; margin-bottom: 30px;

}

@charset "UTF-8";

Theme Name: Stork Child

Template: stork

.gray{

padding: 16px; background-color: #f7f7f7; margin-top: 30px; margin-bottom: 30px;

}

functions.php

functions.phpの編集ですね。

次のように編集すると良いでしょう。

<?php

// 子テーマのstyle.cssを後から読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('style')
    );
}
＋追加するコード

<?php

// 子テーマのstyle.cssを後から読み込む

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'child-style',

get_stylesheet_directory_uri() . '/style.css',

array('style')

);

}

＋追加するコード

子テーマのファイル（style.css）を読み込むために必要な呪文を上に書き、その下に追加したい functions.php のコードを書いていきます。

ぼくの場合、コメント欄のフォーム数を減らしたかったので、

<?php

// 子テーマのstyle.cssを後から読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('style')
    );
}


//コメントからEmailとウェブサイトを削除
function my_comment_form_remove($arg) {
$arg['email'] = '';
$arg['url'] = '';
return $arg;
 }
 add_filter('comment_form_default_fields', 'my_comment_form_remove');

<?php

// 子テーマのstyle.cssを後から読み込む

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'child-style',

get_stylesheet_directory_uri() . '/style.css',

array('style')

);

}

//コメントからEmailとウェブサイトを削除

function my_comment_form_remove($arg) {

$arg['email'] = '';

$arg['url'] = '';

return $arg;

}

add_filter('comment_form_default_fields', 'my_comment_form_remove');

という感じで追加コードを記載し、子テーマのfunctions.phpを完成させました。

functions.phpの編集は要注意。一歩間違えるとWordPressのサイトが逝ってしまう可能性があるのでバックアップを取りつつ慎重に進めてくださいね

その他のファイル

最後にその他のファイル。

その他のファイルとはstyle.cssとfunctions.php以外の WordPress のファイルをさしてます。

例えば、

header.php（主にヘッダー部分のコード）
single.php（投稿した記事を表示するコード）

などですね。

これらのファイルにつきましてはstyle.cssとfunctions.phpとは異なり、

親テーマのファイルをコピーして、それに編集箇所を追記して保存します。

例えばぼくの場合、storkテーマのsingle.phpにアドセンスの広告コードを挿入したかったのでこんな感じになりました。

なぜこのようにstyle.cssとfunctions.phpと扱いが違うのでしょうか？？

じつは、これはWordPressの仕様上、style.cssとfunctions.php に関しては親と子のテーマの両方を読み込むようになっているからです。

そのため、この2つのファイルに関しては、親テーマの記述を子テーマで繰り返す必要はないのですね。

一方、それ以外の他ファイルに関しては事情が異なり、子テーマのファイルのみ読み込むようになってます。

だから「親テーマ内容+編集したい箇所」というファイルを子テーマのフォルダに加えるべきなんですね。

[3] WordPressの子テーマを指定箇所に入れる

あとは適切な場所に子テーマのフォルダをぶち込むだけです。

ぶち込み方は簡単で、「FTP ソフト」を使っていきます。

ぼくはMacのCyberduckというソフトを使ってみました。

Cyberduck
カテゴリ: 仕事効率化
現在の価格: ¥2,900

子テーマのフォルダを入れる場所なのですが、場所が決まっておりまして、

wp-content＞theme

の中ですね。

つまり、親テーマと同じディレクトリに子テーマのフォルダを格納していくことになります。

[4] WordPress の子テーマを有効化する

あとは子テーマを有効化にするだけです。

WordPress の管理画面から、「テーマ」と進んでみると、追加した子テーマが出現していることでしょう。

今回はこちらの子テーマを有効化してみます。

するとどうでしょう？？

親テーマを引き継いだ子テーマが反映されているではありませんか！

CSSが反映されない場合、style.cssのファイルの「Template:」のところでしっかり親テーマのディレクトリ名が記載されているか確認してみてくださいね。ぼくも当初、CSSが反映されない事件に巻き込まれましたが、functions.phpの冒頭の記述ミスが原因でした。再度コードがあっているかチェックしてみましょう。