Lightningの子テーマを設定する簡単な方法をわかりやすく紹介!

Lightningの子テーマを設定する簡単な方法をわかりやすく紹介!

takato(@n8takato)です!

Lightningの子テーマを導入したい

この記事では上記の課題を解決します。

WordPressでweb制作をしていると、Lightningのテーマを頻繁に使用します。

その際Lightningのスタイルシートにcssを記入するために、Lightningの子テーマを導入します。

この記事では「Lightningの子テーマを導入する方法」や、「子テーマを導入しなければいけない理由」について説明していきます。

WordPressでブログやweb制作を行っている方は必見です。

この記事でわかること

  • Lightningの子テーマを導入する方法
  • 子テーマを導入しなければいけない理由

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人

Lightningに関する他の記事はこちら

あわせて読みたい
Lightningのハンバーガーメニューの位置を変更する方法を紹介! Lightningのハンバーガーメニューの位置を変更したい この記事では上記の課題を解決します。 WordPressでwebサイトを制作する際、Lightningのテーマを使用する方が多い...
あわせて読みたい
Lightningのハンバーガーメニューをカスタマイズする方法! Lightningテーマのハンバーガーメニューをカスタマイズしたい この記事では上記の課題を解決します。 WordPressで企業サイトを作成する際、Lightningは非常によく使われ...
目次

子テーマとは何か?

そもそも子テーマとは何かについて説明します。既に知っている方は先に進んでください。

子テーマとは?

子テーマとは、親テーマのコードに直接触れなくてもテーマを編集することの出来る機能のこと

親テーマを触らずにサイトを編集出来る

本来、WordPressのサイトを編集する場合は親テーマのソースコードをいじる必要があります。

しかし子テーマを導入することで、親テーマのソースコードを触れずにサイトを編集することが出来るようになります。

子テーマを導入しなければいけない理由

親テーマのソースコードでもサイトを編集することが出来ます。

しかし、親テーマのソースコードはテーマ更新時に上書きされてしまいます。

親テーマに追加したcssコードは、テーマ更新時に消えてしまうのです。

子テーマにコードを追加していれば、親テーマが更新しても上書きされることはありません。

子テーマを追加する理由

テーマ更新時のコード上書きを回避するため

Lightningの子テーマの設定方法

Lightningのテーマ導入は、下記の流れで行います。

Lightningテーマ導入の流れ

  • Lightning子テーマのダウンロード
  • Lightning子テーマをWordPressにアップロード
  • Lightning子テーマを有効化する

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

Lightningの子テーマはWordPressからインストールすることが出来ません。そのため、ダウンロードする必要があります。

Lightningの子テーマは下記からダウンロードすることが出来ます。

Lightningの子テーマをWordPressにアップロード

Lightningの子テーマをダウンロードしたら、WordPressにアップロードします。

外観」→「テーマ」→「新規追加」→「テーマをアップロード」から、先ほどダウンロードしたzipファイルをアップロードします。

テーマのアップロード
テーマのアップロード

ファイルを選択」で先ほどダウンロードしたファイルを選択すると、WordPressにLightningの子テーマを導入することが出来ます。

Lightningの子テーマを有効化する

Lightning子テーマのアップロードが終わったら、「有効化」をクリックしてください。

これで子テーマの導入は終わりです。

Lightningの子テーマでスタイルシートを修正する方法

Lightningの子テーマにあるスタイルシートでサイトを修正する方法を紹介します。

Lightning子テーマでサイトを修正する方法

外観」→「テーマファイルエディター」→「(編集するテーマを選択)をLightning Childに変更」→「スタイルシート」からサイトを修正することが出来ます。

Lightning子テーマのスタイルシート
Lightning子テーマのスタイルシート

このページからcssコードを追加することが出来ます。

最後に | 子テーマを導入してカスタマイズしよう

この記事では、Lightningの子テーマを導入する方法を紹介しました。

子テーマの導入は、親テーマの更新によるコードの上書きを防止出来ます。

まだ子テーマを導入していないという方は、是非導入してください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次