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

「WordPressをカスタマイズするにはどうすればいいの?」という方向けの記事を書きます。

「WordPressとは何か?」ということを知りたい方は、以下のページで解説していますので、参考にしてください。

WordPressとは?わかりやすく解説してみます。

私は2019年の末にプログラミングスクールTECH::EXPERTを受講し、

現在はWebサイト制作のフリーランスエンジニアとして活動しています。

仕事で手を加えるサイトの半数以上でWordPressを使用しています。

これまでに、いくつかのサイトのWordPressをカスタマイズしてきました。

それでは早速見ていきましょう!

「WordPressをカスタマイズする」とは、テーマをカスタマイズすること

WordPressは、主に以下の3つの部分から成り立っています。

  1. WordPress自体のシステム部分
  2. サイトのデザイン部分(テーマ)
  3. サイトの機能部分(プラグイン)

「WordPressのカスタマイズ」というと、テーマのカスタマイズを指すことが多いです。

テーマは、具体的には、以下のようなことを決定しています。

  • コンテンツの表示方法(どのページの、どこに、どんな情報を表示するか。)
  • デザイン(色やレイアウトなど)
  • 投稿ページや固定ページとして、どのテンプレートファイルを使用するか(WordPressではテンプレートファイルと呼ばれるファイルを用意して、共通部分を使い回します。)

そんなテーマを構成しているファイルはどこにあるのでしょうか?

初期状態では、

wp-content/themes

に3つくらいテーマフォルダが入っています。

詳しく見ていきましょう!

WordPressは以下のように、たくさんのPHPファイルによって成り立っています。

公式サイトからダウンロードしたWordPressのファイル群

この中にあるwp-contentというフォルダを展開してみましょう。

themesというフォルダが出てきました。これをさらに展開します。

3つのフォルダが出てきました。

これらが、WordPressのインストール時に備わっているテーマです(2021年6月時点)。

管理画面で切り替え可能です。

筆者が最近始めたWordPressサイト「ほぼMUJI」の管理画面 外観 > テーマ

この記事ではWordPressのテーマをカスタマイズする方法をお伝えしていきます。

テーマフォルダの中身

twentytwentyoneを展開

最新のテーマ(2021年6月時点)であるtwentytwentyoneを展開してみました。

色んなファイルがありますが、カスタマイズ時に使うのは拡張子がphpのファイルです。

ただし、カスタマイズ時に、テーマを直接編集するのはおすすめできません。

テーマは作者によってアップデートされ続けるためです。

テーマを直接編集したら、アップデートをした時に、カスタマイズした内容が消えてしまいます。

その問題を解決するのが、子テーマです。

子テーマとは

子テーマとは、親テーマを引き継いだテーマのことです。

親テーマからファイルをコピーして、子テーマで編集してアップロードすれば、変更した部分だけ反映されます。

もちろん子テーマでは、親テーマにはない記述を追加することもできます。

子テーマの作成方法

大まかな流れは、

子テーマのフォルダを作成して、指定場所にアップロードする

です。

子テーマのフォルダ名を決める

なんでもいいです。

「親テーマの名前-child」とすると考える手間が省けるのでいいと思います。

style.cssを新規作成し必要事項を記入する

style.cssは、WordPressのシステムに子テーマであることを伝えるために必要です。

style.cssに記入する内容

/*
Template: twentytwentyone
Theme Name: twentytwentyone-child
Theme URI: https://ki-hi-ro.com/muji/
Description: twentytwentyoneの子テーマ 
Version: 1.0
Author: Shibata Hiroki
*/

Templeteで、親テーマの名前を指定します。(必須)

Theme Nameは、先ほど決めた子テーマのフォルダ名です。(必須)

それ以降は、サイトURL、子テーマの説明、バージョン、著者名を好きなように入力しましょう。

子テーマをthemesフォルダにアップロードする

アップロード

wp-content/themesに作成した子テーマ(今回はtwentytwentyone-child)をアップロードします。

確認

管理画面の外観 > テーマで、子テーマをクリックし、上の写真のようになっていれば、子テーマの作成が完了しています。

ただし、このままでは子テーマのCSSが読み込まれていません。

次の章でこれを解決していきましょう。

子テーマのstyle.cssを読み込む

子テーマで、functions.phpを新規作成して子テーマのstyle.cssを読み込むような記述をします。

functions.phpに記述する内容

<?php

// CSSを読み込む関数
function theme_enqueue_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}

// theme_enqueue_styles()を実行する
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

これで、子テーマのstyle.cssが読み込まれました。

CSSが反映されているかどうかのチェック

メタ情報を削除する

メタ情報というのが不要かと思いますので、これを子テーマのCSSで非表示にしてしまいましょう。

style.cssに記述する内容

要素の検証で確認すると、メタ情報はmeta-2というidを持っていることが分かりました。

これを削除するために、style.cssには以下のように記述します。

#meta-2 {
  display: none;
}

これで、メタ情報が削除されました。

まとめ

内容をまとめると・・・

  • WordPressをカスタマイズすることはテーマをカスタマイズすることを指す
  • アップデートなどで上書きされるのを防ぐため、子テーマを作成してカスタマイズを行う
  • 親テーマの内容を継承しつつ、子テーマで編集したファイルの内容が反映される

となります!

WordPressをカスタマイズするにはどうすればいいのか、という疑問が解消されたら嬉しいです。