このサイトのカスタマイズも大まかに終わり。
少しずつカスタマイズしたことの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はもう少しわかりやすくしてみました。
とっても見やすいです!
WordPress 準備編 子テーマはここまでです、次からはカスタマイズ毎にまとめていきます。