WordPressの子テーマを自作する方法と「Twenty Ten」をカスタマイズ

仕事で公式テーマ「Twenty Ten」をいじらなくてはならなくなり、とりあえずテストページにダウンロードしてみたら、装飾のための機能が一切ついてない(のは分かってた、知ってたけれど改めて見ると悲しくて笑う)どころか子テーマすらないという……。

けれども、これがWordpressの一番シンプルな姿。

cssで色々やり始めたら楽しくてハマる。

で、どうせなら子テーマをきちんと作って、そっちでやろうと作成してみました。

Twenty Ten

「Twenty Ten」に子テーマを作ってカスタマイズ

そもそも子テーマとは。

…という話は以前から度々書いているけれど、テーマその物をカスタマイズしてしまうと、テーマが更新される度に書いたものが消えてしまい、再び書き直さなくてはならなくなる。

しかし、子テーマをUPしてそれをカスタマイズしておけば、書いたものは更新があってもそのまま残る。

カスタマイズはテーマに上書きされるけれども、更新された機能はきちんと反映される。それが子テーマ。素晴らしい

ちなみに、「THE THOR」には「the-thor-child」、「Cooon」には「cocoon-child-master」、「STORK」には「jstork_custom」など、製作者さまがセットでダウンロードできるようにして下さっているので、わざわざ作る必要はありません。
では実際に作っていきましょう。とても簡単です。

「themes」フォルダ内に子テーマフォルダを作る

1.ファイルマネージャーにアクセスして、「public_html」→「wp-content」→「themes」と開きます。

2.「themes」階層の中に子テーマフォルダを作ります。

3.名前は何でもいいのです。ここでは「twentyten-child」にしておきますね。

4.フォルダ名を入れて「フォルダを作成」を押せば、今まで無かった子テーマフォルダが出現。

Wordpressに子テーマを自作する

5.クリックして開きます。

 

作ったばかりなので、当然、何のファイルもありません。

子テーマフォルダ内に style.css を作る

ここに「style.css」をUPします。

実は、子テーマのファイルは「style.css」だけでいいのです。

何でもいいのでエディタを開いて以下のコードを書きます。

「メモ帳」は止めた方がいいです。
@charset "utf-8";@import url('../twentyten/style.css');

実際には、

@charset "utf-8";#site-generator{display: none;}

見出しを作る。

とりあえずH2とH3だけ。

.entry-content h2 {border-left: 15px solid #556b2f;border-bottom: 1px solid #556b2f;padding: 0 0 0 15px ;line-height: 2;font-size: 18px;background-color: #fff;}.entry-content h3 {border-left: 5px solid #556b2f;border-bottom: 1px solid #556b2f;padding: 0 0 0 15px ;line-height: 2;font-size: 18px;background-color: #fff;}

サイドバーに見出し

#primary .widget-area .widget-title{border-left: 5px solid #556b2f;}

投稿記事下の投稿者情報を削除

何の装飾もないのに、なぜか記事下に「この記事を書いた人」みたいな著作者情報だけはアイコン付きでガッツリ出してくれる「Twenty Ten」。

このサイトでは、これは必要ないので……。

#entry-author-info{display: none;}

 

Twenty Tenカスタマイズ

 

フォントも変えたいですね。そもそも字が小さすぎませんか。つづく↓

装飾がほとんどないからこそCSSの勉強になる「Twenty Ten」 カスタマイズまとめ

 

サポートよろしくお願いします

 

いつもありがとうございます。この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。


Amazonギフト券- Eメールタイプ – Amazonベーシック


金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。

※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

 

 

 

よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』