お気に入りのデザインテーマを見つけたけど、
・なんか物足りない
・もう少しおしゃれにしたい
そんな時、是非挑戦してほしいのがデザインのカスタマイズです。
WordPressを使うメリットとして、ブログを自由にデザインできることなので、ヘッダーの高さやナビゲーションバー、トップページのデザインと言ったように、カスタマイズできる要素が数多くあります。
ただ、デザインカスタマイズをする際、絶対に注意しておくべき点があります。
それは『子テーマを作る』ということ。
僕自身もそうだったのですが、初めての人にとっては、「子テーマ」と急に言われても…
というように、結構困惑しました。
そこで今回は、カスタマイズに挑戦する前に知っておきたい『子テーマ』についてご説明していきます。
この記事を最後まで読むことで、子テーマの役割や作り方を理解して、すぐに手を動かすことができるでしょう。
それではご説明していきます。
子テーマとは？
WordPressテーマをカスタマイズするため、必要なファイルになります。
例えば、
・色を変更したい
・移動させたい
・消したい
こんなことをやるために必要です。
具体的には、
フォルダ内に、function.php（機能）とstyle.css（デザイン）というファイルを作成してアップロードする形となります。
「親テーマでカスタマイズすればいいのでは？」
と思うかもしれませんが、子テーマでカスタマイズしなければいけない理由があります。
そのことについて、説明していきましょう。
子テーマを作る理由とは？
子テーマを作る理由は2つあります。
1. 親テーマでカスタマイズすると、テーマが更新時に自動上書きされる。
せっかく時間をかけて、苦労して作ったカスタマイズがテーマ更新で全て上書きされてしまうということです。
知識がなかったとき、一度この失敗をやってしまいましたが、絶望でしたね。
2. エラーの原因が掴みやすい
親テーマのファイルをそのままカスタマイズしエラーが起きると、
「どこが問題なの？」
「エラーの発生原因は？」
というように、色々なファイルを探す必要があります。
一方で、子テーマでカスタマイズ内容を独立させておけば、エラーを見つけることが容易です。
管理のためにも、子テーマを作るようにしましょう。
子テーマを作る必要がある場合
子テーマを作るのはこの2つの場合です。
・固定ページをフロントページにする場合
・オリジナルの色やデザインをする場合
固定ページをフロントページにする場合は、サイト型のブログにするのが目的となるので、自由度を広げるために子テーマで作成をしておくのが無難ですね。
フロントページにする方法は、以下の記事を参考にしてください。
【徹底解説】WordPressでフロントページを設定してデザイン性のあるサイトにする方法
子テーマを作る必要がない場合
WordPressでブログを作る場合、必ず子テーマを作る必要があるのかのというと、そうではありません。
例えば、特別なカスタマイズが必要ない場合は、親テーマを使いましょう。
・ナビバーの色
・ヘッダー画像
のように、ダッシュボードから設定できる内容であれば、テーマ更新でも上書きされることはありません。
子テーマを作るのは、「ダッシュボードでもできない」特別なカスタマイズを作る場合となります。
子テーマを作る手順について
手順は4ステップありますので、1つ1つご説明していきます。
0. 必要なツール
・コード エディター：おすすめはVSCode（フリーソフト）
下記ページからダウンロードして使ってください。
VSCodeを開くとこのような画面が現れます。
開いたら準備完了です。
1.子テーマフォルダとファイルを作成
作成するファイルは以下2つです。
・function.php
・style.css
ファイル→新規ファイルから作成していきます。
ファイルが作成されたら、名前をつけて保存でfunction.phpと入力し保存します。style.cssも同様に行いましょう。
以下のように空の2つのファイルが完成しました。
続いて、フォルダを作ります。
フォルダ名は〇〇-childのように子テーマとして分かる名前で作成しましょう。
フォルダが作成できたら、function.phpとstyle.cssをフォルダに入れます。
2. 子テーマとして認識させる
作成したファイルを子テーマとして認識させるため、それぞれのファイルにコードを記述していきます。
※コピペで大丈夫です。
・style.css
親テーマと子テーマを紐付けていきましょう。
/*
Theme Name: 子テーマ名
Template: 親テーマ名
*/
・function.php
作成したstyle.cssを読み込みます。
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’)
);
}
?>
こちらを記述したら完了です。
3. テーマを設定
作成した子テーマフォルダをzipファイルにして、WordPressに入れていきましょう。
テーマをインストールする方法は、以下の記事を参考にしてください。
4.有効化
最後に有効化をして、完了となります。
これでゴリゴリカスタマイズしていきましょう。
まとめ
子テーマについての説明と、作成方法に説明しました。
カスタマイズをしてワンランク上のデザインにするためには、必須の知識となります。
是非マスターして、今後のブログライフを充実させていきましょう。