パソコン > ソフトウェア > WordPress > テーマ > WordPressの親テーマから子テーマに運用切替え

WordPressの親テーマから子テーマに運用切替え

投稿日時: 投稿者:

はじめに

WordPressのカスタマイズのためfunction.phpやheader.phpの修正することが多くなってきたが，コード修正は親テーマで行っており親テーマがバージョンアップした際にはその都度，今までの変更を適用しなおす必要がある。
元々子テーマが付属している有料テーマ等は，子テーマで運用しているので親テーマがバージョンアップしても子テーマで変更した内容は保持されるので影響しない。
今回は，自前で子テーマを作成して親テーマから子テーマ運用に変更したので，その手順をメモる。

子テーマファイル作成

子テーマフォルダーをローカルPCにフォルダー名「親テーマ名-child」で新規作成して，子テーマ必須ファイルであるテンプレート以外のファイルの「style.css」,「function.php」,「screenshot.png」を保存する。
【ファイル作成は次項以降で詳細説明】
フォルダー名はwprdpressの「\wordpress\wp-content\themes」に親フォルダーがあるので確認して親フォルダー名の後ろに-childを付けて作成する。

自分はサーバーの親テーマフォルダーをローカルPCにコピーして，フォルダー名変更・不要ファイル削除して3ファイルのみ残して編集した。

style.css

テーマの情報記載用で下記の項目が記入できるが，必須項目は「Theme Name」と「Template」のみなので，他の項目は親テーマのstyle.cssと同じ設定とする。
実際の作成は，親テーマのフォルダーからstyle.cssをコピーして子テーマ用に変更する。
親テーマのstyle.cssの冒頭の「/*」　から 「*/」までが子テーマで使用するので，それ以下の箇所は削除して必須項目を修正後保存する。

Theme Name: 「親テーマ名-child」
Theme URI: 親テーマからコピー
Author: 親テーマからコピー
Author URI: 親テーマからコピー
Template: 親テーマのディレクトリ（フォルダ）名
Description: 親テーマからコピー
Version: 親テーマからコピー
Requires at least: 親テーマからコピー
Tested up to: 親テーマからコピー
License: 親テーマからコピー
License URI: 親テーマからコピー
Text Domain: 親テーマからコピー
Tag: 親テーマからコピー

記載例　テーマ「Catch Evolution」　　必須項目以外は，有っても無くても問題ないみたい。

/*
Theme Name: Catch Evolution Child
Theme URI: https://catchthemes.com/themes/catch-evolution/
Author: Catch Themes
Author URI: https://catchthemes.com/
Template: Catch-Evolution
Description: Catch Evolution is a beautifully sleek creation of Catch Themes. It exudes a clean and super sharp look. It comes with a whole set of interesting, rich features and flexible theme options. Built on HTML5, CSS3, it has a responsive design which lets the content automatically adapt to the screen's size on different devices. Catch Evolution looks striking in a bigger screen. The layout is wider, bigger and luxuriously spacious. This theme is easily customizable with an advanced theme options panel. It supports popular plugins such as Jetpack, WordPress SEO by Yoast, WP-PageNavi, Contact Form 7, WooCommerce and many more. It is also translation ready and currently translated in Spanish, French, Swedish, German, Italian, Japanese, Russian, Czech, Bosnian, Brazilian Portuguese and Dutch. If you need support with this theme, please go to https://catchthemes.com/support/
Version: 4.1.5
Requires at least: 5.6
Tested up to: 6.4
Requires PHP: 5.6
License: GNU General Public License, version 3 (GPLv3)
License URI: http://www.gnu.org/licenses/gpl-3.0.txt
Text Domain: catch-everest
Tags: blog, one-column, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, threaded-comments, flexible-header, three-columns
*/
/* 以下は削除 */

function.php

function.phpは次のコードで固定なので，そのまま貼り付ける。

