WordPressテーマLightning!子テーマの作り方と使い方

Lightning WordPress
香奈枝
香奈枝

以前、「【図解】WordPressのブロックテーマ|子テーマの作り方」という記事を書いたのですが、今回はLightningの子テーマの作り方と使い方について書いてみました。

WordPressをインストールすると、はじめに表示されるTwenty Twenty-Twoやlightningには子テーマがありません。

日本の代表的な無料テーマCocoonには、「子テーマ」があります。

どうして、「子テーマ」があるテーマと無いテーマがあるのか?

子テーマとは何か

子テーマとは何かというと、既に使っているテーマ(これを「親テーマ」と呼びます)の設定やスタイルを引き継ぎながら、好みに合わせて自由に変更できる機能です。

親テーマ(適用中のテーマ)を直接変更(カスタマイズ)してしまうと、テーマの更新があった場合、あなたが加えた変更(カスタマイズ)は新しいバージョンで上書きされてしまい、すべて失われてしまいます。

しかし、子テーマを使用すれば、親テーマはそのままに、あなただけのカスタマイズを加えた部分を保持することができます。これにより、テーマを更新しても、あなたのカスタマイズが失われる心配はありません。

子テーマを利用することで、安全にテーマをカスタマイズし、個性的なウェブサイトを作成することができます。

※ここでさす「カスタマイズ」とは、PHPでプログラムを書く、CSSでデザインの変更を追加する、テンプレートファイルを上書きするなどの行為をいいます。

Lightningのバージョンと世代

今回は、WordPressの無料テーマ Lightningの子テーマを作りたいと思います。

Lightningのテーマは、2024年4月現在バージョン: 15.21.1となっています。

しかし、Lightningのテーマにはバージョンが同じでも異なる2つの世代が存在します。

Generation2(~version13.x)とGeneration3と言う2つの世代があり、「互換性が低いため世代を切り替える際は事前に必ずバックアップを作成してください。」と言う注意書きがあります。

確認方法は、外観>カスタマイズ>Lightning機能設定に、以下のような部分があります。

Generation2(~version13.x)とGeneration3

新規でLightningをインストールした時の世代設定は G3 になっていますので、Generation2(~version13.x従来版)を使いたい場合は 、この画面でGeneration 2 に切り替えてから必ず「ページを再読み込みする」のボタンをクリックして利用してください。

Lightningのディレクトリ

現在のLightningには、Generation2(~version13.x従来版)、Generation3(G3版)の両方が入っています。

テーマファイルも、Generation2(~version13.x)、Generation3で、ディレクトリが分かれています。

例えば、Generation3で運用中のサイトをカスタマイズするために、子テーマを作る場合は_g3 ディレクトリ の中のファイルを参照する必要があります。

Generation2とGeneration3の違い

Generation3に大幅にリニューアルされた内容には、以下のようなものがあります。引用先:従来の Lightning との違い

  • デザインを上書き・カスタマイズしやすいようにCSS構造の大幅な改善
  • 表示するページ条件に応じて部分的に改変しやすいようにテンプレート構造の見直し
  • 古い機能のファイル・コードを削除してテーマファイルの可読性の改善
  • 主流でなくなった機能のCSSやJavaScriptなどの見直しによる表示速度の改善

Generation2では、外観のカスタマイズ画面とウィジェットの操作だけで、WEBサイトのトップページを作り上げることができるため、「トップページコンテンツエリア上部」と言うウィジェットがあります。※以下の画像を参照

トップページコンテンツエリア上部

Generation3になると、この機能が廃止されたため「トップページコンテンツエリア上部」と言うウィジェットは表示されなくなりました。

Lightningの子テーマを自作する方法

香奈枝
香奈枝

問題は、Generation2(~version13.x従来版)、Generation3(G3版)どちらの子テーマを作るのか?ですよね。

Lightningは、これからも進化し続けて行くことが予想されます。

つまり、いずれGeneration2(~version13.x従来版)は、廃止される可能性があるということです。

