phpもコピペでOK! wordpress子テーマの作り方

Advertisements

WordPressですでに存在しているテーマを使っていて
テーマにデフォルトで用意されている以外の部分を、
カスタマイズしたい！見た目をcssなどでアレンジしたい！となった時。
その前に絶対やっておいた方がいい作業、子テーマの作り方を、備忘録をかねて紹介したいと思います。

WordPressの子テーマとは？

wordpressの子テーマとは、もともとのテーマ(子テーマの親となるもの)から、
特徴や機能や適用されたスタイルを引き継いだまま、そこからカスタマイズを行うための仕組みで、
子テーマに対して変更を施すことにより、親テーマには影響を及ぼすことがなくカスタマイズを加えることが可能になります。

子テーマを使うメリット

一からテーマを作る必要がないので、そもそものテーマをベースに使えること
親テーマのアップデートを行っても、子テーマに行ったカスタマイズが一緒に上書きして消えることはないので、安全に使うことができます。

子テーマの作り方

Advertisements

1 必要なファイル一式を用意

まずローカル環境で、下記の空ファイルを用意します。

フォルダ(任意の名前ですが、「〇〇-child」(〇〇は親テーマの名前)としています。)
style.css
functions.php

上記2つのみあればOKですが、あとは任意で、
テーマ選択の画面に並んだ時のスクリーンショットも出したい場合、
style.cssと同じ階層に、screenshot.pngもしくはscreenshot.jpgの名前で、
1200×900pxのサイズの画像を用意します。

2 style.cssに記述する内容

空になっているstyle.cssに対して、下記を記述します


/*
Theme Name:   〇〇 Child
Description:  〇〇 Child Theme
Author:       your name
Template:    〇〇
Version:      1.0.0
*/

Theme Name	子テーマの名前が入ります(必須項目)。
Description	子テーマの説明が入ります。
Author	子テーマの作成者が入ります。
Template	親テーマのディレクトリが入ります。例えば親テーマがTwenty Fifteenなら、 twentyfifteen　となります。(必須項目)。不明な場合は親テーマのstyle.cssのファイルの最初の方に記載があるので、その表記と揃えます。
Version	子テーマのバージョンを記載します。

3 Function.phpに記述する内容

親テーマのスタイルシートを正しい順番(親テーマのcss→子テーマの、カスタマイズしたcss)で読み込むため、
function.phpのファイルに以下を追記します。
(子テーマのstyle.cssに@importで引っ張ってくることは推奨されていません。)


<?php

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style', get_stylesheet_uri() . '/style.css',
        array( 'parent-style' )
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

wp_enqueue_style()	このwordpress関数を使って、読み込むcssを指定します。
parent-style / child-style	それぞれ任意の名前を設定しています。
get_template_directory_uri()	親テーマのディレクトリのURLを取得しています。 . ‘/style.css’をプラスすることで、読み込みたい親テーマのstyle.cssファイルのURLを指定しています。
get_stylesheet_uri()	子テーマのディレクトリのURLを取得しています。(親テーマ同様、子テーマのstyle.cssのURLを指定しています)
array( ‘parent-style’ )	先に読み込みたいファイルを指定しています。この場合、parent-styleで、親テーマのstyle.cssを先に読み込みということになります。