Twenty Eleven 編集(1)子テーマ作成


WordPressを使い始めて数週間。
とは言ってもあんまりいじってはいないのだけれど、とりあえずCSSを勉強して少しはいじり方が分かってきた。そこで、デフォルトのテーマでもあるTwenty Elevenを編集する手順の備忘録

0013

 Twenty ElevenというテーマはWordPressに最初から入ってるテーマなんだけど、シンプルだけどどこかおしゃれなそんな感じのテーマ。もちろん、そのままでも十分なんだけど、ちょっとここだけいじりたいなあとか、これはいらないなあとか、微妙な修正はしたいところ。

ただそれを変更するにはCSSファイルを修正したり付け加えたりしなきゃいけないわけで、ググってサイトを見つけては言われたとおりCSSに書き足して変更をチェック。みたいなことをしてた。ただ、これだとどこを修正したか忘れちゃうし、そもそもテーマ自体がアップデートした際、消えてしまう恐れもある。と言うことで「子テーマ」というのを使って修正することにしてみました。


子テーマとは

テーマにはstyle.cssというファイルがあって、直接編集もできるんだけど、上記の理由から直接編集するのはあんまりよくないらしい。ということで「子テーマ」というのを用意し、必要な部分だけ加筆することでテーマを編集するという方法がおすすめらしいー。

WordPressのテーマはwp-content/themes/内に保存されTwenty Elevenなら「twentyeleven」ってフォルダに入ってる。中を見れば分かると思うけど、phpだのcssだのファイルがいっぱい。その中にあるstyle.cssがデザインの核とも言えるファイル。子テーマというのはこのstyle.cssを別に作り、そこに変えたい項目だけを書き足すことで、デザインなどを変更することができちゃうのです。

こうすることで自分が変更した部分が分かりやすくなり、万が一変な風にいじっちゃっても、簡単に戻すことができるのが最大のメリット。
前置きはこんな感じ。次に実際子テーマというのを作ってみましょう。


子テーマを作る

子テーマを作るのはいたって簡単。wp-content/themes/内に適当なフォルダを作り、その中にstyle.cssを入れるだけ。今回はTwenty Elevenの子テーマを作るので、とりあえず「twentyeleven_sub」というフォルダにstyle.cssを入れることにした。フォルダへはFTP接続ソフトでアクセスすればOK。


0014

んで、この中にstyle.cssを入れればOKなんだけど、style.cssには最低限記述しておきたいことがあるので、それを付け加えておきましょう。

@charset "UTF-8"; /*
Theme Name: Twenty Eleven arrange
Theme URI: http://webourgeon.com/
Description: Twenty Elevenの子テーマ
Author: sdora
Template: twentyeleven
Version: 1.0
*/
@import url('../twentyeleven/style.css');



@import urlの記述で元のデザインは親テーマ(Twenty Eleven)から引き出しているので、あとは変更したいカ所だけを加筆するだけでOKという準備が整いました。
/*〜*/で囲まれている部分はテーマの情報です。自分が分かりやすいように付け加えてください。ただしTemplateの部分はしっかりと親テーマを指定してあげてください。ここでは「twentyeleven」となっているのが分かるかと思います。


親テーマの設定に注意

一点だけ注意があります。もし以前にTwenty Elevenのヘッダーのテキストを非表示にしている場合は、表示するにチェックを入れ直してください。そうしないと、子テーマを設定したとき、親テーマのcssをうまく読み込んでくれず、レイアウトがおかしくなってしまいます。

0015

次回は実際にテーマを変更していきたいと思います。

Related Posts Plugin for WordPress, Blogger...
投稿日: 作成者: カテゴリー: CSS, Twenty Eleven, WordPress

コメントを残す

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