Lightningの子テーマを設定する方法を紹介!

Lightningの子テーマを設定する方法を紹介!

takato(@n8takato)です!

Lightningの子テーマを設定する方法を知りたい

この記事は上記の課題に向けて作成しています。

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

その際cssで装飾を変更するためにLightningの子テーマを導入します。

Lightningの子テーマは簡単に導入することが出来ます。

Lightningの子テーマの導入方法と導入の必要性について説明します。

この記事を読むメリット

  • Lightningの小テーマを設定する方法がわかる

この記事を書いた人

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

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

Lightningの子テーマの設定方法

早速Lightningの子テーマの設定方法を紹介します。

手順は下記の通りです。

Lightning子テーマ導入の流れ

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

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

始めにLightningの子テーマをダウンロードします。

Lightningの子テーマはWordPressの管理画面からダウンロード出来ません。

下記からLightningの子テーマをダウンロード出来ます。

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

続いてダウンロードした子テーマをWordPressにアップロードします。

外観」→「テーマ」→「新規追加」→「テーマをアップロード」でアップロードします。

先ほどダウンロードしたzipファイルを選択してください。

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

これでWordPressに子テーマがアップロードされました。

Lightning子テーマの有効化

最後にLightningの子テーマを有効化します。

青い「有効化」のボタンを押してください。

以上でLightningの子テーマの導入は完了です。

¥2,948 (2023/01/08 17:48時点 | Amazon調べ)

子テーマとは何か?

そもそも子テーマとは何かについて説明します。

子テーマとは?

親テーマに直接触れることなくテーマを編集修正出来る機能

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

WordPressのサイトを編集する場合は親テーマを修正する必要があります。

しかし子テーマを導入することで親テーマを触れずにサイトが編集出来ます。

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

親テーマでもサイトを編集することは可能です。

しかし親テーマに記入したコードはテーマ更新時に上書きされてしまいます。

※テーマはセキュリティ向上のため定期的に更新しています。テーマを更新すると親テーマにあった過去のコードは全て上書きされてしまいます。そのためサイトの編集は子テーマで行うことがセオリーとされています。

子テーマに記述することで上書きを回避することが出来ます。

導入したテーマを編集する予定が無い場合は子テーマの導入は必要ありません。もし編集するなら子テーマを導入してそちらのソースコードに記入してください。

Lightningの子テーマでcssを修正する方法

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

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

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

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

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

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

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

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

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

¥2,948 (2023/01/08 17:48時点 | Amazon調べ)

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

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