WordPress「子テーマの作り方」テーマ編集は必ず子テーマを作ってから編集しよう！

WordPress にはあらかじめ出来上がっている便利なテーマが、有料・無料とわずたくさん配布されています。ぼくもそんな配布テーマの恩恵を日々享受しております。

さて、そんな便利な配布テーマですが、レイアウトやデザインを変更したい場合はどうしますか？テーマ内の PHP や CSS ファイルを直接編集しますか？

・・・それはちょっと待ってくださいっ！

テーマ内のファイルを直接編集したあとに失敗してしまったらどうしましょう？もう直せないですよね？いちからテーマをダウンロードして全部やり直しますか？

そんなことにならないように WordPress には「子テーマ」機能というものが用意されています。子テーマを使えば、親テーマを直接いじらなくてもデザイン変更ができます。

WordPress の配布テーマを利用する場合は、基本的に親テーマをいじるのは NG！必ず「子テーマ」を作成して、そこから編集するようにしましょう！！

今回の記事内容

今回は『WordPress「子テーマの作り方」テーマ編集は必ず子テーマを作ってから編集しよう！』を紹介します。

WordPress の子テーマとは
子テーマの作成手順
あとがき

WordPress の子テーマとは

元々のテーマは親テーマと定義付けされます。この親テーマを直接編集してしまうと、レイアウトやデザインで失敗して保存した場合とりかえしがつきません。

後々に失敗したことに気がついた場合などはもう目も当てられません。後の祭りです。

しかし、子テーマを作りそれを利用すれば、親テーマを直接編集しないでも、子テーマで編集したものが親テーマのデザインやレイアウトに反映されるのです。

失敗した場合は、子テーマの編集部分を削除・修正を行えば良いわけです。

ここがポイント！

子テーマを利用するということは、すべての変更に対して、たとえ失敗しても「常にとりかえしがきく」状態なのです。

自分で作成したオリジナルテーマではない限りは、子テーマを利用するのが最良。テーマのレイアウトやデザインをいじる際には、必ず「子テーマ」を使うべしっ！なのです。

ほとんどの配布テーマには「子テーマ」が用意されているので、そちらを利用すれば良いのですが、子テーマが用意されていないものは自分で作成しなければなりません。

以下からは「子テーマ」の作成方法を紹介します。

子テーマの作成手順

子テーマのフォルダと必要ファイルを作成

例えば mysite という親テーマがあります。これの子テーマ用に「mysite-child」というフォルダを新たに作成します。これが親テーマにおける専用の子テーマフォルダとなります。

子テーマのフォルダ名は「親テーマ名+child（親テーマ名-child）」で作成してください。

子テーマが、WordPress のテーマとして認識される最低限に必要なファイルは、子テーマ用の「function.php」と「style.css」ファイルです。

作成した子テーマ用のフォルダに必ずこの2つのファイルを作成してください。

style.css と function.php に子テーマ用の記述をします

フォルダと必要ファイルの作成ができたら、「style.css」と「function.php」に、このフォルダは「該当親テーマにおける子テーマである」という命令を記述します。

style.css への記述

@charset "UTF-8";
/*
Template:mysite
Theme Name:mysite-child
*/
/*子テーマ用CSSです。以下にCSSを記入していきましょう。*/

@charset "UTF-8";

Template:mysite

Theme Name:mysite-child

/*子テーマ用CSSです。以下にCSSを記入していきましょう。*/

これをそのままコピー＆ペーストしてもらえば OK です。

Tmplate : の左側「mysite」の部分を「親テーマフォルダ」と同じ名称に変更。

Theme Name : の左側は、子テーマフォルダの名称に変更してください。

function.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' );
} ?>
<?php
/************************ *function.phpへの追記は以下に *************************/
/************************ *function.phpへの追記はこの上に *************************/
?>