子テーマの作成

子テーマの作成方法について
  (WordPress Codexより)

1.子テーマの設置場所を用意する

 WPサーバーの「テーマ」が既に設置されている場所に「子テーマ」ディレクトリを「親テーマ」ディレクトリと同列の場所に追加する。

 FTPソフト等を利用して、WPの「親テーマ」が設置されている場所を探し当てる。通常「wordpress」ディレクトリの下位に「wp-content/themes/」があり既に組み込まれている「twentytwenty」等のディレクトリが存在するのが分かる。この場所が特定出来たら、同列に「子テーマ」用のディレクトリを作成する。

設置場所(例)

 「子テーマ」設置ディレクトリの名前には「親テーマ名-child」として「親テーマ」を明示しておきます。

2.スタイルシート(style.css)を用意する

 テキストエディターで以下の 「スタイルシートヘッダ 」で始まる「style.css」ファイルを作成して、「子テーマ」用に設置したディレクトリの配下に保存します。
 下記「スタイルシートヘッダ」CSSで、親子の関係を表すのは「Theme Name:」と「Template:」の2箇所だけなので見本通り半角で記述します。他の箇所は「子テーマの有効化」時に確認用にこの内容が表示されますので、スタイルシートが間違いなく反映されていることを確認します。確認後に分かりやすい文言に修正できますので必要に応じて修正願います。

/*
 Theme Name:   子テーマの名称
 Theme URI:    <適宜>
 Description:  <適宜>
 Author:       <適宜>
 Author URI:   <適宜>
 Template:     親テーマのディレクトリ名
 Version:      <適宜>
 License:      <適宜>
 License URI:  <適宜>
 Tags:         <適宜>
 Text Domain:  <適宜>
*/

 「子テーマ」でコーディングしたスタイルシート(style.css)は「親テーマ」の該当部分を置換します。

3.スタイルシートをキューに入れる

 「子テーマ」のスタイルシートは、「子テーマ」の「functions.php」で「wp_enqueue_script()」を使用してキューに入れる必要があるので、「子テーマ」側で「functions.php」を用意する。「import」命令で親のスタイルシートを取り込む方法は現在では推奨されていません。 

 「子テーマ」の「functions.php」には「子テーマ」のスタイルシートをキューに入れる機能とスタイルシートの場所を指定します。
 「add_action」は関数「theme_enqueue_styles」を使って指定されたファイルにlinkを張ります。
 関数内の「wp_enqueue_style」は「親テーマ」のスタイルシートが存在するディレクトリと同じ場所に「子テーマ」のスタイルシートを優先させるように追加します。「識別名」は他のスタイルシートとの識別用に半角の文字列をセットしておきます。キューにセットされたことを確認する際の目印になります。

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles()
 	{
   wp_enqueue_style( '識別名', get_stylesheet_uri() );
	}

 「子テーマ」の「functions.php」には「親テーマ」の「functions.php」と同じ内容をコーディングする必要はありません。「functions.php」の内容に追加する形で出来上がります。今後「親テーマ」がどのように変更されても「子テーマ」の内容は追加された形で動きます。「親テーマ」と同じことを記述するとエラーになります。
 「子テーマ」のスタイルシートが反映されないと思われるときには、WPの投稿記事のソースを確認する。識別用にセットした文字をidパラメータの中から探し出す(link rel=’stylesheet’ id=’識別名’ ・・・・)、この方法でスタイルシートが反映される優先順位を確認してください。


<link rel='stylesheet' id='wp-block-library-css'  	   	       href='https://
<link rel='stylesheet' id='wp-block-library-theme-css' 	       href='https://
<link rel='stylesheet' id='wp-lightbox-2.min.css-css'      	   href='https://
<link rel='stylesheet' id='識別名'				   	                href='https://
<link rel='stylesheet' id='twenty-twenty-one-style-css'		     href='https://
<link rel='stylesheet' id='twenty-twenty-one-print-style-css'  href='https://
<link rel='stylesheet' id='hcb-style-css'                      href='https://

4.子テーマの「有効化」

 WPの管理画面にログインし、管理画面 → 外観 → テーマに移動します。子テーマが表示され、有効化できる状態になっているので、「子テーマ」を有効化するとカスタマイズされた内容が動き出します。

 「子テーマ」が「有効化」された後は自由に「子テーマ」のテンプレートやスタイルシートを修正してWPを利用してください。


投稿日

カテゴリー:

,

投稿者:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です