wordpressの子テーマ作成

ワードプレスのテーマのアップデートが来て
アップデートしたら編集したらCSSの色やフォントが元のスタイルになってしまった!

こうならないように

ワードプレスの既存のテーマがアップデートされても困らないように子テーマを作ろう

1.子テーマファルダを作成

ワードプレスをインストールしているフォルダの
wp-content → themesの中に作成

親テーマ(使用中のテーマ)と同じ場所(同じ階層)に新しくフォルダを作成します。
フォルダの名前は親テーマの名前の後にchildとしておくとわかりやすいです。

子テーマフォルダ

例)「親テーマ-child」

2.style.cssを作成

作成したフォルダ「親テーマ-child」の中に「style.css」のCSSファイルを作ります。

/*
Theme Name: 親テーマ Child
Theme URI: テーマの公式サイトなどのURL(空欄でも可)
Template: 親テーマ
Description: テーマの説明(空欄でも可)
Author: テーマ作成者の名前(空欄でも可)
Tags: 
Version:
*/

ここで注意しないといけないとこは
Theme Name (子テーマ名)  → 親テーマ child
Template (親テーマ)  → 親テーマ

親テーマのスペルを間違えると認識しないので確認!

3. functions.php を作成

子テーマフォルダにfunctions.phpという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')
);
}
?>

4. スクリーンショットの作成

スタイルシート(css)とPHPのファイルを親テーマ-child のフォルダに入れたら
screenshot.pngを作る。
大きさは600×450、1200×900など長方形でOK
または親テーマのスクリーンショットを使用

これで子テーマが使用でき親テーマの更新が来ても大丈夫
しかしheader.phpなど直接に書いてあるのならば
子テーマにheader.phpをコピーして入れて置くと安心です。

なんだか面倒だなと思う人はプラグインも出ているので
そちらを使って子ページを作るのもあり!

子テーマのプラグイン

新規プラグインの検索で
「Child Theme Configurator」と検索
https://ja.wordpress.org/plugins/child-theme-configurator/

プラグインホームページ
https://www.childthemeconfigurator.com/

Comments are closed, but trackbacks and pingbacks are open.