<?php
/* functions.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')
);
}
?>

screenshot.png

「screenshot.png」親テーマのフォルダーからコピーして保存

子テーマを登録

作成した子テーマファイルを登録するには，直接テーマフォルダーにコピーする方法と一旦zipファイルに圧縮してWordPress管理画面からアップロードする方法がある。

ファイルコピー

子テーマフォルダーごとwprdpressの「\wordpress\wp-content\themes」にコピーする。
これだけで子テーマは認識される。

ファイル圧縮・アップロード

子テーマフォルダーごとzipに圧縮し，wordpressの管理画面から「テーマ－新しいテーマを追加－テーマのアップロード」でzipファイルを指定してアップロードする。

zipファイルに圧縮後の書庫

WordPressの「管理画面－テーマを追加」から圧縮したzipファイルを選択してインストールする。

子テーマを有効化

子テーマのファイルが初期値のまま変更していない場合は子テーマを有効化しても親テーマの設定をそのまま引き継ぎ使用するので，親テーマ有効の場合となんら変わらない。と思っていたが，後から気づいたのだがヘッダー画像の設定が初期化されていた。
子テーマを有効にした結果を確認後に，次項のカスタマイズを行うほうが良い。

子テーマのカスタマイズ

style.cssの記載方法

子テーマのstyle.cssのコードは親テーマのstyle.cssに上書き・追加処理する。
冒頭のテーマ情報記載の後に，コードを追加する。
テーマによっては，下記のように別メニューが用意されていて，style.cssのカスタマイズはすべきでないものもある。

function.phpの記載方法

子テーマのfunction.phpは親テーマのfunction.phpにないコードを追加するために使用する。
追加するコードは　<?php　この間にコードを記入　?>　のように記載して初期値の固定コードの後にいれる。親テーマのfunction.phpに記載時は　<?php　　?>　は不要。
親テーマのfunction.phpに存在するものと同じ内容のコードを入れるとエラーとなる。この場合は管理画面にアクセス出来なくなるので注意する。
親テーマ運用時に変更している場合は，親テーマ側のfunction.phpの変更箇所を元に戻す。
その後に子テーマ側のfunction.phpに親側で加えた変更を追加する。
その際は　<?php　この間にコードを記入　?>　を忘れずに❕
記載例　Google検索結果にサムネイル画像を表示

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

<?php
/* サムネイル画像にアイキャッチを使用　「function.php」子テーマ用 */
add_action( 'wp_head', 'add_meta_to_head' );

function add_meta_to_head() {
    if ( is_singular() ) {
        $post_id = get_the_ID();
        $thumbnail_id = get_post_thumbnail_id( $post_id );

        if ( $thumbnail_id ) {
            $thumbnail_url = wp_get_attachment_url( $thumbnail_id );

            if ( $thumbnail_url ) {
                echo '<meta name="thumbnail" content="' . esc_url( $thumbnail_url ) . '" />';
            }
        }
    }
}
?>

テンプレートファイルの記載方法

header.php等のfunction.php以外のテンプレートファイルは親テーマの同名ファイルを無効処理して子テーマファイルを適用するので，親テーマから子テーマにコピーして，内容を追加編集する。
例としてheader.phpを子テーマフォルダーにコピーして内容編集した場合は親テーマフォルダーのheader.phpは無効となり子テーマフォルダーのheader.phpを使用する。
親テーマ運用で変更を加えたテンプレートファイルは全て子テーマフォルダーへコピーするだけで，子テーマ運用へ切替は完了する。
記載例　パンくずリスト　　　header.phpの最後に追加

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package Catch Evolution
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>
	
################  中略　########################
		
						
################  親テーマからコピーした内容をそのままに最後にコード追加　######	
<?php
/**
　　以下はユーザーカスタマイズ
 */
?>

<?php /**　パンくずリスト */ ?>
<?php if( !(is_home() || is_front_page() )): ?>
<div class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
	<?php if(function_exists('bcn_display'))
	{
		bcn_display();
	}?>
</div>
<?php endif; ?>

MySQLデータベース移行

