たかなblog

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

Wordpress

Twenty Fourteenの子テーマを作成する

新デフォルトテーマこと「Twenty Fourteen」がリリースされていますが、今更子テーマを作ってみることにしました。

子テーマとは?

WordPressはテーマを、外観>テーマ編集から自由にいじり倒すことができますが、「Twenty Fourteen」のような公式テーマだと、バージョンアップがありますよね。
セキュリティ面でのバージョンアップがほとんどだと思うのですが、直接テーマを改造していると、バージョンアップによって今まで加えた変更が全て上書きされてしまいます

それを回避するために、Wordpressでは「子テーマ」という仕組みが用意されています。

基本的なデザインや機能は親テーマなんだけど、デザイン等変更したいところがあれば、それは「子テーマ」に記載する。
変更した部分だけ「子テーマ」にまとまっているから、自分が何をどう変更したかわかりやすく管理しやすい。
また、バージョンアップで上書きされるのは親テーマのみなので、自分が変更した部分はちゃんと残っている。

テーマのバージョンアップはほとんどが不具合の修正です。親テーマの最新バージョンが出るたびに自分でその部分を修正できる技量と時間がある人はまずいないと思うので、テーマを編集する場合は子テーマを作る癖を付けてください。

 

子テーマのつくり方

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

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

style.css

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

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

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

どのテーマを親テーマにするかは、以下の部分で設定しています。
別のテーマを親にしたい場合はここを書き換えてください。

[css]Template:twentyfourteen[/css]

スタイルシートの内容を引き継がず全て自分で設定したい場合は

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

部分を削除してください。
初めは元のスタイルシートを引き継いだ上で部分部分上書きしていくことをおすすめします。

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

④管理画面の外観>テーマに、子テーマ「takanablog」が追加されています。
有効化し、子テーマのCSSなどを色々カスタマイズしてみてください!

preview2

 スクリーンショットを設定してみる

テーマ一覧にスクリーンショット(トップ画面のキャプチャ)が並んでいますが、子テーマだけ灰色だとなんだか味気ないので、画像を設定してみたいと思います。
子テーマを適用した自分のサイトを表示し、キャプチャを取って「screenshot.png」という名前で保存してください。

TwentyFourteen2

あとはこれを、子テーマのフォルダ直下(子テーマのstyle.cssが置いてある場所)へ配置すれば

child-theme

保存した画像がテーマ一覧で表示されるようになります!

ただ、これは子テーマの機能にはまったく関係なく、人様に見えるところでもないので自己満足なんですが、モチベーションは大事です。

 

Twenty Fourteenのカスタマイズ

せっかく子テーマを作ったのだから、簡単なカスタマイズを加えてみる。

まずフォント。Twenty Fourteenで使用されているフォントは日本語でも違和感は少ないけれど、やっぱり見慣れているフォントにしたいですよね。

[css]/* フォント */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-family: Helvetica,Arial,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ",sans-serif;
}[/css]

それから、デフォルトの設定では「featured-content」要素のタイトル部分、つまりトップ画面上部に表示される「おすすめコンテンツ」のタイトルにアルファベットが入っていた場合、自動的に全部大文字になってしまいます。
その機能はちょっとウザイので以下で解除。

[css].featured-content .entry-title {
text-transform: none;
}[/css]

 

とまあカスタマイズを始めたら一記事では到底収まらない量になりそうなので、今回はこの辺で。

Twenty Fourteenは一見ユニークなデザインで扱いにくそうですが、カスタマイズを始めてみると結構単純で楽しかったりします。
子テーマさえ作っておけばリスクは子テーマ内で収まるので、どんどん触って勉強してみてください!

 


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

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

それではまた。

-Wordpress
-, ,

おすすめ記事

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

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

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

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

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

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