WordPressテーマを思い通りにカスタマイズする方法

既存のテーマを使ってブログをやってるけど、どうしてもデザインをカスタマイズしたい部分があるんだよね。

HTMLとCSSの知識はある程度あるんだけど、WordPressを自分好みにカスタマイズするにはどうすればいいの？

僕はブログ歴2年で、現役でWeb制作副業をやっているフロントエンドエンジニアでもあります。

デザインが好きで使っているテーマでも、どうしても自分好みにカスタマイズしたい部分のひとつやふたつはありますよね。

この記事では、既存のWordPressテーマを自分好みにカスタマイズしたい人に向けて、テーマをカスタマイズする方法を解説します。

ちなみに実際にWordPressテーマをカスタマイズするには、どうしてもHTMLとCSSの知識が必要になります。

WordPressテーマをカスタマイズするために、HTMLとCSSについて勉強したいという人はこちらの記事をご覧ください。

Web制作副業の学習ロードマップ【プログラミング完全初心者OK】サラリーマンの副業に人気のWeb制作。この記事では、プログラミング完全初心者から効率的にWeb制作副業を始めるまでの学習ロードマップを解説します。...

WordPressテーマをカスタマイズする方法は3つ
子テーマの作り方
思い通りにカスタマイズしたいならHTMLとCSSを学ぶべし
まとめ：WordPressテーマをカスタマイズするなら子テーマを作るのがおすすめ

WordPressテーマをカスタマイズする方法は3つ

既存のWordPressテーマをカスタマイズする方法は3つあります。

それは以下。

WordPressテーマをカスタマイズする方法

テーマを直接編集する
追加CSSを使う
子テーマを作る

それぞれ解説していきます。

テーマを直接編集する

まずテーマを編集する方法です。

直接サーバーに保存されているファイルを編集してもいいですが、WordPressダッシュボードから「外観」ー「テーマエディター」から編集してもOKです。

ダッシュボードから気軽に編集できてしまうのですが、このやり方は基本的に非推奨です。

というのは、テーマのアップデートがあると編集したファイルが上書きされてしまうからです。

せっかくカスタマイズしても、アップデートですべて元通りです。

さらに、テーマを直接編集するので、重大なエラーが発生してしまったときに元に戻せないといったことにもなりかねません！

ということで、既存のWordPressテーマのカスタマイズは、これから解説する「追加CSSを使う方法」か「子テーマを使う方法」がおすすめです。

追加CSSを使う

続いては追加CSSを使う方法です。

この方法ならテーマのアップデートがあっても、元通りになることはありません。

スタイルを変更するだけのカスタマイズであれば、この方法が簡単でいいかもですね。

やり方は簡単。

WordPressダッシュボードの「外観」ー「カスタマイズ」から追加CSSをクリック。

ここにCSSを書けば、スタイルを思い通りに変更できます。

ただし、注意点がひとつ。

テーマのアップデートでは消えることはないのですが、テーマを一度変更すると消えてしまうところです。

どうしてもテーマを変更しないといけないときは、どこかにコピーしておくなりした方がいいですね！

子テーマを作る

最後は子テーマを使う方法です。

もしかしたら初めて聞く単語かもしれないので、解説します。

現在設定しているテーマを「親テーマ」と呼びます。

それに対して、子テーマは親テーマとは別の新規に作るテーマでありつつも、親テーマの機能やスタイルを継承しています。

カスタマイズしたい部分だけをテーマフォルダ内に入れることで、親テーマをカスタマイズすることができます。

子テーマを使うメリットは以下です。

子テーマを使うメリット

テーマのアップデートがあっても消えない
テーマを変更しても消えない
親テーマを編集せずに、大胆なカスタマイズが可能

テーマを作ると聞くとなんとなく難しそうに感じるかもしれませんが、子テーマを作ってスタイルを変更するくらいであればHTMLとCSSの知識があれば簡単にできますよ！

次で子テーマの作り方の手順を解説します。

子テーマの作り方

子テーマを作る手順は以下です。

子テーマを作る手順

子テーマフォルダを作る
CSSを作る
functions.phpを作る
サーバーにアップロードする
子テーマを有効化する

順番に解説していきます。

Step1：子テーマフォルダを作る

まずはローカルに子テーマ用のフォルダを作りましょう。

フォルダ名はなんでもいいですが、半角大文字が入ると後でテーマを削除できないことがあるので、半角小文字にするといいです。

僕は「親テーマフォルダ名-child」とすることが多いです。

Step2：CSSを作る

子テーマ用のフォルダの中にstyle.cssという名前のファイルを作りましょう。

そして、style.cssを編集し以下を記述します。

style.css

/*
 Theme Name:   JINの子テーマ
 Template:     jin
 Author:       Tomoya
 Description:  JINの子テーマ
 Version:      1.0
*/

Theme Name：子テーマの名前
Template：親テーマのフォルダ名
Author：子テーマの作者
Description：子テーマの説明
Version：子テーマのバージョン

Theme NameとTemplate以外は必須ではありません。

ちなみに、Templateは親テーマの名前じゃなくてフォルダ名なので注意！

サーバーの「wp-content」-「themes」内にある親テーマのフォルダ名を確認しましょう。（JINの場合は「jin」です）

Step3：function.phpを作る

続いて、子テーマ用のフォルダの中にfunctions.phpという名前のファイルを作りましょう。

そして、functions.phpを編集し以下を記述します。

functions.php

<?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') );
}

こちらは共通なのでコピペでOK！