LION MEDIAの子テーマを作成して親テーマに影響がないようにする

LION MEDIAの子テーマを作成して親テーマに影響がないようにする

LION MEDIAの子テーマで使用するのは「style.cssの子テーマ」「functions.phpの子テーマ」の2つしか本番環境のLION MEDIAには使用していませんでした。

LION MEDIAのテーマアップデートがしばらくないことをいいことに、LION MEDIAの親テーマをいじってカスタマイズしてしまってる怠惰な私です。

本当はLION MEDIAの親テーマに影響がでないようにLION MEDIAをカスタマイズするテンプレートの子テーマを作成するべきなのです。

「ちゃんと子テーマを作成するんだぞ自分」の自覚を持つために、LION MEDIAの子テーマを作成して親テーマに影響でないようにする子テーマを揃えておこうと思うのです。

 

LION MEDIAの子テーマを作成する

 

LION MEDIAの子テーマを作成するのは5〜10分もあれば、それぞれLION MEDIAのテーマを使用してるWordPressサイトに用意できます。

LION MEDIAのテーマで子テーマを作成する方法は、LION MEDIAの親テーマのファイルをコピーして、子テーマのファイル構造に追加してあげればいいだけなのですが、ファイル操作するのでさえ面倒な私は、WordPressのプラグインに楽を求めてLION MEDIAの子テーマを作成します。

 

ただLION MEDIAのfunctions.phpとstyle.cssの子テーマは、テーマ作成者のFIT-Web Createのサイトでlionmedia-childをダウンロードするとデフォルトで格納してるのでfunctions.phpとstyle.css以外の子テーマ作成です。

 

 

もしLION MEDIAの子テーマを、まだ使用してない場合には上のページの子テーマのインストール方法を参考にlionmedia-childを有効にして使用するようにしてください。

 

LION MEDIAの子テーマ作成はワンクリックで

 

LION MEDIAのfunctions.phpとstyle.css以外の子テーマを作成する場合は、プラグインで子テーマをまとめて作成します。LION MEDIAのテーマ以外にテーマ変更したとしても子テーマ作成としては役立つので覚えておくといいと思います。

one click child themeというプラグインを使用してLION MEDIAの子テーマ作成をします。

one click child themeはWordPressで使用してるテーマのテンプレートを選択してワンクリックで子テーマを作成してくれます。

Advertisement

ですがWordPressの公式プラグインとしてのインストールができないので、GitHubのページでファイルをダウンロードしてWordPressにインストールします。

 

 

one click child themeの準備と使い方は上のページを参考にしてください。

以下からは、そのうちLION MEDIAをカスタマイズするかもしれないテンプレートの子テーマをプラグインで作成する場合を例にします。

 

page.php

 

まずはLION MEDIAの子テーマにpage.phpの子テーマを作成。作成するとpage.phpは固定ページ用の子テーマにできます。

 

 

one click child themeをWordPressで有効化すると、WordPressの管理画面の外観のメニューに「Child Theme」が表示されるのでクリックしてページ移動すると子テーマ作成画面に進めます。

 

 

進んだ子テーマ作成画面で、LION MEDIAのpage.phpを選択してCopy Templateをワンクリックでpage.phpの子テーマが自動で作成されます。

 

 

LION MEDIAの子テーマlionmedia-childのフォルダにpage.phpが子テーマとして追加されてれば作成完了。

 

header.php

 

次にLION MEDIAの子テーマにheader.phpの子テーマを作成。作成後のheader.phpはヘッダー用の子テーマにできます。

 

 

LION MEDIAのheader.phpを選択してCopy Templateボタンをワンクリックで子テーマ作成します。

 

 

LION MEDIAの子テーマlionmedia-childのフォルダにheader.phpが子テーマとして追加されてるか確認できたらheader.phpの子テーマ作成完了です。

 

index.php

 

