WordPress子テーマの作り方

LIQUID PRESS INFORMATION
WordPressの子テーマの作り方についてご紹介します。
LIQUID PRESS テーマでは、簡単に子テーマを作成してカスタマイズすることができます。

対象テーマ

子テーマ作成のメリット

子テーマで作成、編集した内容は、テーマをアップデートしても引き継ぐことができます。 (元のテーマを直接編集すると、アップデートの際に編集内容が引き継がれません。)
レイアウト変更や独自機能の追加、翻訳ファイルの変更など、テンプレートファイルをカスタマイズする場合におすすめです。

なお、LIQUID PRESS シリーズでは JavaScript/CSS は、 カスタムヘッダー機能で追加することもできます。

子テーマの作り方

下記のようなディレクトリ構成で子テーマを作成します。

  • 子テーマディレクトリ
    • style.css
    • functions.php
    • カスタマイズしたいphp
    • 親テーマからコピーした各ディレクトリ

1. 子テーマディレクトリ作成

FTPなどで、/wordpress/wp-content/themes/ に子テーマのディレクトリを作成します。
liquid-magazine テーマの子テーマを作成する場合は、liquid-magazine-child というディレクトリを作成します。 (子テーマの名前は、-child とすることが推奨されています。)

2. style.css

子テーマの style.css を作成します。ここでテーマの情報を定義します。
ポイントは下記の2点です。

  • Template: liquid-magazine - 親テーマのディレクトリ名を指定(空白NG)
  • Theme Name: LIQUID MAGAZINE Child - 子テーマの名前を指定(空白OK)
@charset "utf-8";
/*
Template: liquid-magazine
Theme Name: LIQUID MAGAZINE Child
Theme URI: https://lqd.jp/wp/
Description: LIQUID PRESS THEME
Author: LIQUID DESIGN
Author URI: https://lqd.jp/
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 親テーマのバージョン
*/
/* 子テーマのスタイル */

3. functions.php

子テーマの functions.php を作成します。ここで読み込むファイルを指定します。

<?php
// 親テーマと子テーマのCSSを読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'liquid-style', get_template_directory_uri() . '/style.css', array('bootstrap', 'icomoon') );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('liquid-style') );
}
?>

基本的には上記をコピペでOKです。
追加したいCSSやJSがあれば追加します。詳しくは wp_enqueue_stylewp_enqueue_script をご参照ください。

なお、LIQUID PRESS シリーズでは、下記の関数を子テーマで上書きすることができます。変更したい処理があれば追加します。
LIQUID PRESS 子テーマで上書きできる関数

4. フォルダ/ファイルのコピー

imageslanguagesフォルダを親テーマからコピーして、子テーマのディレクトリにアップします。

5. ファイルのカスタマイズ

カスタマイズするファイルについて、親テーマからコピーして編集し、子テーマのディレクトリにアップします。
カスタマイズしないphpファイルはコピー不要です。

子テーマの有効化

WordPress管理画面>外観 から子テーマを有効化して、完了です。
(管理画面に表示される子テーマのサムネイルは透明です。設定する場合は screenshot.png を子テーマのディレクトリにアップします。)

公式ドキュメント

その他、子テーマについて詳しくはWordPress公式ドキュメントもご参照ください。
» 子テーマ - WordPress Codex 日本語版(公式マニュアル)

ご注意

※子テーマでのカスタマイズには、HTML/CSS/PHPなどの知識が必要です。
※カスタマイズしたファイルについて、親テーマで更新があった場合、手動で更新(5の手順)を行ってください。
※親テーマの更新を行った場合、子テーマのVersion表記も更新してください。
※カスタマイズについてはサポート対象外とさせて頂いております。予めご了承ください。

開発状況の公開

LIQUID PRESS では、GitHubにてテンプレートの開発状況および更新履歴を公開しています。
オープンな開発を行い、コミュニティなどからの貢献を受け取りやすくし、ユーザーさまにフィードバックしていきたいと考えております。
https://github.com/lqdjp/liquid-press/issues

LIQUID PRESS

» WordPressテーマ一覧

PageTop