WordPress子テーマの作り方

Image

このblogではWordPressのカスタマイズをするときは基本的に「子テーマ」を使っているという前提で書いています。

今日は そもそも子テーマの作り方ってどうするの? ということについて書いてみたいと思います。

スポンサーリンク

子テーマとはなにか?

私もWordPressに慣れていないときは、「だいたい子テーマってなに?子って?」と思っていました。今ではこのように理解しています。

WordPressのテーマで使いたいテーマがあるけれども、デザインや機能を自分なりにカスタマイズしたいときにその部分だけを記述するためのもの、が子テーマかなと。ということなので、カスタマイズしたい部分だけを子テーマでは記述します。

元のテーマでなくて子テーマというものを作ってそちらでカスタマイズするのはなぜか?ですが、テーマは時々アップデートされます。もし、元のテーマを直してしまったら、アップデートの際に元にもどってしまうのです。なので、元に戻らないよう子テーマに分けておけば元のテーマがアップデートされてもファイルの変更はされませんので安心です。

子テーマフォルダを作る

子テーマを作りたいとなったらまずは空のフォルダを

wp-contents\themes

の下に作ります。このとき、元テーマの名前が分かるようにフォルダ名を付けておくと後々分かりやすいかと思います。

例えば twentyfourteen を元に作る場合は twentyfourteen-usagi というフォルダ名にするとかしておくと後で分かりやすいです。

style.cssを作る

作ったフォルダの中に style.css というファイルを作って下さい。
そして、

と書きます。

Theme Name: は今回新しく作る子テーマの名前です。フォルダ名と同じような名前が間違えなくていいかと思います。
Template: は親テーマの名前です。

@import url(‘xxxxxxxxxxxxxxxxx‘);

で xxxxxxxxxxxxxxxxx 部分に書いてあるのが親テーマのstyle.cssです。

これで

Twenty Fourteen Usagiという名前のテーマをtwentyfourteenというテーマを親テーマとして作ります。ということが宣言できました(^^)/

ダッシュボード>外観 で見てみると、

Image

このように追加した子テーマが表示されています。

style.cssを使って文字の色などを変えてみる

子テーマを有効化してみます。

Image

特に何も変えていないので、twentyfourteenと全く同じ外観になっています。

ではちょっと変えてみましょう。twentyfourteenで特徴的なのが「黒でびしっとしている」というところです。その黒を別の色に変えたいと思います。

↑これをコピーして子テーマの style.css にペーストします。黒の置き換え色 とある部分を、置き換えたい色番号 で置換します。

WEB色見本 原色大辞典

この辺から適当に

Image

この青を選んで置換しました。

Image

こんな感じに色が置き換わりました。

子テーマさえ作っておけば、色々なカスタマイズをすることができます

上記の色の変更についてもすでにこのblogでご紹介しています。その他、子テーマを使った方法をいくつか書いてきました。

今回書いた方法で、子テーマさえ作っておけば色々なカスタマイズをしても安心ですので、子テーマを作ったら下記のblogも参考にしてみて下さい(^^)/

twentyfourteenの色を好きな色に変える子テーマを作りました

twentyfourteenの投稿タイトルが全部大文字になっちゃうのをやめる

twentyfourteenの子テーマでメインコンテンツエリアの幅を拡げる

twentyfourteen全ての大文字変換を無効にする

twentyfourteenで投稿コンテンツ上部に表示されるアイキャッチ画像を消して余白調整する

twentyfourteen子テーマでフォントを変えてみる

twentyfourteenで投稿者の写真を表示する方法–Graviator編

twentyfourteenのh2スタイルにfontawesomeのアイコンを追加する方法

twentyfourteenの blockquote引用 スタイルをカスタマイズする!

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

フォローする

スポンサー広告
スポンサーリンク
スポンサーリンク
トップへ戻る