次にLION MEDIAの子テーマにindex.phpの子テーマを作成。作成するindex.phpはLION MEDIAの場合、ヘッダー下のピックアップ記事などをカスタマイズするときの子テーマにできます。

 

 

LION MEDIAのindex.phpを選択してCopy Templateをクリックで子テーマ作成します。

 

 

これでLION MEDIAの親テーマに影響が出ないように、カスタマイズしたいときには存分に作成した子テーマを使うことができます。

 

LION MEDIAの子テーマが親テーマに影響ないか確認

 

LION MEDIAに子テーマを作成したことで、親テーマを使用しないでカスタマイズできるようになるわけですが、念のため作成した子テーマがLION MEDIAの親テーマに影響ないかどうか確認はしておきたいです。

子テーマ作成ができてれば親テーマの後で子テーマを読み込むので子テーマのスタイルが適用できます。

 

Advertisement

 

簡単なHTML要素を、作成したLION MEDIAの子テーマのテンプレートに記述して表示させ、背景カラーが反映するか子テーマのstyle.cssにCSSを記述して確認します。

 

固定ページ

 

LION MEDIAの子テーマとして作成したpage.phpでLION MEDIAの固定ページが問題なくカスタマイズできるか確認します。

WordPressの固定ページで適当な固定ページを作成しておきます。そしてLION MEDIAのカスタマイズ設定のホームページ設定で固定ページで表示するようにして、作成した固定ページを選択しておく。

 

 

エディターでLION MEDIAの子テーマlionmedia-childのpage.phpを開いてl-wrapperの下にでも「子テーマ確認怠けない用」のdiv要素をマークアップ。

マークアップしたdiv要素のスタイルは、LION MEDIAの子テーマのstyle.cssに記述します。

 

 

LION MEDIAの子テーマとして作成したpage.phpでLION MEDIAの子テーマstyle.cssでカスタマイズできるのが確認できたので子テーマは問題なく使用できます。

 

ヘッダー

 

次はLION MEDIAの子テーマに作成したheader.phpが子テーマとして動作するか確認です。

エディターでLION MEDIAの子テーマlionmedia-childのheader.phpを開いてheader終了タグの下にdiv要素をマークアップ。スタイルはもちろんLION MEDIAの子テーマのstyle.cssに記述します。

 

 

LION MEDIAの子テーマとして作成したheader.phpに記述した「グローバルメニューでも作るの?」な要素が表示できて、LION MEDIAの子テーマstyle.cssのCSSも適用できるのが確認できたので子テーマとして有効になりました。

ちなみに話ズレますが、LION MEDIAのグローバルメニューをドロップダウンメニューにできないのは、メニュー階層の深さを表示できないような仕様になってるためです。

 

トップページ

 

最後にLION MEDIAの子テーマに作成したindex.phpが子テーマとして動作するか確認です。

LION MEDIAのトップページのフッター上部にでも要素を作ってLION MEDIAの子テーマとして作成したindex.phpが子テーマとして役に立ってくれるかどうか?

子テーマのindex.phpに記述した要素は、もちろん子テーマのstyle.cssでデザインです。

 

 

LION MEDIAのトップページの要素を子テーマのindex.phpで表示できて、子テーマのstyle.cssでカラーが反映するので、LION MEDIAの子テーマに作成したindex.phpで今後はカスタマイズできます。

 

LION MEDIAの子テーマ作成まとめ

 

LION MEDIAの子テーマ作成を「page.php」「header.php」「index.php」を例として作成しましたが、子テーマ作成はこの限りではなく、LION MEDIAに自分の欲しい機能を追加するテンプレートの子テーマを作成してカスタマイズできます。(例えばsingle.phpなど)

私のようにLION MEDIAの親テーマのテンプレートでカスタマイズしてると、LION MEDIAのアップデートがきた場合には、テーマアップデートの影響をもろに受けるので、親テーマでのカスタマイズが一瞬で消えてしまいます。

子テーマを作成して安心、安全の子テーマを使用してください。

WordPressテーマカテゴリの最新記事