WordPressカスタマイズ(準備編)子テーマを準備する

Google+ Pinterest LinkedIn Tumblr +

このサイトのカスタマイズも大まかに終わり。
少しずつカスタマイズしたことのLOGを書いていこうと思います。

カスタマイズ準備 子テーマ

wordpressのテーマのカスタマイズもUPデートを考えると子テーマという方法が良いでしょう。

詳細はWordPress Codex をご覧いただきたいとおもいます。

先ず新規に必ず作成するものとしては、style.css

内容はこのようなもの

/*
Theme Name:     Kid
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Ten theme for WordPress
Author:         Demetris
Author URI:     http: //example.com/about/
Template:       twentyten
Version:        0.1.0
*/
  • Theme Name (必須) 子テーマ
  • Theme URI (任意) 子テーマのウェブページ
  • Description (任意) テーマの説明。例: わたしの最初の子テーマ。ワーイ!
  • Author URI (任意) 作者のウェブページ
  • Author (任意) 作者の名前
  • Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します
  • Version (任意) 子テーマのバージョン。例: 0.1, 1.0, etc

——-WordPress Codex より転記——-

今回は既存のテーマの子テーマなので最低限必要な項目は

子テーマ名(任意名) Theme Name: と 親のテンプレート名 Template: のみ。

可能であれば埋めておいて良いと思います。

ちなみにこのサイトのは以下のように書いています。

/*
Theme Name: Twenty Twelve Child Theme at Yoshiara
Theme URI: https://beam.co.jp/themes/twentytwelve-child
Author: Mitsuru Yoshihara
Author URI: https://beam.co.jp/
Description: Child theme for the Twenty Twelve theme for WordPress
Template: twentytwelve
Version: 0.0.2
*/

公式や他のBLOGなどには書いてあるstyle.css への次の1文 TwentyTwelveの子テーマとして

@import url('../twentyten/style.css');

これで、親のstyle.css に書いてあるCSS要素を継承しています。

ですので、ここに例えばサイトのタイトルの色を変えたいのであれば

#site-title a {
    color: #009900;
}

などと書いていきます。

CSSは親テーマにある要素を上書きしてくれるので、親テーマの方を修正しなくても問題ありません。

ただし、以前書いた記事のようにレシポンシブデザインであるTwentyTwelveの@media screenでかなり苦労したので、まるっと親から子へコピーして必要箇所を書き替えました。

必要なものは、子テーマの名前のフォルダと中身は作成(修正)したstyle.cssのみ

これをFTPソフトで、インストールディレクトリ/wp-content/themes/以下に転送すれば管理画面のテーマの選択に表示されるので、有効化すると作業は終了です。

style.css に追加で何も書いていなければ、TwentyTwelveとまったく同じ表示がされます。

ここまでが最低限必要なカスタマイズの準備になります。

* ディレクトリをFTPして作っただけではサムネイルがありません。

子テーマスクリーンショットなし

これだと直観的にわからないので、子テーマフォルダの中にscreenshot.pngというファイルを置くと画像が表示されます。

子テーマスクリーンショットあり

これだと迷いませんね。特に名前にTwentyTwelve Child なんて付けると。
(私だけかもしれませんが。・・・笑)

今のんびりすすめているtwentythirteenのscreenshot.pngはもう少しわかりやすくしてみました。

とっても見やすいです!

TwentyThirteen-screenshot

WordPress 準備編 子テーマはここまでです、次からはカスタマイズ毎にまとめていきます。

Share.

Comments are closed.