WordPressの子テーマを超簡単に作る方法


こんな人にオススメ!


  • WordPressをカスタマイズしたい。
  • 子テーマをのことを知りたい・作りたい!

WordPressのカスタマイズをはじめるのなら、子テーマは絶対に作っておくべきです。

なぜなら、WordPressのテーマは、とても頻繁にアップデートが行われます。
子テーマを作っておかないと、アップデートの度に、それまでのカスタマイズ内容が上書きされてしまい、もとのオリジナルテーマ(親テーマ)にリセットされてしまうからです。

せっかくの努力と費やした時間が、一瞬にして水の泡になってしまわぬよう、必ず、子テーマを作ってからカスタマイズを始めましょう。

ちなみに、カスタマイズ全般にいえることですが、管理画面の「外観」→「テーマの編集」からカスタマイズを行うのは、オススメできません。
必ず、FTPソフトを使って作業をしてください。

コピペでOK!子テーマ制作の全手順

子テーマの制作は、手順通りに行えば、決して難しくありません。
新たに「1つのディレクトリ」と「2つのファイル」を作成するだけです。

コピペできるように、コードも掲載してあります。WordPress初心者のかたも、是非チャレンジしてみてください。

(ディレクトリとは、パソコンでいうところのフォルダと同じです。空のフォルダの中にファイルを作る、といったイメージで作業を進めましょう。)

以下は、これからの作業手順です。

  1. 子テーマのディレクトリを作成
  2. ファイルを作る(style.css)
  3. 子テーマだと認識させる
  4. ファイルをもう一つ作る(functions.php)
  5. 親テーマのスタイルシートを呼び出す
  6. スクリーンショットの追加

今回は、ワードプレス2017年公式テーマである、Twenty Seventeenを親テーマとし、その子テーマを作成します。

それでは、子テーマのディレクトリから作ってみましょう。

①子テーマのディレクトリを作成

親テーマTwenty Seventeenディレクトリと同じ階層に、子テーマのディレクトリを作成します。

wp-content / themes / twentyseventeen

と同じ階層です。

ディレクトリ名は任意ですが、今回は、twentyseventeen-child とします。

②ファイルを作る(style.css)

作成したディレクトリ、twentyseventeen-child の中に、空のファイルを作ります。

ファイル名は、style.css です。これは、他のファイル名であってはなりません。

③子テーマだと認識させる

親テーマTwenty Seventeenの子テーマであると認識してもうため、先ほど作った、空のstyle.cssに次の記述を書き込みます。

たったの2行を記述するだけです。

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

④ファイルをもう一つ作る(functions.php)

作成したstyle.cssと同じ階層に、もう一つ空のファイルを作ります。ファイル名は、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' );
 
}
?>

これで、子テーマの設定が完了しました。

管理画面の「外観」→「テーマ」を見てみましょう。

Twenty Seventeen Child が表示されているはずなので、テーマを有効化してあげれば作業は完了です。

どうですか?意外と簡単だったと思います。

けれど、他のテーマと比べて、スクリーンショットがありません。なんだか寂しいですね。

せっかくですから、スクリーンショットを加える手順もご紹介しておきます。

⑥スクリーンショットの追加

style.css と functions.php と同じ階層に、screenshot.png ファイルを作ります。

screenshot.png ファイルに、以下の画像をドラッグ&ドロップで放り込んでください。

(Twenty Seventeen以外のテーマの場合は、ご自身で画像を用意してください。サイズは、880px × 660px以上です。)

うまく反映されれば、次のようになるはずです。

これで、子テーマに変更したい内容を書き込めば、親テーマの内容を上書きできるようになりました。今後は、親テーマの更新があっても安心して作業が進められますね。

以上、「WordPressの子テーマを超簡単に作る方法」でした。

コメントを残す

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