WordPressのテーマで良いテーマを見つけたけれど、色や文字のサイズがイマイチだなと感じたことはありませんか?
少し改変すればもっと良いデザインになるという場合は「子テーマ」を作ってスタイルを変更するという方法があります。
WordPressの元のテーマ(親テーマ)を引き継ぎながら、子テーマでCSSのスタイルを変更していくことができます。
例えば…
1 2 3 |
a { color: red; } |
1 2 3 4 |
a { color: blue; font-size: 16px; } |
CSSをこのように記述することでaタグの文字の色を
赤(red) → 青(blue)に変更し、
文字のサイズを16pxにするというスタイルが追加できます。
親テーマのバージョンアップをしても子テーマによってスタイルが維持されます。
親テーマをバージョンアップした時に、スタイルが新しい親テーマの物に変わってしまうため、自分で改変したCSSの記述がなくなってしまいます。
材料はこちら
子テーマを保存するフォルダは
wordpress > wp-content > theme
の中に作ります。
フォルダ名は子テーマだと分かるように
「 (元のテーマ名)_child 」にするのがおすすめです。
子テーマのスタイルシート (style.css)の最初に
「元のテンプレート名(Template)」と「子テーマ名(Theme Name)」を記述します。
1 2 3 4 |
/* Template:Test Theme Name:Test_child */ |
この記述をすることによって子テーマだと認識してくれます。
style.cssの記述は以上です。
子テーマのフォルダ内のfunctions.phpに下記のコードを記述します。
1 2 3 4 5 6 |
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?> |
これは親テーマのstyle.cssを読み込む記述です。
こうすることによって、親テーマのstyle.cssを引き継ぎながら、子テーマのstyle.cssを反映することが可能になります。
ダッシュボードから子テーマを選択します。
先ほどstyle.cssに記述したTheme Nameの「Test_child」という物を選択します。
これでお好みのスタイルを反映することができます。
1からCSSでスタイルを作らなくても、子テーマを作ることによって変更したい箇所だけ改変できるのは便利ですよね。
バージョンアップした際にも対応できるのでテーマを最新の状態にできるというのも大きな魅力です。
ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!