WordPressテーマのカスタマイズが消える!? カスタム前には「子」テーマを使う

WordPressテーマをカスタマイズするとき、「親」テーマに直接書き込んでいませんか?「親」テーマに書き込んでいると、テーマが更

新されたとき、カスタマイズした内容が全て消えてしまいます。

WordPressのテーマをカスタマイズする前に子テーマを使いましょう。

WordPressを使い始めたばかりの方は「子テーマ、親テーマって何?」「なんで、テーマ自体を直接カスタマイズしたらいけないのか?」という疑問を持つ方もいると思います。

WordPressの子テーマの使い方について説明します。

子テーマとは?

既存のWordpressテーマを、「親テーマ」といいます。「子テーマ」とは、既存のWordpressテーマのカスタマイズ専用のテーマです。
テーマの機能とスタイルを継承したものが「子テーマ」です。

  • 親テーマ:既存のWordpressテーマ
  • 子テーマ:親テーマの、機能とスタイルを引き継ぎ編集するためのテーマ

なぜ「子」テーマでカスタマイズする必要があるのか?

なぜ「子」テーマでカスタマイズが必要なのでしょうか?

WordPressの「親」テーマを直接カスタマイズしていると、使っているテーマにアップデート(更新)があるとき、カスタマイズした内容が全て消えてしまうからです。

せっかく時間をかけて、カスタマイズして思いどおりのデザインになっていたとしても、テーマが更新されれば、カスタマイズが全て無かったことになってしまいます。

子テーマを作る3つの手順

それでは、Wordpressで子テーマを作成する手順を見ていきましょう。「子テーマ」は大まかには以下の流れで作成します。

  1. 子テーマのフォルダ、ファイルを作る
  2. 親テーマを継承するためのコードを書く
  3. 子テーマを確認、有効化する
ファイル構成例

public_html
├ドメイン
 ├wordpress
  ├wp-content
   ├themes
    ├twentyseventeen:親テーマ
    ├twentyseventeen_child:子テーマ
     ├functions.php
     ├style.css
     ├functions.php

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

ワードプレスのデフォルト(初期)テーマ「twentyseventeen」を例に説明します。

まず、FTPソフトを使って、サーバー上のファイルを開きます。

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

子テーマ用のフォルダを作ります。作成する場所は、既存のテーマと同じ階層 「/wp-content/themes 」です。
名前は自由に決めることができますが、わかりやすいよう「親テーマ名_child」としましょう。

子テーマに必要な2のファイルを作る

次に、作成した子テーマフォルダの中に以下の2つファイルを作成します。

  • style.css
  • functions.php

作成できたら、それぞれのファイルに書き込んでいきます。

style.cssの編集

style.cssを開き編集します。

書式

/* 
Theme Name:[小テーマの名前]
Template:[親テーマのフォルダ名]
*/

style.css記入例

/* 
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
*/

上記は必要最小限の設定です。
「Theme Name」の後ろが子テーマの名前です。「Template:」の後ろが親テーマのフォルダ名を入れます。

子テーマの名前は自由に決めて構わないので、「親テーマ名」+「child」としておくとわかりやすいでしょう。

「Template:」の後に記述するのは、親テーマのフォルダ名なので注意してください。
ワードプレス管理画面の「外観」→「テーマ」のテーマ名が必ずしもフォルダ名とは限りません。
例えば、WordPressのデフォルトテーマのひとつ「Twenty Seventeen」の場合、フォルダ名は「twentyseventeen」です。
親テーマのフォルダ名は一字一句間違えずに記入してください。これに誤りがあると、テーマとして認識されません。

functions.phpの編集

※functions.phpの編集には十分注意してください。少しでもミスがあるとサイト全体が表示されなく場合があります。事前にローカル仮想環境上で試すことを推奨します。本番環境でいきなり編集する場合はバックアップを取りすぐに元に戻せる状態にしておいてください。

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')
);
}
?>

ライブプレビューで確認

WordPressの管理画面から「外観」➔「テーマ」を確認すると、追加した子テーマ「Twenty Seventeen Child」が確認できます。
もしここで、子テーマが表示されていない場合、「style.css」の「親テーマのフォルダ名」の記述を確認してください。

ライブプレビューをクリックします。プレビューで実際にテーマを適用する前に正常に表示されているか、確かめることができます。

プレビュー画面を確認します。

子テーマを有効化する

プレビューで問題内ことが確認できたら、「保存して有効化」をクリックしてください。

「保存しました。」と表示されればOKです。

なお、テーマの有効化は、「外観→テーマ」からもできます。

念のため、子テーマを有効にした後に再度、サイトの表示が問題無いか確認してください。
これで、子テーマの設定は完了です。

子テーマが反映されない場合は?

子テーマが表示されていない場合、まずは以下を確認してください。
子テーマフォルダに作成した、「style.css」の「Template:」項目の「親テーマのフォルダ名」が一字一句間違っていないか確認してください。
例えば「twentyseventeen」場合、記述するのは、「twentyseventeen」です。「Twenty Seventeen]では認識されません。

/* 
Theme Name:[小テーマの名前]
Template:[親テーマのフォルダ名]
*/

コマンド操作での流れ

子テーマのターミナルからコマンド操作で行う手順も示しておきます。いわゆる「黑い画面」を使って操作する方法です。

ターミナルを開く

サーバーでssh接続

ssh [ホスト名]@[ユーザ名]

cdコマンドで「wp-content/themes/」フォルダに移動

cd wp-content/themes/

「twentyseventeen_child」フォルダを作成する

mkdir twentyseventeen_child

作成したフォルダに移動する。

cd twentyseventeen_child

テキストエディタviで「style.php」ファイルの中身を修正

vi style.php

テキストエディタviで「functions.php」ファイルの中身を修正

vi functions.php

最後に

WordPressテーマのカスタマイズ前には「子」テーマを使う

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です