たかなblog

のんびりと色んな情報を発信していきます。

Wordpress

WordPressのテーマ編集について(子テーマ作成)

2017/01/12

新テーマ、Twenty Thirteenがリリースされたので、早速使用してみています。
デザイン派手だなぁ。

さて、新テーマに更新するにあたって、この派手派手テーマをカスタマイズする人も多いと思うんですよね。
ってことで、Wordpressのデフォルトテーマをカスタマイズする際に重要な、子テーマについての事を記事にしたいと思います。

テーマ編集についての基本知識

ど素人丸出しの私が改めて記事にするまでもなく、子テーマについては既にたくさんのブロガーさんが取り上げていると思います。
その中でも、初めてカスタマイズに挑戦する方でもわかりやすく書かれているブログをいくつかご紹介します。

●テーマについてのアレコレ
Webデザインレシピ
WordPressのオリジナルテーマを作るためのファーストステップ

WordPressのオリジナルテーマを作るためのファーストステップ

●子テーマの作り方
Webourgeon
子テーマやカスタマイズの基本の基本についてちょっとおさらいしてみる
http://webourgeon.com/2012/01/30/basics-of-the-child-theme/

テーマを編集するときは、直接編集するのではなく、なるべく子テーマを作ること。
functions.phpは特殊なので、編集するときは必ずバックアップ&既存のfunctions.phpに同名の関数がないか確認すること。

などはしっかり押さえて挑みましょう。

完全オリジナルテーマを作りたいから、子テーマづくりは遠回り?

WordPressでWebサイトを作り始めたばかりの頃、何故か「子テーマ」が嫌で、元のオリジナルテーマをコピーし、フォルダ名を変え、
style.cssのTheme Name:部分を書き換えて自分のオリジナルテーマwwとしてカスタマイズを加えていました。
一からテーマを作り上げる技量はなかったし、ソースコードに他人の名前が入っているのが嫌だったんですよね。

style.cssのTheme Name:を書き換えていればオリジナルの方がバージョンアップしようと関係ないので、上書きされることもないです。
かわりにバージョンアップによるセキュリティ強化などの恩恵も一切受けられないわけですが。

でも、全部のファイルに別の作者の名前が入っているし、それ全部書き換えちゃったとして、それって利用規約的にどうなの?とか
色々考えることがあって結局子テーマに切り出しました。
それなら最初から子テーマ作っときゃよかったよ。。。

子テーマで新たに作成したファイルはちゃんと「作成者は私!」と胸を張れるし、
フロントページとか必要な部分を子テーマに切り出ししているから、Wordpressが新しいデフォルトテーマをリリースした時にstyle.cssの
Theme Name:を書き換えるだけで乗り換えられちゃうし、色々こだわって子テーマでほとんど上書きされちゃうくらいになったら、
Theme Name:部分を削除して本当に完全オリジナルの自分のテーマにしちゃえばいいんだし。

私のような素人ほど、まずは子テーマから入るべきだよなぁ、と実感。
完全オリジナルで、一からテーマを作る!ことにこだわるのは悪いことじゃないと思いますが、まずは肩の力を抜いて、子テーマ作りから始めてみることをおすすめします。

Twenty Thirteenをテンプレートにした子テーマを作成してみる

今更ですが本題。
私の場合、以下の手順で勧めました。

①まず、ローカルのPC上で、作りたい子テーマ名のフォルダを作成します。
私はこのブログ用テーマ、「takanablog」を作成。
takanafolda

②フォルダの中に、style.cssを作成。

style.css

スタイルシートの内容は全て引き継いだ状態で子テーマを作成したいので、style.cssには以下を記載します。

[css]
/*
Theme Name: takanablog
Template: twentythirteen
Theme URI: http://takanablog.tank.jp/
Description: 当サイト用にカスタマイズした子テーマ。
Author: 辛子高菜
Author URI: http://takanablog.tank.jp/
*/

@import url('../twentythirteen/style.css');
[/css]

③作成したstyle.cssを作成したフォルダごと/wp-content/themesへアップロード。

④管理画面の外観>テーマに、子テーマ「takanablog」が追加されています。
preview

子テーマのカスタマイズ

cssで設定してあるデザインは、そのままcssに上書きして変更出来ます。
それ以外のテンプレートファイルも同じです。但し、functions.phpの編集には注意が必要ですので、functions.phpを編集して機能を拡張する場合は、親テーマに同じ名前の関数がないか?などを必ず確認してくださいね。

とりあえず当サイトではフォントを変更。CSSに以下を追加しました。

[css firstline="14"]
/* フォント */
html, button, input, select, textarea,
.site-description,
h1, h2, h3, h4, h5, h6,
.widget .widget-title
{
font-family: Helvetica,Arial,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ",sans-serif;
}
[/css]

子テーマは自分がどこを変更したかもわかりやすく、カスタマイズするときも親テーマを触るわけではないので、色々チャレンジ出来ます。
すごーくオススメなので、是非ともチャレンジしてみてください。

-Wordpress

おすすめ記事

1
母の日のプレゼントに!2017年最新お取り寄せグルメ一覧

こんにちは!毎年この時期になると、「母の日 プレゼント」や「母の日 贈り物 花以 ...

2
2016年 母の日にどうぞ!楽天レビュー数10000以上、評価4以上のお取り寄せグルメ一覧

今回は「日々の贅沢」「贈り物」の参考としていただくため、健康食品や1kgで100 ...