最新版-WordPress子テーマの作り方

2017-12-03 @niketcha

WordPressテーマの更新をしたらカスタマイズした内容が消えてしまった……そんな事態を防いでくれるのが子テーマです。

子テーマは親テーマに機能を追加したりデザインを変えたりする役割があります。親テーマを更新しても子テーマは影響を受けないので、追加した関数などはそのまま維持されます。

子テーマの追加方法に関しては色々と変更されているそうなので、今の最新の方法を調べてみました。

Sponsored Link

WordPress子テーマの作り方

親テーマの配布元が子テーマの配布も行っている場合、下記の手順ではなく配布されているものを使ってください。ダウンロードしたテーマのアップロード方法についてはこちらの記事を参考にしてください。

子テーマを導入するのに必要なものは次の3つです。

  • 子テーマ用のディレクトリ
  • style.css
  • functions.php

子テーマ用ディレクトリ

子テーマ用のディレクトリは親テーマのフォルダと同じ階層に準備します。(WPインストールディレクトリ\wp-content\themes)

わかりやすく「親テーマ名-child」などとしておくといいと思います。

style.css

style.cssには最低限次の内容を記述します。

/*
 Theme Name: Twenty Fifteen Child
 Template: twentyfifteen
*/

Theme Nameはテーマの名前です。これも例のように「~Child」とするのがわかりやすいです。

Templateには親テーマのディレクトリ名を書きます。ここが1字でも違っていたら動きません。

functions.php

functions.phpはテーマで使う関数が書かれている場所です。

functions.phpには次の内容を記述します。

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

上記のコードは親テーマのcssを読み込むための処理です。通常はこれだけ書けば子テーマのcssも読み込まれるのですが、もし読み込めなければ次のように記述するといいそうです。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

「template_directory」というのが親テーマのことです。「stylesheet_directory」というのが子テーマ(現在有効になっているテーマ)のことです。

テーマの反映

子テーマ用ディレクトリにstyle.cssとfunctions.phpをアップロードし、WordPressの管理画面から子テーマを有効化するとテーマが反映されます。

サイトが正常に表示されるか確認してみてください。

参照元:WordPress Codex

子テーマの仕様

css

cssは親テーマ→子テーマの順で読まれます。CSSは後から指定された方を優先するので、例えば親テーマが

body{
	background-color:black;
	color:white;
	}

となっていて子テーマが

body{
	background-color:blue;
	}

となっていた場合、適用されるスタイルは

body{
	background-color:blue;
	color:white;
	}

となります。

functions.php

functions.phpはcssと逆で、子テーマ→親テーマの順に読み込まれる仕様になっているそうです。

親テーマが下記のような形で関数を定義している場合は、子テーマで同じ名前の関数を定義することで置き換えることができます。

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  何かする。
    }
}

上記は「theme_special_nav」という関数が定義済みでなければ処理を行うという意味。

-ウェブサイト構築, word press

コメントを残す

お名前もメールも入力は任意です。お気軽に指摘や質問などしていただけると嬉しいです。

Gravatarに登録すると、お好きな画像をアバターに設定できます。

Copyright© ニケッチャニッキ , 2017-2018 All Rights Reserved.