はじめに

サイトの印象を良くしたり、テーマに変化を出したい場合は、写真選びや画像の加工に力を入れるのがお勧めです。
子テーマでコードを書き換えるよりも、変化を出しやすく効果的です。

子テーマの使用には、HTML/CSS/JS/PHPなどの専門知識が必要です。子テーマに書くコードによっては、WordPressや親テーマのメジャーアップデートに伴って、メンテナンスが必要になることもあります。

子テーマについて

子テーマは、親テーマのコードをカスタマイズするときに使用します。
親テーマのコードを直接カスタマイズすると、アップデートで消えてしまうため、子テーマを使用します。
「テーマ」と「子テーマ」の両方をインストールした状態で、子テーマを有効化します。

子テーマの開発環境

「LOCAL」を使用して、ローカル環境で作業することをお勧めします。
https://bazubu.com/how-to-create-local-environment-23801.html

子テーマファイル作成

CLOCKテーマを例にしています。

  1. 「clock-child」フォルダを作成します。
  2. フォルダ内に、style.css、functions.php、screenshot.png(横1200px 縦900px)を作成します。
  3. 以下のコードをコピペします。

style.css

@charset "UTF-8";
/*
Theme Name: Clock Child
Author: Colors Themes
Author URI: https://colors-themes.com/
Description: Clock Child Theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: clock
Text Domain: clock-child
Tags: custom-background, custom-logo, custom-menu
*/
/* ----------------------------------------------------------------------
	# style
---------------------------------------------------------------------- */

functions.php

<?php
function clock_child_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'clock_child_scripts' );
/* ----------------------------------------------------------------------
	# functions
---------------------------------------------------------------------- */

検証

子テーマのfunctions.phpに書くコードの検証です。
CLOCKテーマを使用して、WordPress5.8で試しています。

①. 何も書かない。
②. 親テーマのstyle.cssを読み込むコードを書く。
③. 子テーマのstyle.cssを読み込むコードを書く。
④. 親テーマのstyle.cssを読み込むコードと子テーマのstyle.cssを読み込むコードの両方を書く。

検証のまとめ
結論としては、出力されるコードに少し違いはありましたが、すべて、親テーマのCSSを上書きできました。
ソースコード的には、WordPress Codex の手本通り、明示的に親テーマのstyle.cssを読み込む②が無難そうです。
※ テーマによって構成が異なるので、この通りにならない場合もあるかもしれません。

CSSのカスタマイズ方法

子テーマのstyle.cssに追記することで、親テーマのCSSの上書きができます。

親テーマ
文字のline-heightを変更する方法を例にしています。

body {
	line-height: 2;
}

子テーマ: style.css

body {
	line-height: 1.5;
}

関数(PHP)のカスタマイズ方法

通常の場合

メタタグのタイトルの区切りを「|」から「- -」に変更する方法を例にしています。

親テーマ

function clock_title_separator( $sep ) {
	$sep = '|';
	return $sep;
}
add_filter( 'document_title_separator', 'clock_title_separator' );

子テーマ functions.php

function clock_remove_filter() {
    remove_filter( 'document_title_separator', 'clock_title_separator' );
}
add_action( 'after_setup_theme', 'clock_remove_filter' );

function clock_title_separator_child( $sep ) {
	$sep = '--';
	return $sep;
}
add_filter( 'document_title_separator', 'clock_title_separator_child' );

親テーマの関数が、「if ( ! function_exists() )」で囲われている場合

親テーマ

if ( ! function_exists( 'clock_title_separator' ) ) :
function clock_title_separator( $sep ) {
	$sep = '|';
	return $sep;
}
endif;
add_filter( 'document_title_separator', 'clock_title_separator' );

子テーマ functions.php

function clock_title_separator( $sep ) {
	$sep = '--';
	return $sep;
}
add_filter( 'document_title_separator', 'clock_title_separator' );

テンプレート(PHP)のカスタマイズ方法

404.phpファイルをカスタマイズする方法を例にしています。

  1. 親テーマの404.phpファイルを、子テーマにコピペします。
  2. 子テーマの404.phpファイルを開いてコードを好きなようにカスタマイズします。

注意事項

  • コンテンツ全体を好きなようにカスタマイズできますが、親テーマに変更があった場合、子テーマにも修正が必要になることがあります。
  • 親テーマの「do_action」が記載された所に、文字列などを出力する場合は、影響を受けにくいです。詳細は 別ページ で紹介しています。

jQueryオプション(JS)のカスタマイズ方法

jQueryプラグインを使用したテーマの場合、jQueryプラグインのオプション設定は、js/custom.jsファイルなどにまとまっていることが多いと思います。CLOCKテーマの場合は、カスタマイズを想定していないオプションをまとめてあります。

通常の場合

  1. 親テーマのjs/custom.jsファイルを子テーマにコピペします。フォルダ階層を同じにする必要があります。
  2. 子テーマのjs/custom.jsファイルをカスタマイズします。
  3. 子テーマのfunction.phpに以下のコードを追記します。

親テーマ: functions.php

function clock_scripts() {
    wp_enqueue_script( 'clock-js-custom', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0.0', true );
add_action( 'wp_enqueue_scripts', 'clock_scripts' );

子テーマ: functions.php

function clock_scripts_child() {
    wp_dequeue_script( 'clock-js-custom' );
    wp_enqueue_script( 'clock-js-custom-child', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'clock_scripts_child', 20 );

親テーマで 「get_theme_file_uri」が使用されている場合

  1. 親テーマのjs/custom.jsファイルを子テーマにコピペします。フォルダ階層を同じにする必要があります。
  2. 子テーマのjs/custom.jsファイルをカスタマイズします。
  3. 子テーマのfunction.phpにコードの追記は不要です。

親テーマ: functions.php

function clock_scripts() {
    wp_enqueue_script( 'clock-js-custom', get_theme_file_uri( '/js/custom.js' ), array( 'jquery' ), '1.0.0', true );
}

子テーマ: functions.php

// コードの追記不要

翻訳(POファイル)のカスタマイズ方法

親テーマの翻訳を子テーマからカスタマイズする方法です。

  1. 翻訳ファイルを編集するには、Poeditをインストールしている必要があります。
  2. 親テーマの「languagesフォルダ」を子テーマにコピペします。
  3. 子テーマの「languagesフォルダ」内の「ja.poファイル」を起動します。

※「clock.potファイル」は他言語ファイル作成用です。「ja.moファイル」は触りません。

POファイルのカスタマイズ方法

  1. 翻訳を書き換えます。
  2. 「保存」を押します。

※「コードから更新」ボタンは使いません。