WordPressのテーマに直接カスタマイズするのではなく、子テーマを作る

更新日:

自身でテーマを一から作れる方はそんなに気にしないとは思いますが、
これいいな。っていうテーマを元にカスタマイズしたい事はよくあります。

元テーマを直接編集すると、更新があった場合に、
自身のカスタマイズ分が無くなってしまいますし、
情報量が膨大ですので、ベースとなるテーマの子テーマを作成しましょう。

テーマについて

まず、「wp-contents/themes/」 の中はどうなっているのでしょうか?

themes
 |-twentytwelve
 |      |-style.css
 |      |-*.php
 |      |-...
 |-twentythirteen
 |      |-style.css
 |      |-...
 |-twentyfourteen
 |      |-style.css
 |      |-...

テーマとして認識させるには、themesの中に、ディレクトリと、「style.css」が存在していれば、
WordPress上からテーマとして認識できます。

style.css には表示される内容が、コメントとして入力されています。

/*
Theme Name: Twenty Twelve
Theme URI: http://wordpress.org/themes/twentytwelve
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentytwelve

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
body {
line-height: 1;
}

...

Theme Name」の後ろに入力されている「Twenty Twelve」が表示される名前です。
他にも、作成者や、バージョン等を記述しています。

phpファイルとしては、 single.php や様々な物がありますが、
今回は新規作成が目的ではない為、割愛します。

子テーマを作成する

単純な、テーマの構造を理解してもらった所で、子テーマを作成しましょう。
今回は、「Twenty Twelve」の子テーマ「My Twenty Twelve」を作成します。
「themes」にディレクトリを作り、style.cssを設置します。

themes
 |-twentytwelve
 |-my_twentytwelve
        |-style.css

style.css

/*
Theme Name:My Twenty Twelve
Template: twentytwelve
*/

@import url('../twentytwelve/style.css');

このCSS設定では、

・テーマ名
  My Twenty Twelve
・親テーマ
  twentytwelve
・CSS設定
  「twentytwelve」からインポート

と言う設定です。template の設定は、ディレクトリ名である事に注意して下さい。
名前ではありません。

「@import」を使用していますが、再利用・カスタマイズしようという事ですから、
まずインポートを行い、さらに上書く場合はそれ以降に記述するとOKです。
これで、子テーマ自体が作成されました。

phpファイルをカスタマイズする

phpファイルの適用は、まず子テーマ。そこになければ親テーマへ行くので、
書き換えたいファイルのみコピーしてカスタマイズが可能です。

single.php をカスタマイズしたいとなれば、
親テーマにある single.php を子テーマのディレクトリにコピーして、
そのファイルをカスタマイズして下さい。

ただし、functions.phpに関しては注意が必要です。
子 → 親テーマの順で functions.phpを解釈しますので、
関数の二重定義等でエラーを起こしたりします。

これを解決するには・・・。
どうやっても、親テーマのfunctions.phpを触る必要があります。

正しくは、親テーマ側で「function_exists」関数でチェックし、
子テーマで定義されていなければ定義と言うように実装すべきですが、
元テーマ作成者全員がチェックをしているとは限りません。
(デフォルトのテーマなどは、チェックされています。)

参照するディレクトリを使い分ける

子テーマにした事で、想定するディレクトリが2個になってしまいました。
親テーマのイメージも使いたいし、子テーマにのみ追加したイメージを使いたい!
そんな時は、パスを得る為の関数がありますので以下を使用して下さい。

親テーマのディレクトリが欲しい場合

get_template_directory_uri()

子テーマのディレクトリが欲しい場合

get_stylesheet_directory_uri()

基本的に、カスタマイズして使用する場合は、これで十分かと思います。
子テーマ作成の参考になればと思います。

-WordPress
-

Copyright© 打ち聞かせ , 2021 All Rights Reserved Powered by STINGER.