LION MEDIA 子テーマを実際に使ってカスタマイズするやり方

WordPressのLION MEDIAのテーマをカスタマイズしたいときに役立つのが子テーマ

子テーマは親テーマに属していて親テーマの機能とスタイルを確実に引き継ぐことができます。そして、そのスタイルを編集できるのも子テーマです。

もしLION MEDIAの親テーマで直接カスタマイズしてしまうとテーマアップデートがあった場合にファイルが上書きされてしまいます。

ファイルが上書きされてしまうと親テーマでカスタマイズした内容はなくなってしまう事になるのです。

しかし親テーマでカスタマイズしないでLION MEDIAの子テーマでカスタマイズすることでファイルの上書きなどの影響を子テーマは受けないので自分でデザインをカスタマイズしたオリジナルのデザインは消えることがありません。

子テーマでサイトのデザインを編集していくために子テーマの使える環境を確認してから実際に子テーマでカスタマイズする方法を説明していこうと思います。

1. LION MEDIA 子テーマが使える環境を確認する
- 1.1. style.css
- 1.2. functions.php
2. 子テーマを使用して実際にカスタマイズする方法
3. LION MEDIAで実際にやった子テーマ活用カスタマイズ

LION MEDIA 子テーマが使える環境を確認する

LION MEDIAの子テーマの使い方の前に子テーマが使える環境が整ってるか確認をしておきましょう。

LION MEDIA公式サイトから子テーマをダウンロードしてWordPressに子テーマをインストールしてあるか確認します。

LION MEDIAのインストールがまだの人はLION MEDIAを使うときのインストール方法を参考にしてみてください。

そしてLION MEDIAのバージョンが「2.0.0」になってるか確認しておきます。

LION MEDIAのバージョンアップを確認する理由

これまで親テーマのcss/contents.cssが子テーマのstyle.cssよりも後に読み込まれていたため、singleページのcssを修正(上書き)できない状況にありました。そのため親テーマのバージョンアップ(2018.2.15)に合わせて、子テーマのfunctions.phpは修正されている(2.0.0と同時に)　
【重要】子テーマのfunction.php修正のお知らせ

LION MEDIAを2018年2月15日以降にインストールしているならば大丈夫です。

次にLION MEDIAの子テーマにインストールしたときから入っている子テーマファイルについてですが、LION MEDIAの作成者が作ってくれている2つのファイルがあります。

style.css
functions.php

「style.css」と「functions.php」は子テーマに最低限あったほうがいいファイルです。

style.css

サイトのデザインに変更を加えるときに今後よく使用することになるのが子テーマのstyle.css

使用してるそれぞれの環境からファイルがある場所の確認をしてから、子テーマのstyle.cssでcssを記述した内容が読み込まれる仕組みも覚えておきたいことでもあります。

管理画面からstyle.cssがある場所を確認

外観⇒テーマ編集⇒LION MEDIA Child⇒style.css

サーバー経由で確認

ファイル管理⇒サイトURL⇒public html⇒wp-content⇒themes⇒lionmedia-child⇒style.css

FTP経由で確認

サイトURL⇒public html⇒wp-content⇒themes⇒lionmedia-child⇒style.css

FTPソフトで子テーマファイルを確認するときレンタルサーバと同じディレクトリの進み方ですがFTPを使うとディレクトリが見やすいし、カスタマイズするために使う子テーマが扱いやすく安全に使うことができます。

そしてstyle.cssはWebページの外観(見た目とレイアウト)を制御するためのファイル

上記それぞれに確認したファイル場所の子テーマのstyle.cssが認識するために必要な情報

子テーマファイルの一番上の記述は子テーマを適用するための情報が書いてあるので自分でデザインするときは「ユーザーカスタマイズエリア」の下からCSSを記述していきます。

子テーマのstyle.cssは親テーマ⇒子テーマの順番で読み込まれます

style.cssは親テーマに対して子テーマに書いた情報が「上書き」されてカスタマイズが反映されます。

functions.php

管理画面からfunction.phpがある場所を確認

外観⇒テーマ編集⇒lionmedia child⇒functions.php

サーバー経由で確認

ファイル管理⇒サイトURL⇒public html⇒wp-content⇒themes⇒lionmedia-child⇒functions.php

FTP経由で確認

サイトURL⇒public html⇒wp-content⇒themes⇒lionmedia-child⇒functions.php

子テーマファイルにあるfunction.phpが認識するために必要な情報の画像

functions.phpはoption関数が含まれてるテーマ関数ファイルです。

子テーマのfunctions.phpファイル内の使い方は <?php が開始タグで ?>が終了タグです

子テーマのfunctions.phpは親テーマfunction.phpに追加して読み込まれます(正確には親テーマのファイルの直前に読み込まれる)

子テーマを使用して実際にカスタマイズする方法

子テーマでカスタマイズするときのやり方ですが、Chromeのデベロッパ―ツール(検証モード)を使った方法で便利にサイトデザインのカスタマイズをすることができます。

Chromeのデベロッパーツール(検証モード)は子テーマでカスタマイズするときだけでなく、Webサイトの運営において確認作業や検証作業するときでも便利に使えるツールです。

Chrome検証を使用して子テーマに記述するCSSを検証する

たとえばLION MEDIAの見出しのカラーをカスタマイズするとします。

Chromeの検証はサイトを開いた状態でマウスを右クリック

すると「検証」があるのでクリック

開いてるサイトのページの画面にhtmlやCSSが表示されるので左上の矢印があるアイコンをクリック

ページにある見出し(カスタマイズする場所)にカーソルを置きクリックすると、その部分のhtmlやhtmlの要素に対してのCSSが検証モードの画面に表示されます。

このときデザインを変更したCSSコードは検証として反映しているだけなので、ブラウザでリロードすれば元のデザインに戻ります。

子テーマ記述前にカスタマイズするCSSを確認する

「styles」になってることを確認して、下を見ると「.content h2」のセレクタが見出しのプロパティだと確認できます。

その下には「.content h2」に適用されてる要素を確認できます。

子テーマでデザインをカスタマイズする前には検証モードの見出し要素にCSSでカスタマイズしてテストできます。

たとえば見出しの角を丸くカスタマイズしようとしたら

見出しのプロパティにborder-radiusを書いて値を32pxと記述します

見出しがリアルタイムで変更できるので子テーマにCSSを記述する前にカスタマイズの表示を確認することができるのです。

子テーマのstyle.cssに記述する

Chromeの検証でカスタマイズのテスト確認ができたらCSSを子テーマに記述していきます。

「style.css」

子テーマのstyle.cssに記述しても要素がエラーになる事がある。または反映しない場合がある

その場合はCSSの文法ミスを先に疑うべきでCSSリファレンスなどで自分の記述したCSSが間違ってないかを確認したり、スペルミス「コロン : 」「セミコロン ; 」や「閉じカッコ } 」の抜けがないかも確認してみると意外なミスがあるかもしれません。

それでもエラーな場合は一度LION MEDIAの追加CSSに同じ記述を入れてみる

それでもダメならキャッシュの削除をしてみる。

「functions.php」

functions.phpは素直にあまり理解できてません…なので調べてみました。

関数ごとに開始タグと終了タグを入れるとエラーになる可能性があります。
開始タグの前、終了タグの後にスペースや改行をしないように気をつける。
他のサイトからコピペする場合、functions.phpの中にブラウザ出力要素が入っているとエラーになるのでテキストエディターなどでコピーして再度コピーして使うといい。

functions.phpの使い方は理解できてないので勉強したいと思います。