Word Pressを使ってブログを書いていると、

他の人のように見出しを変えたい!とか思いますよね?

 

それで検索しまくると、どうも『子テーマ』を作ったほうがいいらしい。

超初心者の私には分かりにくくて苦労したので、私にもできた方法を紹介します。

 

 

親テーマを確認する

 

自分が何のテーマを使っているのか確認します。

【ダッシュボード】⇒【外観】⇒【テーマの編集】

 

わたしの場合は「Twenty Sventeen」です。

 

エックスサーバーから子テーマを追加する

 

子テーマのフォルダを作成する

 

エックスサーバーを開いて、

【インフォパネル】⇒【ファイルマネージャー】にログインする。

エックスサーバー

 

 

子テーマを追加するドメインをダブルクリック

 

【public html】⇒【wp-content 】⇒【themes】の順にクリック

開いたところに子テーマのフォルダを作ります。

 

 

ファイル名の文字コードを【UTF-8】にして、

分かりやすい名前を入力 ⇒【フォルダ作成】すると新しく子テーマのフォルダができます。

*親テーマと同じ階層に作ります。

*私は「twentyseventeen」のテーマを使っているので「twentyseventeen-child」としました。

 

「style.css」のファイルを作る

 

作ったフォルダをダブルクリックして、

右下の所に「style.css」と入力し ⇒【UTF-8】を選択 ⇒【フォルダ作成】

 

【style.css】の左にチェックを入れて ⇒【編集】

 

【style.css】の編集画面になります。

ここに入力する内容はいろいろありますが、私の場合以下のように入力しました。

/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
*/

 

 

貼り付けたら下の保存文字コードを【UTF-8】にして【編集】をクリックする。

 

「functions.php」のファイルを作る

 

同じように、「functions.php」と入力 ⇒【UTF-8】を選択 ⇒【フォルダ作成】

 

【functions.php】の左にチェック ⇒【編集】

 

以下のように入力する。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );
}
?>

 

貼り付けたら下の保存文字コードを【UTF-8】にして【編集】をクリックする。

 

子テーマを有効化する

 

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

 

【ダッシュボード】⇒【外観】⇒【テーマ】

作った子テーマが増えているので【有効化】する

 

サイトを表示してみると今まで通り表示されるはずです。

 

【外観】⇒【テーマ編集】には、子テーマの【スタイルシート】が追加されています。

今後デザイン等を変更する時は、

CSSコードをこの中に追加するだけで、変更が適用されます。

 

 

スタイルシート以外にも

「header.php」や「single.php」などを子テーマに追加する場合も同じ手順で行います。

 

ただ、作成したファイルに書き込む内容は、

親テーマの同じファイルの中身をコピーして貼り付けます。

 

まとめ

 

これで、安心してカスタマイズができますね!

見出しやリストのデザインを変えたりして楽しんでください。

 

画像の説明文