WordPressの使い方：子テーマを作る

wordpressには沢山のテーマがあります。公式のテーマを使っている方も多いでしょう。
そんな方こと『子テーマ』を作ることをオススメします！

テーマとは？
「テーマ」とはテンプレートのことで、見た目を整える型のようなものです

今回は以下のことについてご紹介します。
■子テーマとは？
▽テーマを決める
■子テーマのフォルダを作る
■子テーマに必要なファイルを作る
■子テーマをアップロード

■子テーマとは？
「テーマ」を基にした、カスタマイズ用のテーマを「子テーマ」といいます。
ではなぜ子テーマが必要なのか。
それは「既存のテーマを直接カスタマイズしてしまうと、アップデートの際にファイルがすべて上書きされてしまい、カスタマイズしたものがすべてなかったことになってしまう」からです。

wordpressを女の子、親テーマを洋服、子テーマをアクセサリーとします。
服とアクセサリーが別ならば洋服が新しくなっても、アクセサリーはそのまま使うことができます。

「ならアップデートしなければいいのでは？」と思うかもしれませんが、不具合やバグの修正が行われるので、アップデートはしたほうがいいです。

女の子が成長すれば、新しい服を買ってあげなければ、見た目も悪くなってしまいます。

▽テーマを決める
子テーマを作る前に元となるテーマが決まっていないと次に進むことができません。
ダッシュボード > 外観 からテーマをクリックして、テーマを設定してください。

wordpressでは既存テーマが数多く公開され、無料で利用できるものもあります。
しかし、中には悪質なスクリプトが埋め込まれていたりするものもあります。テーマを選ぶ際は、身元が提示されていて、サポート体制が整っているかをチェックしてください。
公式のwordpressテーマはすべて無料で利用できる上、テーマを作成した後に審査が入り、WordPressからの許可がでたものだけが掲載されるので、初心者でも安心して利用できます。
作りたいホームページのイメージに近いものを選択してください。

■子テーマのフォルダを作る
子テーマ用のフォルダを作っておきます。

名前は何でも構いませんが、半角英数字で。
先ほど選んだテーマ名+childとしておくと分かりやすいです。

■子テーマに必要なファイルを作る
※必ずバックアップを取ってください。

準備するファイルは2つ。
style.css
functions.php

phpやcssファイルはテキストファイルの拡張子「.txt」を「.php」「.css」に変更すれば作成できます。
子テーマのフォルダに保存してください。

●style.css
cssファイルに以下のように記載します。

/*
Template:●●●●
Theme Name:●●●● child
*/

Template：親テーマのディレクトリ名
●●●●には親テーマのフォルダ名を入力してください。（例：twentyseventeen）
Theme Name：子テーマの名前
子テーマにつけたい名前を入力してください。（例：Twenty Seventeen child）
親テーマ名+childとすると分かりやすいです。

スペルミスでもうまく認識されないので、きちんと確認して記述しましょう。

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

子テーマ – WordPress Codex 日本語版

■子テーマをアップロード
お使いのサーバーによってアップロードの方法は異なります。

作成した子テーマは
wordpress > wp-content > themes にアップデートしてください。
（themesはテーマのフォルダです。親テーマと同じ階層にいれてください。）

サーバーからの方法が分からない！という方は
style.cssとfunctions.phpの入った子テーマフォルダをzipファイルにします。
（Windowsでは、圧縮したいフォルダを右クリック→[送る] を選択 (またはポイント) し、[圧縮 (zip 形式) フォルダー]を選択）

外観 > テーマ > 新規追加 > テーマのアップロード から、zipファイルをアップロード

アップロードが完了後、外観 > テーマ にいくと子テーマが増えています。
ライブプレビューで確認し、大丈夫でしたら有効化をクリック。

この子テーマを適用した状態は、親テーマをそのまま表示した状態と変わりがありません。
しかし、子テーマのstyle.cssを変更したり、テンプレートを追加、カスタマイズしていくことによって、自由に変更することができるようになります。

以上、子テーマを作るでした。お疲れ様でした。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

小笹 通典

1971年、奈良県橿原市生まれ。京都でWebを中心としたプロデュースなどを行うオフィスピコッツの代表。これまで多種多様なWEBサイトの制作や運営、プロデュースに携わり、複数のWEB系のコンテストなどでの受賞暦も持つ。 現在、WEBサイトの作成や運営などはもちろん、新規事業立ち上げのサポートや各種プロジェクトのアドバイザー、大学校や高校の講師、PTA会長、CEOなど、活動の範囲を広げている。

最新記事 by 小笹 通典 (全て見る)

• 【Dreamweaver2020】起動時に前回のファイルを開かないようにする - 2020年6月26日
• Twitterプロフィール画像変更の方法 - 2020年6月12日
• サブディレクトリにインストールしたWordPressをルートディレクトリ表示に変更する方法 - 2020年6月5日