WordPressテーマのカスタマイズ方法【子テーマの作成と編集】

どのように、WordPressテーマをカスタマイズしたらよいのか？この記事で、子テーマを作成し編集する方法をご紹介します。

カスタマイズの考え方
1. 親テーマのカスタマイズで問題発生
2. 子テーマのカスタマイズにより問題解決
子テーマの作成
子テーマの編集
まとめ
1. 関連

カスタマイズの考え方

親テーマのカスタマイズで問題発生

ダウンロードしたWordPressテーマは親テーマと呼ばれます。この親テーマ内の各ファイルを、直接編集することは可能です。しかし、親テーマがアップデートされると、最新ファイルに上書きされ、自分でカスタマイズした部分が消えてしまうことになります。

子テーマのカスタマイズにより問題解決

そこで、親テーマのアップデートに影響されないように、親テーマから必要なファイルだけを別のフォルダにコピーして、それらを編集する必要があります。このとき、親テーマに対して、コピーしたテーマを子テーマと呼びます。

広告リンク

ワードプレスやテーマのインストールについては、こちらをご覧ください。

子テーマの作成

ファイルのダウンロード

今回、Xeory Extensionを親テーマとして、子テーマを作りました。親テーマは、こちらから、ダウンロードしてください。

Xeory Extension

また、私の作成した子テーマを無料配布しますので、ダウンロードしてください。

xeory_extension_child ダウンロード

これらのファイルを開きながら、以下の説明をご覧ください。

子テーマのフォルダ作成

まず、親テーマのフォルダが保存されているフォルダ内(同一階層内)に、子テーマのフォルダを作成します。例えば、親テーマフォルダ名がxeory_extensionの場合、子テーマフォルダ名をxeory_extension_childとします。

子テーマのファイル作成

次に、子テーマフォルダ内に、空のCSSファイル(style.css)を作成します。Xeory Extensionの場合、以下のように、コードを記述します。

@charset "UTF-8";
/*
Theme Name: Xeory Extension child
Description: Xeoryの子テーマ
Author: バズ部
Template: xeory_Extension
*/
/* all display
*/

また、子テーマフォルダ内に、空のPHPファイル(function.php)を作成します。Xeory Extensionの場合、以下のように、コードを記述します。

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