header.phpを子テーマフォルダーにコピーしてカスタマイズしたが，ヘッダー部の背景画像がテーマのデフォルト画像表示になっていて，当初の設定画像になっていない。当初header.phpのコピーが原因かと思ったが，戻しても同じだった。画像設定されていないだけなのだが，一旦親テーマに戻して調査することにした。
MySQLデータベースの親テーマのテーマ固有の設定値(theme_mods_テーマのディレクトリ名)を子テーマのデータにコピーしてみた。
一旦子テーマを有効にしたので，子テーマデーターが作成されたので，削除して親テーマのデータをコピーで開いて子データー名で保存した。が背景画像が表示されなかった。
このテーブルはテーマ固有値で関係ないみたいだ。
親テーマ・子テーマ間でも別テーマとみなされるのでこの方法は推奨されない。らしい。

【テーブルデータコピー手順】
1.phpMyAdminを開いて左メニューから該当のWordPressDB名-wp_optionsをクリック。
2.表示行数を最大の500にして行フィルター欄に「theme_mods_」を入力。
3.「theme_mods_テーマ名」が表示されるまでページを変えて繰り返す。
4.「theme_mods_テーマ名」が表示されたら,コピーをクリック。

5.コピー画面が開くので,表示されている親テーマ名に続けて「-child」を入力。
6.画面下まで移動して「実行ボタン」押下で保存。
7.子テーマのデータが作成されたか確認する。

子テーマを有効にして，背景画像を確認したが表示されていない。背景画像とは関係なかった。
データーベーステーブルの更新日時からは「wp_options」が怪しいのだが，「wp_options」を確認するとテーマ関連データがいくつか表示されるが，親テーマ名・子テーマ名で分かれている感じでないので，よくわからない部分は触らない方がよい。

プラグイン使用でデータ移行

プラグインの「Customizer Export/Import」を使用して親テーマの設定をインポートした。
親テーマ有効でエクスポートして子テーマ有効でインポートしたが，背景のデフォルト画像が表示されなくなった。なにかしら設定が変わったのか。背景画像のパス設定等の可能性あり。

データーベースをごちゃごちゃ触るのも危険なので,手動で背景画像を設定することにした。
テーマによっては作りこみが複雑でマニュアルどおりにいかない。
最初から子テーマ運用しているのであれば関係ない作業だ。(-_-;)

親テーマ・子テーマのコード適用挙動

子テーマを自作した場合の挙動なので，親・子テーマがセットで提供されているケースは，カスタマイズされている場合もあり，標準と異なる時もある。

screenshot.png

WordPressのテーマ管理画面に表示させる画像で，親テーマ用と同じ子テーマ用を準備する。
親と子の関連はない。

style.cssの動作

style.cssも子テーマには必須となっており，Wordpressは親テーマのstyle.cssコードを読み込んでその後，子テーマのstyle.cssコードを読み込む。親テーマから読み込んだコードの有無に関係なく上書き・新規追加の処理をする。

function.phpの動作

function.phpは子テーマには必須となっており，Wordpressは親テーマのfunction.phpコードを読み込んでその後，子テーマのfunction.phpコードを読み込み追加する。その際，親テーマから読み込んだコードと同じ種類のものが含まれていると，上書きしないでエラーとして処理する。その際はWordPressの管理画面に入れなくなるので注意する。
親テーマにないコードは，既に読み込んだコードに追加して処理する。

テンプレートファイル

WordPressは子テーマフォルダーのファイルを読み込んで，テンプレートファイル（header.php等）が存在すると，それを適用して親テーマフォルダーにある同名ファイルを読み込まない。子テーマフォルダーに無いファイルは親テーマフォルダーにあるファイルを読み込み使用する。
テーマのアップデートの際は子テーマで行った設定が初期化される事は無いが，アップデート内容が大幅な変更の場合は，何かしらの影響があるかも。子テーマフォルダーにコピーしてカスタマイズしたファイルは親テーマフォルダーからアッブデート後の新ファイルをコピーして作り直したほうがよい。

親・子テーマ間のWordpressの挙動

おわりに

一応自分で調べた内容で設定後，問題無く動作しているが，勘違いや間違っている可能性もあり自己責任でお願いします。_(._.)_
親テーマから子テーマ運用に切替える際は親テーマでのカスタマイズした内容やファイルにより手順が異なり複雑になる。大きなレイアウトの変化がなく細かな設定のみの場合はコツコツ設定を戻していくほうが確実なのかも。