WordPressで子テーマを作った時の用のメモ。子テーマは怖くない。
1. 子テーマを使うメリット
- 親テーマの内容を変更しないで外観などをカスタマイズできる
- 親テーマがアップデートされた場合でも、子テーマでの変更は保持される
2. 子テーマを作成する場所
子テーマは[themes]フォルダ内に作成します。
a. レンタルサーバーがロリポップの場合
- 左サイドメニュー[サーバーの管理・設定]→[ロリポップ！FTP]
- 公開アップロードフォルダ内の[wp-content]フォルダ→[themes]フォルダ
b. レンタルサーバーがさくらレンタルサーバーの場合
- サーバーコントロールパネルへ移動
- サイドメニュー[運用に便利なツール]→[ファイルマネージャー]
- [wp-content]フォルダ→[themes]フォルダへ
※themesフォルダ内にはWordPressでインストールしたテーマが格納されています。
3. themesフォルダ下に子テーマの作成
themesフォルダの場所がわかったところで、[themes]フォルダ内に子テーマを作成していきましょう。
まず子テーマ用のフォルダを作成します。
そして、作成したフォルダ内に【style.css】と【functions.php】の２つのファイルを作成します。
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作成時に最後の”?>”の記載を忘れてしまうと子テーマを有効化した時に親テーマのスタイルが反映されないことがあるようです。
記載忘れがないようにしましょう。