lightning テーマをカスタマイズ1　子テーマ編

このページは、当サイト管理人が、WordPress を使ってサイトを作成後、カスタマイズをするにあたって、HTMLやCSSの知識は多少あったものの、WordPress の構造やPHPの知識は皆無だったため、いろいろなサイトの情報をもとにカスタマイズを行ったので、それを忘れないための覚え書きのページです。

WordPress のカスタイズのため、このページを訪れた方がいらっしゃいましたら参考にしていただければと思います。また、参考にさせてもらったサイトの管理者さま本当にありがとうございました

子テーマについて

当サイトは、「lightning」というテーマを使用していますが、テーマの「style.css」や「○○.php」を直接触るとテーマがバージョンアップされたとき、すべて上書きされ、カスタマイズしたものが、消えてしまうとのことなので、子テーマを作成しそのファイルをカスタマイズするのがベターとのことで、その手順を記載していきます。

子テーマを作成　ダウンロード

通常は、子テーマを作成するのですが、
「lightning」は公式サイトに子テーマが用意されているのでそれをダウンロードしました。

ダウンロード先　→　子テーマでのカスタマイズ

「子テーマカスタマイズサンプル」 をクリックしてダウンロード。

lightning_child_sample_v_0_1_2.zip

をダウンロード後、解凍すると
lightning_child_sample_v_0_1_2 というフォルダの中に、lightning_child_sample　というフォルダができている。これが子テーマ。

sampleがついているのはいやなので、フォルダ名を【 lightning_child_rakupaso 】に変更しました。
フォルダに入っている　style.css　をテキストエディタで開くと下記のコードが書かれているので、必要なものを編集します。

重要なのは、3行目の「Theme Name:○○」と5行目の「Template:○○」
5行目は、親テーマのフォルダ名になっていればＯＫなので、そのままでＯＫ！
3行目の「Theme Name: Lightning Child Sample」は、
「Theme Name: Lightning Child Rakupaso」に変更しました。

で、結局以下のようになりました。

この子テーマのフォルダーごと親テーマ（既存のテーマ）と同じ階層である
/wp-content/themes/ にFTPでアップロードして、管理画面から 外観 ＞ テーマ に進み、表示されている子テーマを「有効化」すれば子テーマの設定は完了します。

また、試しに、「style.css」のコメントアウトしたテーマ情報の下に、
「 body { background: pink; } 」と記述して、FTPで上書きアップロードしてみてください。

サイトを更新して、背景色がピンク色になっていれば、子テーマが有効化されているということです。確認できればこのコードは不要なので削除して、本当に編集したいコードを記述していってください。

ヘッダースライダーの間隔を変更