WordPressに子テーマを追加してCSSでカスタマイズしてみよう!

WordPress
ウサギさん
WordPressの親テーマはいじらないで、CSSをカスタマイズできる方法ってないかなぁ?
モチ
モチ知ってる! 子テーマっていうものを導入すればいいんだよね?

こんな悩みを解決します!

結論から言うと、子テーマを導入すれば親テーマに手を加えず、CSSでカスタマイズが可能になります!

WordPressをカスタマイズしていると、もっとこまかい部分のデザインもいじりたくなる時ってありますよね?

そんな時、親テーマの「style.css」に追加CSSを記述してもいいんですが、もしテーマのアップデートをしてしまうと、カスタマイズ内容がすべてリセットされてしまうんです。(事前にバックアップをとっていれば元に戻すことは可能です)

そこで、子テーマを導入して、親テーマの影響を受けずに安全にCSSのカスタマイズができるようにしましょう。
サクっと10分ほどでできてしまいますよ♪

 記事でわかること

  • ・子テーマのインストール方法
  • ・style.cssにコードを記述する方法

 記事の信頼性

筆者のかがみ@cony_tas)はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

WordPressに子テーマを追加してCSSでカスタマイズしてみよう!

それでは実際に子テーマのインストールまでやってみましょう!
本記事では、WordPressのデフォルトテーマ「Twenty Twenty」を使ってご説明します。
とても簡単なので説明通りに進めてみてくださいね。

親テーマのフォルダ名を確認

子テーマを作成する前に、親テーマ名を確認する必要があります。
WordPressの管理画面から、「外観」→「テーマエディター」を選択してください。

開くとデフォルトで「style.css」が開かれると思いますので、上から数行目(使用テーマによって異なります)にある「Text Domain」のテーマ名を確認してください。
ここに記載されているテーマ名がフォルダ名と同じなので、このテキストをコピーします。

親テーマのフォルダ名を確認

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

先ほどコピーした親テーマ名+子テーマと分かる任意の名前を付けて子テーマフォルダを作成してください。
今回は、「twentytwenty-child」としました。

子テーマフォルダを作成

子テーマのフォルダ内に、「functions.php」と「style.css」を作成

子テーマを導入する上で最低限必要なファイルがあります。それが下記のファイルです。

  • ・functions.php
  • ・style.css

この「functions.php」と「style.css」をフォルダ内に作成してください。

子テーマのフォルダ内に、「functions.php」と「style.css」を作成

functions.phpにコードを追加

テキストエディタで「functions.php」に下記のコードをコピー&ペーストして保存してください。
とくに変更なしでそのまま貼り付けでOKです。

<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('style') ); }

functions.phpにコードを追加

style.cssに子テーマ情報を追加

テキストエディタで「style.css」にTheme Name、Templateを入力して保存してください。
最低この2つが書かれていれば子テーマは正常に機能します。

  • ・Theme Nameは最初に作成した子テーマのフォルダ名を記入
  • ・Templateは親テーマ名を記入
@charset "utf-8"; /* Theme Name: twentytwenty-child Template: twentytwenty */

style.cssに子テーマ情報を追加

子テーマフォルダをzipで圧縮

functions.php」と「style.css」の準備が出来たら、子テーマフォルダをzipで圧縮します。
これで子テーマのインストール準備は完了です! 次はWordPressの管理画面を操作していきます。

子テーマフォルダをzipで圧縮

子テーマをインストールする

WordPressの管理画面で「外観」⇒「テーマ」を選んでください。

外観⇒テーマを選ぶ

画面の「新規追加」ボタンを押して、「テーマのアップロード」を選択します。
次に、「ファイルを選択」を押して、zipで圧縮した子テーマフォルダを選択して、「今すぐインストール」を押します。

新規追加⇒テーマのアップロード

ファイルを選択して今すぐインストール

画面が遷移して、インストールの進捗が表示されます。問題なくインストールが完了したら、最後に「有効化」を選んで子テーマを適用させます。

子テーマを有効化

テーマ一覧ページを確認すると、「twentytwenty-child」が有効になっているのが確認できます。

おめでとうございます! これで子テーマを適用できました。

子テーマが有効になっている

子テーマのCSSファイルを確認する

子テーマの適用が出来たので、CSSのカスタマイズができるか確認してみましょう。
外観」→「テーマエディター」を選択してください。

外観⇒テーマエディターを選択

画面左上に「twentytwenty-child: スタイルシート(style.css)」と表示されていますね! これで子テーマのCSSカスタマイズが可能になりました。
あとはCSSを追加して、色々ページデザインをカスタマイズしてみてください♪

スタイルシート編集画面

番外編:子テーマのスクリーンショット画像を追加する

※こちらはやらなくても使用上の問題はありません。

先ほどインストールが完了した後、テーマ一覧で子テーマが有効になっていることを確認しましたが、子テーマのサムネイル画像が表示されていなかったですよね?
実はこれ、簡単に追加できるので、見た目が気になる方は追加しちゃいましょう!

まず、お使いのFTPソフト、またはレンタルサーバーの管理画面のファイルマネージャーなどで、親テーマフォルダ(wp-content > themes > 親テーマフォルダ)を開きます。
フォルダ内にscreenshot.pngの画像ファイルがあるので、これをコピーします。

screenshot.png画像をコピー

次に、子テーマフォルダ(wp-content > themes > 子テーマフォルダ)を開いて、コピーしたscreenshot.pngの画像ファイルをペーストします。

screenshot.png画像をペースト

これで完了です! もう一度WordPress管理画面からテーマ一覧を確認してみてください。サムネイル画像が表示されていると思います。

子テーマのサムネイル画像確認

最後に:WordPressに子テーマを追加してCSSでカスタマイズしてみよう!

最後までお疲れ様でした。

これで子テーマ側でカスタマイズが出来るようになりましたので、親テーマのアップデートの影響を受けることはなくなりました。
安心して素敵なブログデザインをつくってくださいね♪

それでは、今回はこの辺で!

ウサギさん
いつもみていただいて……!
モチ
ありがとうございますっ。
WordPressテーマのスワローをレビュー

【 WordPress 】スワロー( SWALLOW )のレビュー【 メリット・デメリット 】

2020年3月17日

WordPressテーマ「スワロー」に目次を追加しよう!【プラグイン不要】

2020年2月2日