Lightningの子テーマの作り方

Lightningのカスタマイズ

Lightningの子テーマを作る方法を紹介します。CSSだけをカスタマイズする予定なら「CSSカスタマイズ」メニューも使えるので必須ではありませんが、PHPも含めて本格的にカスタマイズする場合は子テーマを使った方が無難です。ここでは、テーマとしてLightningが有効化されている前提で話を進めます。

Lightningの子テーマをダウンロード

Lightningのホームページから「設定ガイド」‐「子テーマでのカスタマイズ」メニューを開いて「子テーマカスタマイズサンプル」をダウンロードします。

ダウンロードページのURLは次のとおりです。

Lightning／ 子テーマでのカスタマイズ

Lightningの子テーマサンプルをダウンロード
Lightningのように子テーマのサンプルをダウンロードできないテーマについてはOne-Click Child Themeのようなプラグインを使う方法があります。

子テーマをインストール

WordPressの管理画面に戻って「外観」‐「テーマ」メニューを開いて「新規追加」をクリックします。

テーマを新規追加

「テーマのアップロード」をクリックします。

テーマのアップロード

「参照」ボタンをクリックして、ダウンロード済みの子テーマ（例：lightning_child_sample_v_0_1_2.zip）を選択します。

「参照」ボタンをクリック

ファイルを選択後、「今すぐインストール」をクリックします。

子テーマをインストール

インストールが完了したら「有効化」をクリックします。

子テーマを有効化

「外観」-「テーマ」メニューを見ると、親テーマのLightning(1) に変わって子テーマ(2)が有効化されていることがわかります。

子テーマが有効化されている

これで子テーマに切り替える設定は完了です。

子テーマのインストール場所とファイル構成

インストールされた子テーマの構成を少しだけ理解しておきましょう。

子テーマがインストールされる場所は親テーマと同じ階層（wp-content/themesフォルダ）です。

子テーマのインストールディレクトリ
子テーマのインストールディレクトリ

この例では親テーマのディレクトリが「lightning」で子テーマが「lightning_child_sample」となっています。他のテーマと同じ名前にならなければ、親テーマも子テーマもフォルダ名は自由です。

子テーマフォルダ内のファイル構成は次のようになります。

子テーマのファイル構成
子テーマのファイル構成

このうち必須ファイルはstyle.cssのみです。functions.phpは必須ではありませんが、PHPのカスタマイズで使うことがあります。ほぼ必須と言ってもよいかもしれません。

ちなみに、親テーマに必須のindex.phpは子テーマでは必須ではありません。

その他のファイル（_module_loop_event.php／_sidebar-event.php）はLightningのサンプル子テーマ特有のファイルですが、サンプルなので使わなければ削除しても問題ありません。

基本的にはカスタマイズしたいファイルを子テーマフォルダに作成していくという考え方です。親テーマの全ファイルを子テーマフォルダにコピーしてしまう方がいるようですが、その作業は間違いです。必要ありません。

有効化した時点で子テーマは使用可能になっているので、これらのファイルに対して特別な初期設定は必要ありません。

子テーマを使ったカスタマイズ

サイト名のスタイルを変更する

子テーマを使ったカスタマイズが反映されるかのチェックとして、ここでは、ヘッダーのサイト名（サンプルPC教室）の色やサイズを変えてみます。

サイト名のスタイルを変更したい

「外観」-「テーマの編集」メニューでstyle.cssを開いて、最後の行に続けて次のようなコードを入力します。

サイト名の部分にロゴ画像を表示している場合は反映されませんので、続く「コピーライトのフォントサイズを変更する」などを試してみてください。
/* サイト名のスタイルを変更する */
.navbar-brand a {
    font-size: 40px;
    font-weight: bold;
    color: navy;
}

CSSを入力したイメージは次のようになります。

CSSの入力後

画面を下にスクロールして「ファイルを更新」ボタンをクリックすると設定完了です。サイトを表示してCSSが反映されているか確認しましょう。

入力したCSSが反映されているか確認

コピーライトのフォントサイズを変更する

次のCSSを使うと、フッターにあるコピーライトのフォントサイズを変更することができます。実用性はありませんが、子テーマが機能しているかのチェックにお使いください。

/* コピーライトのフォントサイズを変更する */
footer .copySection p {
    font-size: 16px;
}

コピーライトのフォントサイズが大きくなります。

コピーライトのフォントサイズが大きくなる

入力したCSSが反映されない原因

入力したCSSが反映されず、カスタマイズ前のスタイルから変わらない場合、次のような原因が考えられます。

  • ブラウザのキャッシュ（古い内容）を見ている --- ブラウザの閲覧履歴を削除してみてください。
  • 入力したCSSが文法的に間違っている --- 入力内容をチェックしましょう。すべて半角です。特に記号や全角スペースにご注意ください。
  • 入力したCSSの優先順位が低い --- 既存のCSSとバッティングしているかもしれません。

CSSが反映されないときは以下のページも参考にしてください。

子テーマのstyle.cssに入力したCSSが反映されない理由と対策 | 西沢直木のIT講座
CSSの変更が反映されないときはセレクタの優先順位をチェック | 西沢直木のIT講座

Lightningのカスタマイズ