ネットで稼ぐ!主婦でも稼げるインターネットビジネス・アフィリエイトで収入アップに挑戦する主婦きらら(kirara)の奮闘&備忘録

「わっ崩れた!」とならないためにワードプレスの子テーマを作っておく方法

作成済みのワードプレス(Wordpress)のサイトが「わっ!崩れた!」とならないために、テーマをカスタマイズする時に前もって子テーマを作っておく方法を備忘録として書いておきます。特にワードプレスに元々入っているテーマはバージョンアップすると直(じか)にCSSをいじってると上書きされて崩れてしまう恐れがあるようなので子テーマを作っておけばそちらが参照されたままになるので安心なようです。

ワードプレスがバージョンアップされるとデフォルトで入っている「Twenty Fourteen」とか「Twenty Twelve」とかも一緒に更新される場合もあるようで、その時にそのテーマを使っていて直接スタイルシート(Style.css)などをいじってカスタマイズしてると更新の度に上書きされるのでせっかくカスタマイズしたものが知らないうちに崩れてしまうらしいです。
(知らなかった汗)

それを知らないで直にCSSを書き換えちゃったので今回子テーマ作りに初挑戦。

すぐにバックアップをとっててすぐに書き換えればいいのでしょうが
気づかないうちにバージョンアップされてることがあるし「子テーマ」を作っておくとバージョンアップしても関係ないので安心ですね。

CSSとかほとんどわからないのでめったにカスタマイズもしないのですが
今回初めてワードプレスで新しいサイトを作った時にデフォルトのテーマ「Twenty Twelve」を使ってみたのでいい機会と思って「子テーマ」を作ってみました。

次やるときの参考と忘れないように手順をここにも書いておきます。

ワードプレスの子テーマの作り方【スタイルシート(CSS)】

とりあえず今回は自分がCSSだけいじったのでその「スタイルシート(Style.css)」の子テーマを作ったのでそのやり方です。

なにやら難しいそうと思っていたのですがやってみたら案外簡単でした。

 


1.子テーマ用のフォルダ(ディレクトリ)を作る。

使用しているテーマと同じ階層に子テーマのフォルダを作ります。
私は子テーマということで「child」という名のフォルダを作りました。
FFFTP上ではこんな感じ。(デフォルトの他のテーマが入った状態)

 

ワードプレス子テーマの作り方02

 

2.子テーマ(child)の中にスタイルシート(Style.css)を作る。

作った子テーマのフォルダの中に「Style.css」でスタイルシートをひとつ作って、それにテーマの親子関係を認識させる記述をする。

※今回私は親テーマは「Twenty Twelve」なのでスタイルシートに/*と*/の間に以下の2行を記述しました。

Theme Name: Child
Template: twentytwelve 

ワードプレス子テーマの作り方03

 

3.ワードプレスの管理画面で子テーマを有効化させる

記述したスタイルシートがサーバーにアップできたら、
ワードプレスの管理画面の「外観」⇒「テーマ」へいくと子テーマの「child」が追加されているので有効化する。

 

ワードプレス子テーマの作り方01

 

4.子テーマのスタイルシートに親テーマのcssを書き込む。

3.の段階では子テーマのスタイルシート(Style.css)には何も書かれていない状態なので
今の段階でみるとまったくCSSが何もない状態で崩れていると思います。

私は今回子テーマを作るまえにデフォルトのテーマのCSSを時下にカスタマイズしてしまっていたので
それをコピペしたのですが

デフォルトのCSSをコピペしてその後カスタマイズしてもいいでしょうが以下の記述を子テーマにすると、親テーマのCSSをインポートしてくれるようです。
「@import url('../twentytwelve/style.css');」を追記する。

ワードプレスの子テーマの作り方05

 

そしてカスタマイズしたいところだけ記述をし直せばいけばいいわけです。
もし記事タイトルの文字の大きさだけ変えたいならデフォルトの記述(クラス)を確認して上のように書き足せばいいのかな。

これで子テーマが参照されるのでもし親テーマのバージョンアップがあっても、「わっ!崩れた!」と焦ることもないですね。

デフォルトのテーマでなくてもバージョンアップがありそうだったり
色々をカスタマイズするときにはまずは子テーマを作っておくと安心かもしれないです。

 

今回私はTwentyTwelveのテーマを少しだけカスタマイズして
記事タイトルとかh2やh3とかに画像を使いたかったので初挑戦しました。
それもまた忘れそうなので別に書くとします。

 

Pocket
LINEで送る

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。


■RSS購読
follow us in feedly

■Profile
主婦きらら(kirara)サイト運営者:きらら
ご訪問ありがとうございます。
アフィリエイト運営備忘録です。
プロィール詳細はこちら

■受講中アフィリエイト通信講座



■ツイッター




利用中WPテーマ

WordPressテーマ「BlogPress (TCD010)」

WordPressテーマ「Opinion (tcd018)」