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

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

  関連記事

Provisioning fileが作成できない!

iPhoneアプリを公開するために、itunes connectでProvisi …

iPadのiBooksで自炊とかしたPDFの電子書籍を読む

手順覚えないのでブログに書きます。 Bookscan使用して手持ちPDF電子書籍 …

初めてのRuby8章 8.4特異メソッドと特異クラス

特異メソッドと特異クラス プログラムなんて、クラスの継承だけで書けてしまうのが良 …

no image
Mac OS Xでftp × Cyberduck

WordPressにプラグインを入れたくてダウンロードしてきました。 そういえば …

no image
Google Appsで問い合わせフォームを作りました

とっても簡単でした。Google Appsでこのブログに問い合わせフォームを設置 …

MacBookAirの容量が足りない

当ブログairpucciで人気なのがMacBookAirに関するエントリ。ありが …

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

9.1.2編集の失敗、です。 テストを書きます リスト9.9 ユーザーupdat …

no image
accepts_nested_attributes_for

everydayRailsやっていて、 phoneモデルのテストのところで ac …

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

6.2.1最初のユーザーテストです。ユーザーモデルをrails g modelで …

文字化けもするし、、

自作テンプレ作ったはいいですが、問題が、、。 関連しそうな記事 iTunesをM …