仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

手軽にデザインを変更! WordPressに子テーマを作ろう

公開日:

WordPress

手軽にデザインを変更! WordPressに子テーマを作ろう

 

WordPressのテーマで良いテーマを見つけたけれど、色や文字のサイズがイマイチだなと感じたことはありませんか?

 

少し改変すればもっと良いデザインになるという場合は「子テーマ」を作ってスタイルを変更するという方法があります。

 

 

 

子テーマって何?

WordPressの元のテーマ(親テーマ)を引き継ぎながら、子テーマでCSSのスタイルを変更していくことができます。

 

例えば…

 

親テーマ

 

子テーマ

 

CSSをこのように記述することでaタグの文字の色を
赤(red) → 青(blue)に変更し、
文字のサイズを16pxにするというスタイルが追加できます。

 

子テーマがある場合のメリット

親テーマのバージョンアップをしても子テーマによってスタイルが維持されます。

 

 

子テーマがない場合のデメリット

親テーマをバージョンアップした時に、スタイルが新しい親テーマの物に変わってしまうため、自分で改変したCSSの記述がなくなってしまいます。

 

 

 

子テーマを作ってみる

材料はこちら

  • 子テーマのフォルダ
  • style.css
  • functions.php

 

子テーマを保存するフォルダを作ろう

子テーマを保存するフォルダは
wordpress > wp-content > theme
の中に作ります。

 

フォルダ名は子テーマだと分かるように
「 (元のテーマ名)_child 」にするのがおすすめです。

 

 

子テーマの「style.css」を作ろう

子テーマのスタイルシート (style.css)の最初に
「元のテンプレート名(Template)」と「子テーマ名(Theme Name)」を記述します。

 

この記述をすることによって子テーマだと認識してくれます。

style.cssの記述は以上です。

 

 

子テーマの「functions.php」を作ろう

子テーマのフォルダ内のfunctions.phpに下記のコードを記述します。

 

これは親テーマのstyle.cssを読み込む記述です。
こうすることによって、親テーマのstyle.cssを引き継ぎながら、子テーマのstyle.cssを反映することが可能になります。

 

 

テーマ一覧から子テーマを選択する

ダッシュボードから子テーマを選択します。
先ほどstyle.cssに記述したTheme Nameの「Test_child」という物を選択します。

 

これでお好みのスタイルを反映することができます。

 

 

 

まとめ

1からCSSでスタイルを作らなくても、子テーマを作ることによって変更したい箇所だけ改変できるのは便利ですよね。

 

バージョンアップした際にも対応できるのでテーマを最新の状態にできるというのも大きな魅力です。

 

ブログ作成者7
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00