WordPressテーマをカスタマイズするために子テーマを作成

WordPressテーマをカスタマイズする時はテーマ本体は触らずに、子テーマを作成すべきとのこと。

子テーマとは、本体となるテーマから設定を引き継ぎ、カスタマイズしたい差分を記述するためのテーマです。

もちろんテーマ本体のコードをいじってカスタマイズすることはできますが、アップデートが行われた時に全部上書きされてパーになってしまいます。

WordPressの子テーマを作る理由と子テーマを自作する方法を参考にしました。公式テーマであるTwenty Twelveの子テーマを作ってみます。

style.cssとfunctions.phpを用意する

まずstyle.cssとfunctions.phpを用意します。

style.css

/*
Theme Name:Twenty Twelve (Child)
Theme URI:
Description:WordPressテーマ「Twenty Twelve」の自作子テーマです。
Template:twentytwelve
Author:iEhohs.com
Author URI:https://www.iehohs.com/
Version:3.0
*/

最も重要なのはTemplete。ここの値は親テーマのあるディレクトリ名を正しく入力すること。それによって親テーマのCSSを引き継いで使うことができます。

他の項目は管理画面のテーマ設定画面で表示される情報ですので、入力は任意ですが詳細に書くに越したことはありません。

この情報の後にCSSの追加分を記述すれば反映されるというわけです。

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' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
?>

親テーマのCSSを読み込んでから子テーマのCSSを読み込みます。

順次構造によって子テーマのCSSに書かれた記述が親テーマのCSSに書かれた記述よりも優先されます。

サーバーにアップロードする

style.cssとfunction.phpをWordPressがインストールされているサーバーにアップロードします。

方法としては2つあり、1つはこれらのファイルを圧縮フォルダにまとめて、管理画面から「テーマのアップロード」を行うこと。

もう1つはFTPソフトを使ってサーバーにアップロードする方法。/wp-content/themes/の中にフォルダを作って入れます。

FTPソフトはWindowsだとFFFTPが定番ですが、僕はMacなのでCyberduckを使っています。

https://cyberduck.softonic.jp/mac

スターサーバーのCyberduck設定

僕が使っているスターサーバーの場合、

  • サーバ:ホスト名(サーバー情報に記載)
  • ユーザ名:ドメイン名(このブログでいえばiehohs.com)
  • パスワード:スターサーバーのパスワード

を入力すればOK。

header.phpは本体テーマのものを複製

Googleアナリティクスなどのコードはheader.phpに挿入します。テーマをカスタマイズする必要のない人でもここだけはいじるはず。

子テーマに編集用のheader.phpを用意するのですが、ここでは親テーマのheader.phpをそのまま複製すればOK。

親テーマのheader.phpが読み込まれた後に子テーマのheader.phpが読み込まれて上書きされます。

親テーマの分を読み込む時間がロスになってしまうのが気になるところ。また、親テーマがアップデートでheader.phpの部分に変更があった場合、子テーマ側でも修正しないとアップデートが反映されません。

そういう意味では親テーマに直接記述してその内容を控えておき、アップデートしたら記述し直す方が合理的かもしれません。

functions.phpからheadに追記

このやり方の方がスマートです。

// head内にカスタム用のコードを追加する
function meta_headcustomtags() {
$headcustomtag = <<<EOM

<!-- headに表示させたいコードはここ-->

EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

子テーマを編集して見やすくしていきます

そういうわけで少しずつカスタマイズしていこうと思います。

とりあえずはフォントの種類やサイズから変えていきたいところ。見出しもレベルがわかりやすいようにしたいですね。

あとはソースコードを公開することが多いので、見やすい表示にしたらひとまずってところですかね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です