心はいつも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

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

  関連記事

パーフェクトRuby 2章Rubyの基礎 2-6 モジュール

p57 2-6 モジュール 2-6-1モジュールの定義式 モジュールはインスタン …

Eclipse CDTインストールでCould not find

さいたまスーパーアリーナで全スサノオ使い果たし力尽きてはや1ヶ月と1週間。世の中 …

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

9.4.2 destroyアクション、です。 テストを書く FactoryGir …

パーフェクトRuby 2章Rubyの基礎 2-5-5 クラスメソッド

p54 2-5-5 クラスメソッド インスタンスメソッドに対して、クラスに対して …

初めてのRuby2章「配列とハッシュ」

Railsだってgemの一種!ってことで、Rubyの文法からちゃんとやりたいです …

パーフェクトRuby 2章Rubyの基礎 2-3 条件分岐と真偽値

p50 2-3 条件分岐と真偽値 falseとnil以外は全部true p51 …

no image
WindowsのiTunesからMacのiTunesへのデータ移行

MacBookAir 2日め。なかなかMacにふみきれなかったのは、Window …

no image
rbenvとruby-buildのインストール

諸々のものをインストールしたら、次はHomebrewを使ってrbenvとruby …

パーフェクトRuby 2章Rubyの基礎 2-2 変数と定数

p47 2-2-1 ローカル変数 スコープは ・ブロック内 ・メソッド定義内 ・ …

rails gでのファイル名、クラス名、アクション名

rails gすると、コントローラーとアクションができますが、 その書き方とファ …