WordPress子テーマの作り方

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

対象テーマ

子テーマ作成のメリット

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

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

子テーマのサンプル

LIQUID PRESS シリーズの子テーマのサンプルです。
下記マニュアルの赤字の部分を利用中のテーマ名に置き換えてご利用ください。

» ダウンロード

子テーマの作り方

1. 子テーマの構成

子テーマは下記のようなディレクトリ構成になっています。

  • liquid-corporate-child
    • style.css
    • functions.php
    • images
    • カスタマイズしたいファイル

liquid-magazine テーマの子テーマを作成する場合は、liquid-magazine-child というディレクトリ名を指定します。 (子テーマの名前は、-child とすることが推奨されています。)

2. style.css

子テーマの style.css を編集します。子テーマの定義と、スタイルを指定します。
ポイントは下記の2点です。

  • Theme Name: - 子テーマの名前を指定(空白OK)
  • Template: - 親テーマの名前を指定(空白NG)
@charset "utf-8";
/*
Theme Name: LIQUID CORPORATE Child
Theme URI: https://lqd.jp/wp/
Description: LIQUID PRESS THEME
Author: LIQUID DESIGN
Author URI: https://lqd.jp/
Template: liquid-corporate
Version: 1.0.0
*/
/* Child Styles */

3. functions.php

子テーマの functions.php を編集します。カスタマイズしない場合は編集不要です。

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

追加したいCSSやJSファイルがあれば追加することができます。 詳しくは wp_enqueue_stylewp_enqueue_script をご参照ください。

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

4. テンプレートのカスタマイズ

カスタマイズしたいテンプレートファイルがあれば、親テーマからコピーして編集し、子テーマのディレクトリにアップします。
子テーマのファイルが優先して読み込まれるようになります。カスタマイズしないファイルはコピー不要です。

子テーマのインストール/有効化

WordPress管理画面>外観 から子テーマをインストールおよび有効化します。
以上で完了です。

公式ドキュメント

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

ご注意

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

開発状況の公開

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

LIQUID PRESS

» WordPressテーマ一覧

PageTop