子テーマを作り、デザインを維持

子テーマは、基本的に親となるテーマが存在し、それをアレンジする際に今後のバージョンアップに対応できるようにするためのテーマです。
たとえば、バーの色や背景の仕様を変更した際、元のテーマがバージョンアップする際にまったく同じ仕様でバージョンアップするのであれば、変更箇所を同じように更新することにより、デザインの維持は可能ですが、少しでも仕様が変わった時には親テーマのファイル構成や内容を確認して、どこをどのように修正するかを探さなければなりません。
バージョンアップが頻繁におこなわれるテーマを使用している場合、子テーマをつくることによりこの問題を解決することが可能です。

今回カスタマイズするbiz-vektorも、子テーマを用意することで色や背景など自由にカスタマイズが可能だと思いますので、子テーマを使って変更していきます。

子テーマを置くディレクトリ

wp_content/themes/biz-bektor

この、biz-vektor と同じディレクトリにフォルダを設置します。
フォルダ名は何でもOK

子テーマのファイル構成

1)スタイルシートのファイル
子テーマとして存在させるには、親テーマから変更した内容を記述したファイルが必要で、親となるテーマと同じファイル構成をすべて用意することも可能ですが、デザイン面での変更のみであれば、.cssファイルがあれば子テーマとして成り立つと思います。
2)テーマ選択の際の画像
テーマを選択する際には(子テーマも通常のテーマと同様に選択します。)画面があったほうがわかりやすいと思います。
なくても構いませんが、作っておいた方がわかりやすいと思いますのでお勧めします。
任意の画像で、サイズは500×375pxぐらい、ファイル名はscreenshot.png で、スタイルシートを入れるフォルダと同じところに保存します。

子テーマ cssファイルの作成

biz-vektorの子テーマは、ファイル名を「style.css」で作成します。
記載に必要な内容は以下の通り

/* ———————
Theme Name: 子テーマ名(必須)
Theme URL: 子テーマWEBページ
Description: 子テーマ説明
Auther URL: 作者のWEBページ
Auther: 作者名
Template: 親テーマ名(必須)
Version: 子テーマバージョン
———————— */
必須以外の所は書かなくてもOK
ただし、ソースを表示するとこちらのスタイルシートファイルは閲覧可能ですので、最低限必要な情報を記載しておく方がいいと思います。

上記記載の後、一番最初の行に親テーマのスタイルシートのありかを記載します。
Biz-vektorの場合だと以下のようになります。

@import url(‘../biz-vektor/style.css’);
(別のテーマを親とする場合は、そのテーマのメインのスタイルシートファイルのありかを設定します。)

@charset “utf-8”;
エンコードの指定です。Wordpressの時はutf-8を指定します。

これ以降は、デザインをカスタマイズしたスタイルを作成します。

画像ファイルをアップロード
ファイル名は screenshot.png
画像はこちらをお使いください
sakura01_b

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL