WordPressで初めての子テーマ作成

WordPressで子テーマを作った時の用のメモ。子テーマは怖くない。

1. 子テーマを使うメリット

  • 親テーマの内容を変更しないで外観などをカスタマイズできる
  • 親テーマがアップデートされた場合でも、子テーマでの変更は保持される

2. 子テーマを作成する場所

子テーマは[themes]フォルダ内に作成します。

a. レンタルサーバーがロリポップの場合

  • 左サイドメニュー[サーバーの管理・設定]→[ロリポップ!FTP]
  • 公開アップロードフォルダ内の[wp-content]フォルダ→[themes]フォルダ

b. レンタルサーバーがさくらレンタルサーバーの場合

  • サーバーコントロールパネルへ移動
  • サイドメニュー[運用に便利なツール]→[ファイルマネージャー]
  • [wp-content]フォルダ→[themes]フォルダへ

※themesフォルダ内にはWordPressでインストールしたテーマが格納されています。

3. themesフォルダ下に子テーマの作成

themesフォルダの場所がわかったところで、[themes]フォルダ内に子テーマを作成していきましょう。

まず子テーマ用のフォルダを作成します。

そして、作成したフォルダ内に【style.css】と【functions.php】の2つのファイルを作成します。

a. 子テーマ用フォルダの新規作成

子テーマ用のフォルダ名は好きな名前を付けることができます。【半角英数字】

子テーマのフォルダ名に空白を入れてしまうと、エラーが出るので子テーマのフォルダ名に空白は入れないようにしましょう

b. style.cssファイルの作成

次に子テーマ用フォルダ内にstyle.cssファイルを作成します。style.cssファイルに記載するスタイルシートヘッダは以下のとおりです。今回は【Twenty Fourteen】テーマが親テーマの場合の記述です。

style.cssの記載

/*
Theme Name:   Twenty Fourteen Child
Theme URI:   https://websnote.com/wp/wp-content/themes/twentyfourteen-child/
Description: Twenty Fourteen Child
Theme Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentyfourteen
Version: 2.1
License: GNU General Public License
v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html 
Tags: blog, news, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen-child
*/

c. style.cssの記載の説明

記述は、親テーマの情報と子テーマの情報を入力する項目に分かれています。

親テーマ情報を記載する項目

  • Theme Author:
  • Author URI:
  • Template:
  • Version:
  • License:
  • v2 or later License URI:
  • Tags:

子テーマ情報を記載する項目

  • Theme Name:
  • Theme URI:
  • Description:
  • Text Domain:

親テーマの情報をWordPressで確認するには[ダッシュボードメニュー]→[外観]→[テーマの編集]の[編集するテーマを選択]のドロップダウンメニューから親テーマを選択し、選択ボタンをクリックすれば確認することができます。

また、最初は”/*”、最後は”*/”の記述を忘れないようにしましょう。

このスタイルシートヘッダの記載で必須なのは[Theme Name]と[Template]だけで、下記のように記載を省略することができます。

/*
Theme Name: Twenty Fourteen Child ←子テーマ名
Template: twentyfourteen ←親テーマのフォルダ名
*/

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

※functions.php作成時に最後の”?>”の記載を忘れてしまうと子テーマを有効化した時に親テーマのスタイルが反映されないことがあるようです。

記載忘れがないようにしましょう。