LogoMark.png

WordPress/ChildTheme の変更点


#author("2022-06-14T11:29:08+09:00;2019-09-14T17:36:46+09:00","default:inoue.ko","inoue.ko")
*ChildTheme
~


Wordpress でサイトを制作する場合、テーマを白紙の状態から書いていく方法と、既存のテーマをカスタマイズする方法とがありますが、ここで概説するChild Thema(子テーマ)というのは、後者の場合に利用されるものです。

既存のWordpressテーマを''親テーマ''といい、その機能とスタイルを引き継いだ上で、部分的な修正を加えるファイルセットを''子テーマ''といいます。

既存のテーマをカスタマイズする場合、直接当該フォルダ内のファイルを修正すると、例えばテーマの更新があった場合、あなたが修正した内容も含めて、すべて新しいファイルで更新されてしまいます。そこで、このような問題を回避するために、既存のテーマに対する修正部分のみを別ファイルとして扱うことが推奨されているのです。

-''公開されているテーマの事例''(いずれもGPL) 
--Lightning:https://lightning.nagoya/ja/
--Cocoon:https://wp-cocoon.com/
~
~

**制作手順

***1. 子テーマ用フォルダの準備

子テーマは独立したひとつのテーマとして扱われます。そこでまず、
 wordpress > wp-content > themes > ''親テーマ名_child''
のように子テーマのフォルダをつくります(フォルダ名は自由です)。

子テーマに必要なファイルは以下の2つです。その他は、親テーマのものをリンクして使う・・という発想です。
-style.css
-functions.php

子テーマは一般にCSSだけに変更を加えるものですが、例えば header.php なども変更したい場合は、新規に制作した header.php を子テーマフォルダに投入します。この場合、親テーマの header.php のかわりに子テーマフォルダ内のものが利用されます。
~

***2. style.css の記述
とりあえず、style.css を作成して子テーマフォルダに投入します。
必要なルールはひとつだけ、子テーマの style.css の先頭に以下のようなコードを記載します。あとは追加のCSSをどんどん追記するだけです。
 /*
 Template:親テーマのフォルダ名(正確に記述してください)
 Theme Name:子テーマの名前(任意)
 */
例
 /*
 Template:twentyseventeen
 Theme Name:My Theme
 */
~


***3. functions.php の記述
次に、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') );
     }
 ?>
~

***4. その他のファイルの追加
必要に応じて、header.php や footer.php を子テーマフォルダに投入します。
~

***5. ファイルのパーミッションの確認
wp-content > themes > にアップしたファイルのパーミッションを確認して下さい。[[パーミッションについてはこちら >>FilePermission]]
-.phpについては、実行権が必要です。
-.cssをダッシュボードから編集する場合は、書込権を与える必要があります。
~

***6. 動作確認
#image(sample.png,right,25%)
-サーバー内の themes フォルダに子テーマフォルダがあることを確認したら(当然ですが親テーマの存在も確認)、ダッシュボードを開きます。
-外観 > テーマ と進みます。
-あなたが Theme Name : に書いた名前のテーマが見えるはずです。
-当該テーマを選択して「有効化」して下さい。
~

***補足
インストールされているテーマ一覧で、テーマのプレビューイメージを表示させたい場合は、サイトのスクリーンショットを撮って、''screenshot.png'' という名前で、子テーマフォルダへ投入すればOKです。

以上。 

~
~