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で使用してるテーマのテンプレートを選択してワンクリックで子テーマを作成してくれます。
ですが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の親テーマに影響ないかどうか確認はしておきたいです。
子テーマ作成ができてれば親テーマの後で子テーマを読み込むので子テーマのスタイルが適用できます。
簡単な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のアップデートがきた場合には、テーマアップデートの影響をもろに受けるので、親テーマでのカスタマイズが一瞬で消えてしまいます。
子テーマを作成して安心、安全の子テーマを使用してください。
