Twenty Tenテーマをカスタマイズするには2つの方法があります。
- 直にテーマファイルを変更する
- 子テーマをつくる
注意しなくてはいけないのは、WordPressのアップグレードのたびに
Twenty Tenテーマも上書きされてしまう事。
うっかりアップグレードのボタンを押しちゃったがために、
せっかくのカスタマイズがすべて水の泡、なんてことのないように、
「子テーマ」を作りましょう！
知ってる方はこの辺はどうぞスルーして下さいね。
「子テーマ」というのは
WordPress Codex「子テーマ」にあるように、
親のテーマを利用して、必要なとこだけ変えちゃいましょう、
というなんとも都合のいいテーマなんです。
まずは、wp-content＞themes に好きな名前で子テーマのフォルダを作ります。
そのなかは、最低限 「style.css」 があればOK。
この「style.css」の最初のコメント部分で
「私はTwenty Tenの子テーマですよ」
と宣言します。
@charset "utf-8";
/*
Theme Name: webourgeon
Theme URI: http: //example.com/
Description: Twenty Ten theme の子テーマ
Author: webourgeon
Author URI: http: //example.com/about/
Template: twentyten
Version: 0.1.0
*/
@import url('../twentyten/style.css');
#site-title a {
color: #009900;
}
- Theme Name (必須) 子テーマ名
- Theme URI (任意) 子テーマのウェブページ
- Description (任意) テーマの説明。
- Author URI (任意) 作者のウェブページ
- Author (任意) 作者の名前
- Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します
- Version (任意) 子テーマのバージョン。例: 0.1, 1.0, etc
とあるように、「テーマの名前」と「親テーマ」
だけ書いてあれば大丈夫。
「親テーマ」の書き方にも注意がありますが、今回はTwenty Tenの子テーマですので
「twentyten」と書くだけ。
そのあと12行目でTwenty TenのCSSを読み込んでいますが、
必要なければ、読み込まず、全く新しく書いていってもよいですが、
いきなりは大変なのでいったん読み込んで変更を加えていく方が楽です。
14行目からは上書きしていくCSSの例ですね。
1行目@charset “utf-8”;はCSSの中に日本語でコメントを書くときは入れておきましょう。
ここまでが子テーマを作る準備です。
ピンバック: 子テーマを作成して親テーマのバージョンアップの影響を受けないようにする | PLIME – tech
ピンバック: WordPressのテーマを自分で作ってみた | MUGA.me
ピンバック: WordPressで子テーマを作る 準備編 | MUGA.me
ご教授ありがとうございました。
お察しのとおり、ダッシュボード内で、スタイルｃｓｓなど、変更しています。
「子テーマ」は初耳でした。（恥）
ファビコンを作ったとき、レンタルサーバー（ロリポップ）にログインして、FTPにファビコンファイルをアップロードしました。
上記と同じく、サーバーのFTPから編集したほうがよい、ということでしょうか？
その中のwp-content＞themes の中に「子テーマ」をアップロードして、ダッシュボードで「有効化」する、ということでしょうか？
「子テーマ」を下記の要領で作りました。（まだデスクトップにあります）
フォルダ（kid)を作成→その中に、TeraPadを使ってスタイルＣＳＳの中身をそっくりコピー＆ペーストしました→
Theme Name: Kid
Template: twentyten（使用しているテンプレート名）
に編集して、「任意」のものは、全部削除しました。
上記のフォルダを、サーバーのFTPから、wp-content＞themes へアップロードして、ダッシュボードから「kid」を有効化する、という手順でよろしいのでしょうか？
その後、未編集のままのスタイルCSSをコピーしてきて、親テーマを元に戻しておくのでしょうか？ほっておいてもよいのでしょうか？
テンプレートをバージョンアップした場合、ダッシュボードからすでに編集してしまっている他の要素（ヘッダｐｈｐ、コメントｐｈｐ、など）は、どうしておけばよいのでしょうか？
お時間がございましたら、なにとぞご教授をお願い申し上げます。
追記
デスクトップに作成したフォルダは、フォルダ名kid、の中の、スタイルCSSをコピー＆ペーストして編集したファイルは、「stile.css」というファイル名にしてあります。
hanaさん、
子テーマについて少し詳しく書きました。どうでしょう？
変更したPHPは子テーマに移して、TwentyTenは一番初めの状態に戻しておくといいかもしれません。（FTPなどで操作してくださいね。
TwentyTenははじめの状態がなければダウンロードも出来ます。
詳しくご説明してくださり、どうもありがとうございました。
心から感謝いたします。
再度、ご教授をお願いいたします。
「子テーマ」の中のstyle.cssで、@import url(‘../twentyten/style.css’);を入れない方法についてです。
すでに編集してあるheader.php、comment.php、index.php、archive.phpの変更部分だけを子テーマ内に記述するのは、私にはまだ困難です。
現在使用している親テーマの名前を「kid」に変更し、新たに同じテーマをインストールして、もしもの時のために置いておく、のは不可能でしょうか？
もしくは、現在使用中の親テーマを、中身の各ファイルを含めて全部そっくりコピーして、フォルダ名（テーマ）を「kid」に変更して、ダッシュボードで有効化し、親テーマを一旦削除して、インストールしなおしておく、という方法は不可能でしょうか？
上記の方法が可能な場合は、フォルダ内のすべてのテーマ名も「kid」に変更するのでしょうか？
何度もコメントをしてたいへん申し訳ないのですが、
どうぞよろしくお願いいたします。
hanaさん
＞「子テーマ」の中のstyle.cssで、@import url(‘../twentyten/style.css’);を入れない方法についてです。 ＞すでに編集してあるheader.php、comment.php、index.php、archive.phpの変更部分だけを子テーマ内に記述するのは、私にはまだ困難です。
CSSとPHPがごっちゃになっていませんか？@import はCSSを読み込むというだけで、PHＰファイルとは全く無関係です。
子テーマのフォルダに、編集してあるPHPファイルをそのままコピーしていれれば大丈夫です。
CSSはどのようにデザインを変えたいのかわからないので、お好きな方法でなさってください。
この子テーマを使う方法がよくわからないのであれば、
＞現在使用している親テーマの名前を「kid」に変更し、新たに同じテーマをインストールして、もしもの時のために置いておく、
と、書いておられるようにTwenty Teｎそのものをフォルダごとコピーして名前を変えて（kidにこだわる必要はありません）編集するのでよいと思います。フォルダ名とTwenty Teｎのstyle.cssでテーマの名前をきめているところを書き換えれば、違うテーマとして機能します。
（この場合は子テーマではなくて、新しい別のテーマ、という考え方になります。）
理解の悪い自分を、ホトホト情けなく思います。（涙目
stile.cssは、フォント（メイリオ指定で、ゴシック）と、フォントサイズ（タイトル・本文など）を変更してあるだけですが、それさえ抜粋の記述ができません。
よって、stile.cssを、中身全部をコピーして、子テーマフォルダに保存し（必須事項2つのみ記述）、@import url(‘../twentyten/style.css’);は記述しないで、変更してあるphpファイルのみをコピーして、子テーマフォルダに入れる、でOKということでしょうか？
で、この方法は、他のテーマでも同様にできるのでしょうか？
どうぞよろしくお願いいたします。
hanaさん
その方法で大丈夫なはずです。
ただ、テーマによってはCSSファイルが複数あったり、複雑な作りをしているものも多いです。
カスタマイズなさるのでしたら、簡単なCSSが書けたり、テーマファイルの中身がなんとなくでも分かる様に
していかないと、この先思うように進めなくなるかもしれません。
ぜひ、CSSやHTMLについて、調べてみてください。世界が広がって楽しいですよ。
（あと、多分大丈夫だと思いますが、stile.cssではなくて、style.cssです。このファイル名が違うと認識してもらえませんので念のため。。）
ありがとうございました。
できました。
理解の悪い私に教えてくださり、どうもありがとうございました。
心から御礼申し上げます。
hanaさん、
よかったです♪
ぜひこれからもWordPress、楽しんでくださいね。
私も頑張ります^_^
はじめまして。
こちらのサイトにたどり着き大変助かっています。
そこでhanaさんが書かれてるのと重複するのですが教えて頂けますか。
TwentyTenのフォルダごと複製してフォルダ名を変更してcssやphpをカスタマイズしてオリジナルを作成した場合、
WordPressのアップグレードでカスタマイズが水の泡になってしまうのでしょうか？
フォルダ名が違うだけで中身はTwentyTenをカスタマイズしてるだけなので
アップグレードで水の泡になるんじゃないかと心配です。
初心者な質問で申し訳ありません。
どうぞよろしくお願いします。
こまごまさん
変えたのはTwentyTenというフォルダ名のみですか？
テーマのスタイルシートの冒頭にあるテーマについての記述部分は変えていますか？
ここの情報でテーマの名前がTwentyTenのままでは良くないと思います。
テーマの作成
Codexのこのページの「テーマスタイルシート」という部分を読んでみてください。
結論としては、もとのTwentyTenはそのまま置いておいて、
複製したテーマはフォルダ名とスタイルシートの中身を変えて新しいテーマとして
カスタマイズしていく、という状態が良いと思います。
webourgeonさん
お返事ありがとうございます。
「テーマの作成」拝見しました。
TwentyTenを複製・カスタマイズ（オリジナル制作）する場合はフォルダ名とスタイルシートの中身、
————–
/*
Theme Name: webourgeon
Theme URI: http: //example.com/
Description: Twenty Ten theme の子テーマ
Author: webourgeon
Author URI: http: //example.com/about/
Template: twentyten
Version: 0.1.0
*/
————–
部分を変更することが必須なのですね。
大変勉強になりました。
知らないままTwentyTenをカスタマイズしアップグレードで水の泡になるところでした。
本当にありがとうございました。
全くの素人ですが^^;WordPressが好きで、
サイトを少しでも自分の好みに、カスタマイズできたらと思っています。
twentyelevenに「子テーマ」を作るところまでは、参考にしてやれました。
cssでフォントとサイズ変更はできました。
ありがとうございます！
他のheader.phpやfunctions.phpファイルを使うときは、
twentyelevenからダウンロードしたものを、自分の子テーマにただアップロードするだけでいいのでしょうか。
それとも、style.cssの時にしたように
@import url(‘../twentyeleven/style.css’);のように記述した方がいいのですか。
単純にコピペだけで、ファイルを子テーマにおけばいいのですか。
前述のhanaさんが仰っていることと重複しているかもですが、
どうぞ、ご教示よろしくお願いします。
mayoさん
こんにちは
基本的にstyle.cssにきちんと記述して子テーマとして動いていれば、
後はそのフォルダに置いたものが自動的にテーマのファイルとして認識されます。
なければ親のテーマを見に行ってくれる、
という感じになります。
なので、親のテーマと変えたいものだけ、
子テーマの中に作ればいいと思いますよ。
うぇぶるじょんさま
早速のお返事ありがとうございます！
子テーマとして機能しているので、そのようにしてみます。
詳しい説明をご親切にありがとうございました♪
ピンバック: 初めてWordPressのインストール及び設定をして分かったこと | Research Note －デジタル調査備忘録－
ピンバック: WordPressの子テーマとやらを作ってみたった
ピンバック: 子テーマ作り、リンクターゲット指定、Backup | Design-ST.org