賢威7.1 の子テーマのインストール手順と使い方
多くのユーザーがいる賢威のワードプレステーマ。そのまま使ってもよいのですが、文字の色を変えたり、背景や見出しのデザインを変えたりと、自分の好みにカスタマイズする人も多いと思います。
その際にCSSをカスタマイズするのですが、親テーマでカスタマイズしていると、賢威がバージョンアップなどをした場合、functions.phpなどが改変され、せっかくのカスタマイズもアップデートで、また最初から、ということになります。
それを避けるためにも子テーマを利用することをお勧めします。

子テーマとは?

通常のテーマ(賢威v7.1など)と組み合わせて使うカスタマイズ用のテーマのことです。
カスタマイズしたい部分を子テーマで行うことで、親テーマ自体には手を加えるなくとも済むわけです。
したがって、親テーマがバージョンアップなどで更新されても、子テーマのカスタマイズ内容が残るので、親テーマのバージョンアップ時に「また最初からカスタマイズのやり直し」という事がなくなりますね。
子テーマを使ったカスタマイズは、難しい事はありません。私でも出来たことですから。
順を追って説明します。

子テーマのインストール手順

子テーマのインストールは以下の手順で行います。

  1. 親テーマのファイル名を確認
  2. サポートサイトサイトから子テーマをダウンロード
  3. ダウンロードした子テーマの中にある「style.css」を書き換え
  4. 「style.css」を戻してワードプレスのダッシュボードからインストール

(1)まずは、親テーマの名前を調べます。

新たに最新版の賢威のテーマをインストールする場合は、サポートサイトからダウンロードした時のファイル名です。

keni71_wp_standard_green_201803000000.zip

既に賢威をインストール済みの場合は、そのサイトを表示して右クリックから「ページのソースコードを表示(V)」を選択。
賢威7 の子テーマのインストール手順と使い方

ソースコードを表示している画面からファンクションキーのF3を押して「themes」と入力。
themesの文字がハイライトされますから、その後ろの文字が、ファイル名となっています。

このファイル名を後で使いますので、メモ帳などに保存しておいてください。

(2)賢威のサポートサイトから子テーマをダウンロードします。

(3)style.cssの記述を書き換えます。

ダウンロードしたを解凍して、style.cssをTeraPatなどのテキストエディタで開きます

ダウンロードした子テーマのファイル「keni7_child.zip」のstyle.cssを書き換えます。

style.cssの中のkeni7_wpを先程確認した親テーマの名前に書き換えて上書き保存します。

解凍したファイルを再び「keni7_child.zip」に戻します。

ここまでの流れ
ダウンロードした子テーマのファイル 「keni7_child.zip」 からstyle.cssを書き換えて「keni7_child.zip」に戻しています。

(4)style.cssを書き換えた子テーマ 「keni7_child.zip」 をインストール。

ワードプレスのダッシュボードから「外観」「テーマ」を選択。
新規追加で「keni7_child.zip」をアップロードして有効化します。

テーマを有効化するのは「子テーマ」の方です。また、親テーマは削除しないように。

テーマの確認

では実際に子テーマが働いているか確認してみましょう。

なにも手を加えてない時の見出し H2 タグは

テーマやサイトカラーによって違いますが、このようになっていると思います。(上はスタンダード版)

この H2 タグのスタイルは

親テーマの「base.css」に書かれています。

.main-body h2{
 margin: 60px 0 30px;
 padding: 10px 18px;
 background: #909090;
 color: #fff;
 font-size: 1.75em;
}

この部分をコピーして以下のように書き換えてみます。

.main-body h2{
 margin: 60px 0 30px;
 padding: 10px 18px;
 background: #000000;
 color: #fff;
 font-size: 1.0em;
}

変更点は2つ

background: #909090; を background: #000000;
font-size: 1.75em; を font-size: 1.0em;

バックグランドのカラーを#000000(黒)に、フォントサイズを1.75emから1.0emに変更してみます。

この書き換えたコードを子テーマのbase.cssにコピーして、ファイルを更新します。

見出しが以下のようになっていれば、子テーマが機能しているのが確認できます。

ここでおわかりだと思いますが、 h2 タグのスタイルは、親テーマにも子テーマにも記述があることになりますね。
ワードプレスでは、まず、親テーマのCSSを適用し、次に子テーマのCSSを適用します。親テーマと子テーマに同じ h2のスタイルの記述があれば、最後に読み込んだ方、つまり子テーマにかかれている h2 のスタイルを適用します。
親テーマの「base.css」でフォントサイズは1.75emと設定しいるのですが、次に子テーマの「base.css」を読み込むと、同じ h2 のスタイルの記述があったので「やっぱりフォントサイズは1.0emに設定しよう」というようになるわけですね。

これから、賢威をいろいろカスタマイズしていくと思いますが、その際は、子テーマを使ってカスタマイズしていく事をお勧めします。