心はいつもAirPucci (空元気でもいいから)

毎日がPucciを着ているような気分

WordPress子テーマの作り方

      2013/09/30


デザイン変更したairpucci、TwentyTwelveというWordPress付属のテーマ(デザイン)に”子テーマ”という方法で変更を加え、数時間で作成したのは先日お伝えしたとおりです。

初めて子テーマ作成してみました。今まで食わず嫌いでした。便利なうえにわかりやすい(メンテしやすそう)です。

作り方は簡単、わずか3ステップです。

1.WordPressのテーマが入っているディレクトリ(/wordpressのディレクトリ/wp-content/themes/ここ)に子テーマ用のフォルダを作成します。
私は 12child にしました(/wordpressのディレクトリ/wp-content/themes/12child)。

スクリーンショット 2013-07-16 21.31.28

2.作成した子テーマ用フォルダの中に、style.cssという名のファイルを作成します。作成したstyle.cssの中身は以下のように記述します。

/*
Theme Name: 子テーマのお名前をお好きにどうぞ
Template: twentytwelve
Author: あなたのおなまえを書くとか
Description: 子テーマの説明をお好きにどうぞ
Version: おすきなバージョンを数字で
*/

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

この続きに、TwentyTwelveから変更したいcssを記述します。変更がなければ以上で終了。

3.変更したいデザインがあるphpファイルをtwentytwelveから、子テーマ用のフォルダにコピーします。コピーしたファイルを好きなデザインにエディットします。ファイル全部コピーする必要はなく、変更かけたいものだけでいいので、自分がカスタマイズした部分がわかりやすくなります。
スクリーンショット 2013-07-16 21.49.03

私は、comments.phpとsidebar.phpを変更しました。どちらもバナーを設置しただけです。
それ以外のファイルは親テーマであるtwentytwelveのを読み込んでくれます。

以上、終了。
文字の色変更は、コンパネの”外観”から変更できます。

あー簡単だった。スクラッチでwordpressのテーマ作るの、もう面倒なので、子テーマはおおいにありだと思いました。

追記。
WordPress親テーマversion upに伴う、子テーマのバージョンアップ作業ってのも書きました。

 - テクニカル ,

Comment

  1. […] WordPress子テーマの作り方で書いた通り、airpucciの現在のテーマは、TwetyTwelveの子テーマとして作っています(とはいってもバナー設置しただけ)。 […]

  2. […] 僕が参考にしたのはこれらのサイトですρ(^^ )ノ ⇒心はいつもAirPucci (空元気でもいいから)  アフィリエイト作業ノート ゆとり世代のブログ運営論 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

WordPressのテンプレートを自分で作ってみました

ブログ更新は久々になりました。この2週間、ずっとこのブログ用にWordPress …

no image
RailsTutorial4.0を高速で復習する。4.6章。

4.6演習、です。4章がRubyの説明章だったので演習はRuby問題になっていま …

no image
RailsTutorial4.0を高速で復習する。5.4章。

5.4ユーザー登録: 最初のステップ、です。ようやく開発っぽくなってきます。 5 …

no image
RailsTutorial4.0を高速で復習する。5.3.4章。

5.3.4RSpecを洗練させる、です。 確かに、名前付きルートに書き換えていて …

no image
Ruby on Railsのインストール

Rubyのアップデートが終わったので、いよいよRailsをインストールします。 …

パーフェクトRuby 1章Rubyの概要

メタプログラミングRubyもいいのですが、余計な物語仕立てがどうも性に合わず、消 …

no image
RailsTutorial4.0を高速で復習する。3.5章。最後の問題。

3.5演習、3もんめ、最後の問題です。 3.(上級者向け)「Heroku pag …

no image
サイドバーの幅を決めたい(Googleアドセンス編)

サーバー移転したままブログが放置状態になっています。 その間も検索エンジン経由で …

no image
iPad vs. VAIO P 持ち歩き編。

旅に出かけるときはケーブルと一緒です。ドコモ携帯、VAIO P、iPhone、W …

教育のためならば、iPadアプリ料金なんて青天井ですわ

今年4月、USでのiPad発売。姪の中学入学祝いにちょうどいいなと思っていたら日 …