IT虎の穴

つまらない人生を面白く生きることが目標。人生に閉塞感を感じる現役システムエンジニアがIT業界の話や仮想通貨・ブログ運営・ネット全般の話題に切り込みます!

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

ぜひ試してください!!

 


<スポンサーリンク>

<スポンサーリンク>

おすすめ記事

1

仮想通貨の始め方~低リスク投資で億り人になる方法の解説ページ~Content1 仮想通貨の始め方~低リスク投資で億り人になる方法の解説ページ~2 仮想通貨の基礎知識2.1 ビットコインとアルトコイン2 ...

2

ネットでお金を稼いで汚い中年どもから独立する方法Content1 ネットでお金を稼いで汚い中年どもから独立する方法1.1 サラリーマンはつらいよ2 ネットでお金を稼ぐ方法【初級編】2.1 お小遣いサイ ...

3

ふるさと納税するなら楽天が一番お得!ポイント貰えすぎてビビッた!Content1 ふるさと納税するなら楽天が一番お得!ポイント貰えすぎてビビッた!1.1 楽天でふるさと納税?2 楽天市場でふるさと納税 ...

4

Amazonでポチる前に知っておくべきお得な裏ワザ・購入方法Content1 Amazonでポチる前に知っておくべきお得な裏ワザ・購入方法2 【初級編】Amazonのお得な裏ワザ・購入方法2.1 Am ...

-WORDPRESS

Copyright© IT虎の穴 , 2018 All Rights Reserved Powered by AFFINGER4.