WordPress子テーマの作り方

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

対象テーマ

  • LIQUID PRESS シリーズ

子テーマ作成のメリット

子テーマで作成、編集した内容は、テーマをバージョンアップしても引き継ぐことができます。
レイアウトの変更やウィジェットの追加など、phpファイルをカスタマイズする場合におすすめです。

なお、LIQUID PRESS シリーズではカスタムヘッダー機能でJSや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
Tags: White, fluid-layout, Responsive-Layout, accessibility-ready, custom-header, custom-menu, featured-images
Version: 0.9.5.5
*/
/* 子テーマのスタイル */
body { ... }

3. functions.php

子テーマのfunctions.phpを作成します。
ここではテーマのCSSを指定します。ポイントは array で先に読み込むCSSを指定する点です。
(LIQUID PRESS シリーズでは、bootstrap、icomoon を使用しているのでこれらを先に読み込みます。)

<?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です。これで子テーマの準備は完了しました。

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

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

images、languages、admin(コンテンツ分析対応テーマのみ)フォルダを親テーマからコピーして、子テーマにアップします。
画像などを変更される場合は編集してアップします。

5. PHPのカスタマイズ

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

子テーマの有効化

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

公式ドキュメント

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

ご注意

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

開発状況の公開

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

PageTop