例えば、「トップページコンテンツエリア上部」と言うウィジェットを使いたいという方でも、せっかくリニューアルされた内容を利用しないのは、勿体ないですよね。

その場合は、Generation3(G3版)の子テーマを作ってから、その子テーマに「トップページコンテンツエリア上部」を追加する方法がおすすめです。

Generation3(G3版)の子テーマの作り方

子テーマを自作するのは簡単ですが、Vektor,Incに Lightning 用の子テーマのサンプルデータが予め用意されていますのでご利用ください。

ZIPファイルを解凍する

lightning-child-sample.zipをダウンロードしたら、ZIPファイルを解凍します。

解凍されたlightning-child-sampleフォルダの中にさらに「lightning-child-sample」フォルダがあるので「lightning-child」にリネームします。

 

style.cssを編集する

「lightning-child-sample」フォルダの中にあるstyle.cssをテキストエディタなどで編集します。

「Theme name」を、Lightning Child Sample ⇒ Lightning Child

「Template: lightning」はそのままで

※の部分は、空欄でOKです。

テキストエディタで編集したら、必ずファイルメニューから「上書き保存」します。

FTPソフトでサーバーにアップロードする

リネームした子テーマフォルダ「lightning-child」を、FTPソフトやサーバーのWEBマネージャなどを使って「wp(サーバーのインストールフォルダ)」⇒「wp-content」⇒「themes」の中にアップロードします。

子テーマを有効化する

ダッシュボードのメニューから「外観」⇒「テーマ」に「lightning-child」ができているので「有効化」します。

子テーマの作成は、これで完了です。

子テーマの使い方

子テーマにあるファイルは、親テーマより優先して読み込まれます。

そして、アップデートの影響をうけません。

例えば、変更したいファイルを子テーマのディレクトリに複製し、子テーマのディレクトリ内でカスタマイズすれば、あなたがカスタマイズした部分についてアップデートの影響を受けることなくサイトが表示されるという訳です。

G3版に「トップページコンテンツエリア上部」を追加してみよう

子ページを使って、「トップページコンテンツエリア上部」を追加してみましょう。

子テーマの中に「functions.php」と言うファイルがあるので、テキストエディタで開き「トップページコンテンツエリア上部」を追加する方法 このサイトから、functions.phpの追加コードをコピーして以下の図のように張り付けて「上書き保存」します。

functions.phpの追加コード

コードを追加した、functions.phpをFTPソフトで、サーバー内の子テーマフォルダにあるfunctions.phpに上書きします。

WordPressのダッシュボードから外観>ウィジェットを表示してみると、一番上のところに「トップページコンテンツエリア上部」ができていることが確認できます。

lightningのフッターにあるコピーライトを削除する

実は、Lightningテーマのコピーライトは自由に改変可能です。

Q:フッターのコピーライト表記を削除したいのですが
A:コピーライトは自由に改変いただいて結構です。
消し方がわからない方は、コピーライト表記を書き換えるプラグインを販売していますので、そちらをご利用ください。出典:よくあるご質問 | サポート | Lightning
Generation2(~version13.x従来版)、Generation3(G3版)どちらもスタイルシートに数行追加するだけで、コピーライトを消すことができます。

Generation2(~version13.x従来版)のコピーライト削除

footer .copySection p:nth-child(2) {
display:none !important;
}
以下の3つの方法のいずれかでスタイルシートを追加します。
1)ダッシュボード>外観>カスタマイズ「追加CSS」に記入する。
2)ダッシュボード>ExUnit>CSSカスタマイズに記入する。
3)子テーマのstyle.cssをテキストエディタなどで編集しFTPでアップロードする。

Generation3(G3版)のコピーライト削除

.site-footer-copyright p:nth-child(2) {
display:none;
}
以下の3つの方法のいずれかでスタイルシートを追加します。
1)ダッシュボード>外観>カスタマイズ「追加CSS」に記入する。
2)ダッシュボード>ExUnit>CSSカスタマイズに記入する。
3)子テーマのstyle.cssをテキストエディタなどで編集しFTPでアップロードする。