たかな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]

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


たかなblogでは、これをまとめてほしい!という疑問を募集しております。
気になったもの、多かったものを記事にしていく形になるかとは思いますが、何かを探すとき、ネットから色々情報を拾って整理するのって、自分でやると意外と時間がかかるんですよね。

そういったものを探すお手伝いが出来ればと思っています。
ご希望があれば是非お気軽にコメント欄へ!
コメントは基本、私が承認すると表示される仕様になっているため(スパム防止)、コメントを送信したのに表示されるのに2、3日かかる、ということもございます。
確認次第公開していきますのでお待ちください。

それではまた。

-Wordpress

おすすめ記事

1
12月目前!クリスマスグッズ、どんなものに関心が集まっているの?

今回気になってまとめてみたのは、「クリスマスの人々の関心」について。 昨年(20 ...

2
年賀状印刷、業者に委託してでオシャレに?自宅で徹底的にこだわる?

年賀状作成は、プロにお願いする時代!? 年賀状のテンプレートが簡単に手に入るよう ...

3
ハロウィン、クリスマスに!とにかく可愛いコスプレ子供服【最新版】

ハロウィンも終わり、クリスマスが楽しみな季節になりました! これからクリスマスパ ...