WORDPRESS

WordPressで子テーマを作る方法を詳細に解説


仕事やめたい

今回のテーマはWORDPRESSに子テーマを適用する方法です。

WORDPRESSではテーマと呼ばれるデザインのテンプレートを適用することで、オシャレなデザインを簡単に利用できたり、SEO対策に有利な記述を自然としてくれます。(詳しくは【ブログ】WordPressにテーマ「Stinger5」をインストールする方法

このテーマは簡単にカスタマイズすることができて、テンプレートを利用しながらもオリジナルな要素を取り入れることができます。このカスタマイズする際に、設定ファイルをいくつか修正する必要があるのですが、修正した場合に困るのが、テンプレートとして利用しているテーマがバージョンアップした場合です。

バージョンアップするとそれまでにカスタマイズしていたファイルが上書きされてしまい、オリジナルで出していた要素が消えてしまいます。ガーン😨

そこで登場するのが子テーマを利用する方法です!

 

子テーマとは

簡単に言うと上述したオリジナルの要素を記載したファイルのみを集めたテーマで、基本は親テーマであるテンプレートを参照しつつ、オリジナルで修正したファイルのみ子テーマのファイルdえ上書きして適用してくれるというものです。

この子テーマを利用することによって、親テーマであるテンプレートをバージョンアップした際も、子テーマにて修正したファイルは残っていて、バージョンアップしたテーマでも適用されます。

親テーマをバージョンアップしても、オリジナルな修正が残るのが子テーマの便利なところというわけです。

それではさっそく子テーマを導入する方法を解説していきます。

 

子テーマを導入する方法

1.まずは親テーマであるテンプレートをアップロードしてください。

(アップロードの方法はこちらを参考にしてください。【ブログ】WordPressにテーマ「Stinger5」をインストールする方法

 

2.親テーマがインストールされているディレクトリと同階層に子テーマのディレクトリ(フォルダ)を作成します。

ここでは「STINGER6」を例にして解説します。

子テーマ2

テーマがインストールされているディレクトリは通常サーバの/xxxxxx(ドメイン)/public_html/wp-content/themes/配下です。

ここに親テーマである「stinger6」というディレクトリがありますが、同じ階層に「stinger6_child」というディレクトリを作成しています。この子テーマのディレクトリ名は任意のもので問題ありません。ここではわかりやすいようにchildとつけています。

 

3.作成した子テーマのディレクトリの中にstyle.cssというファイルを作成する

ファイル名:style.css

ファイルの中身---------------------------------------------------------------------------

@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: stinger6_child
Template: stinger6
Version: 20151202
---------------------------------------------------------*/
@import url('../stinger6/style.css');

ここまで---------------------------------------------------------------------------------

「Theme Name」項目には作成した子テーマディレクトリの名前、「Template」項目には親テーマのディレクトリ名を記載してください。(まあここは単なるコメント行なので、最悪なんでもいいです)

一番重要なのは@~~~~~の記述です。ここは親テーマのディレクトリ名を確実に記載してください。

@import url('../stinger6/style.css'); ⇒赤字の部分が親テーマのディレクトリ名です。

ここで指定した親テーマのstyle.cssをインポート(読み込み)しますという宣言です。これによってこの子テーマの基本的な設定は親テーマを利用しますという記載がされています。(ちょっと専門的な話をすると".."は一個上の階層を示しています。この子テーマのファイルから見た親テーマのstyle.cssへの相対パスを記載しているんですね。)

 

4.作成した子テーマを適用する

あとは作成した子テーマを「外観」⇒「テーマ」から選択して適用するだけです。

子テーマを適用するのに最低限必要なファイルは上記で作成したstyle.cssだけです。あとはカスタマイズしたいファイルを親テーマからコピーしてきて、修正したものを子テーマのディレクトリに配置するだけです。子テーマのディレクトリにあるファイルは親テーマのそれより優先され上書きされますので、子テーマの修正が有効になるというからくりです。(親テーマのファイルはいじる必要はなくなります)

 

まとめ

WORDPRESSで子テーマを導入する方法を紹介しました。テーマをカスタマイズしたい場合は、必ず子テーマを作成して修正したほうがいいです。

ぜひ試してください!!

 


<スポンサーリンク>

IT虎の穴トップへ戻る

-WORDPRESS

Copyright© IT虎の穴 , 2024 All Rights Reserved Powered by AFFINGER5.