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

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

  関連記事

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

10.3.2マイクロポストを作成する、です。 テストを書く micropostの …

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

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

確定申告終わったぁ〜MoneyForwardのおかげです

確定申告終わりました。青色で申請しているので決算書必要なのですが、昨年から使い始 …

OpneSSL,Readline,Libyamlをインストールする

先ほどインストールしたHomebrewを使って、rbenvをインストールしたいと …

no image
電子雑誌を買いました

GWの計画を立てているとき、行きたい場所を検索をすると、HANAKO WESTの …

no image
「Follow me」バッジのつけ方。

ブログの横についている「Follow me」バッジ。いろんな方がつけているのを見 …

no image
iPhoneの月請求は8円のみです。

昨年11月に、e-mobileからiPhoneにMNPしました。 ちょうど、乗り …

RailsTutorial4.0を高速で復習する。11章。

第11章ユーザーをフォローする、です。ようやく最終章。1週間でできるつもりが3週 …

no image
future vision 2019 vs 2010

マイクロソフトのfuture visonが話題らしい。 2019年の近未来。 情 …

40秒も待てない。

自由が丘のカフェでこれ書きました。Table Modern Service、食べ …