WordPressのfunction.php・CSSを改造する場合の子テーマ作成

2020年4月4日

WordPressのCSSやfunction.phpを変更する際に、テーマのstyle.cssやfunction.phpを変更するとテーマを更新した際に変更箇所が消えてしまいますが、子テーマを使用すると子テーマの変更は残るため更新しても問題ありません。

UMilCL

本記事では、WordPress 5.4更新、Newspaper 10に更新する場合に発生した問題点についても説明します。

CONTENTS

子テーマの必要性

子テーマがなぜ必要かというと以下の理由となります。テーマを弄るなら絶対入れた方がいいです。

テーマの更新時にstyle.cssとfunction.php内の変更が維持される
テーマパネルの設定内容が維持される
header.phpなどの変更も維持される（トラッキングコードやアドセンスコード等）

子テーマの作り方

子テーマの保存場所

子テーマは親テーマと同じディレクトリに保存します。フォルダ名は「親テーマ名-child」と親テーマのディレクトリ名に、「-child」とするのがおすすめです。

～/wp-content/themes/親テーマ名-child

ディレクトリの中には、style.cssとfunctions.phpの2つが、最低限必要となります。以下に私が作成したテンプレートを保存しておきます。

Newspaper-child ダウンロード

style.cssの記載内容

子テーマのstyle.cssには、子テーマの情報を記載します。テーマ名や作者、ディレクトリ等です。この中で「Theme Name」と「Template」は必須項目となります。

/*
Theme Name:     親テーマ名 Child theme
Theme URI: 	　　テーマURL
Description:    テーマ説明
Author:         製作者
Author URI: 	製作者のURL
Template:       親テーマディレクトリ
Version:        バージョン
*/


/*  ----------------------------------------------------------------------------
    This file will load automatically when the child theme is active. You can use it
    for custom CSS.
*/
Code language: CSS (css)

function.phpの記載内容

function.phpでは親テーマでのfunction.phpより先に読み込まれるため、基本的に子テーマのfunctions.phpは、機能の追加・削除となる。同じ関数の重複は不可となる。

function.phpでは親テーマのstyle.cssを読み込んでから、子テーマのstyle.cssを読み込むようにしており、cssを上書きすることが可能となっている。

<?php
/*  ----------------------------------------------------------------------------
    add the parent style + style.css from this folder
 */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
    wp_enqueue_style('td-theme', get_template_directory_uri() . '/style.css', '', TD_THEME_VERSION, 'all' );
    wp_enqueue_style('td-theme-child', get_stylesheet_directory_uri() . '/style.css', array('td-theme'), TD_THEME_VERSION . 'c', 'all' );

}Code language: HTML, XML (xml)

その他のファイル

修正したいファイルを親テーマから子テーマに配置し、修正することで親テーマの機能を修正して簡単に使用することが可能となる。

例えばheader.phpなどにトラッキングコードを追加する場合などに使用すると、プラグインの使用をする必要なく、高速に処理されるようになる。

WordPress 5.4とNewspaper 10への更新

今回子テーマを使用してWordPress 5.3とNewspaper 9からWordPress 5.4とNewspaper 10へ更新し、子テーマ使用時の問題点について確認しました。

私の環境にて発生した問題点は以下の２つになります。他の問題は特に発生していません。

Newspaper 10にした際に、親テーマに入れていたphpファイルが消失（子テーマにいれとけ・・・）
Table of Contents PlusがNewspaper 10との相性の問題か、タイトル前にも目次が表示され、2回目次が表示される。（Easy Table of Contentsに変更し、改善）
再利用ブロックが消える（再度設定が必要）

このように子テーマを不具合少なく、更新したり、テーマを変更することが可能です。