work.log

元エンジニアの備忘録的ブログ

TwentyTwelveの子テーマを作成してカスタマイズの準備をする

投稿:2013-04-19 17:42  更新:

TwentyTwelveのカスタマイズ準備

WordPressのTwentyTwelveカスタマイズを行う前の準備として「子テーマ」を作成します。

ネット上を調べるとWordPressのカスタマイズは子テーマを作成するのが定石のようです

WordPressの公式ドキュメントによると子テーマとはこういうものらしいです。

※下記は抜粋

WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。

さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。

このような理由で、使用しているテーマをカスタマイズする方法として子テーマをおすすめします。

色々書いていますが元のテーマは触るな、子テーマで必要な箇所だけカスタマイズしろよということらしいです。

TwentyTwelveの子テーマを作成

まずは、子テーマディレクトリの作成と親テーマからスタイルシートをコピーします。

# cd htdocs/wp-content/themes
# mkdir twentytwelve-child
# cd twentytwelve-child/
# cp ../twentytwelve/style.css .
# vi style.css

次にスタイルシートの一部を書き換えます。

コピーしたスタイルシートの1 – 15行目を削除し、下記に置き換えます。

/*
Theme Name: Twenty Twelve Child Theme
Theme URI: https://worklog.be/
Author: miura
Author URI: https://worklog.be/
Description: Child theme for the Twenty Twelve theme for WordPress
Template: twentytwelve
Version: 0.0.1
*/

子テーマに記載する内容

※公式ドキュメントより下記へ転載。

Theme Name (必須) 子テーマ名
Theme URI (任意) 子テーマのウェブページ
Description (任意) テーマの説明
Author URI (任意) 作者のウェブページ
Author (任意) 作者の名前
Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します
Version (任意) 子テーマのバージョン

“@import url(‘../twentytwelve/style.css’);” で親のスタイルシートを継承できるので、必要な所だけを書き換えて使うのが正解だと思うのですが、エンジニアでも専門が違う自分にはそこまでスタイルシートの知識はありません。

とりあえずそのままコピーして書き換えていきます。全部終わったら差分だけを抜き出せばいいかな。

TwentyTwelveの子テーマを反映

WordPress管理画面の外観を開きます。

TwentyTwelve_子テーマの作成

子テーマとしてちゃんと認識してるので早速適用して動作確認をします。

当たり前ですけど何もしていないのとほぼ同じなので見た目はまだ変わりません。とりあえず、正常に表示されていればOKでしょう。

TwentyTwelveカスタマイズの準備はこれで以上です。

おすすめのVPSサーバ

  • OSが選べる
  • VPS同士でLANが組める
  • 複数台構成向き

このブログで使っています。

  • 転送量が多いサービスに
  • 借りてるのは3年間一度もdown無し!

よく見られている記事

  • 本日
  • 週間
  • 月間