子テーマ化

今日は朝から雨。

富士山の写真も撮れないので、去年の今日は何してたかって写真でも。

懐かしいですね。

あれからもう1年ですか。

 

さて、今日はかなり以前から気にかけていたけど面倒なのでずっと避けてきた作業をやってみることにしました。

それはWordPressの子テーマの作成。

今自分で管理しているサイトは、

F360、としろぐ、360panoramaworldの3つですが、全てWordPressで作っています。

しかも全て同じ「Tweny Ten」というテンプレートを使って、少しカスタマイズしています。

今までにも何回か記事にしたことがありますが、例えばフォントをデフォルトの明朝体からゴシック体にしたり、1カラムの幅を変えたりと、デフォルトでは気に入らない部分を変えるために、恐る恐るスタイルシートをいじっていました。

ですが、テンプレートがアップデートされるとせっかくいじった箇所もデフォルト状態に戻ってしまうので、イタチごっこのようでした。

この解決策として、「子テーマ」というのを作り、それをいじることで、元々のテンプレートをアップデートしても変わらないということを知ってはいたのですが、かなり面倒そうな作業なのでビビってやってなかったのです。

とは言っても、この先避けて通れないと思われるので、思い切ってやってみることにしました。

下記の記事を参考にやってみたのですが、どれも最終的にうまくいかず、合っているかどうかわからずに自分なりにやってみたらなんとなくできてしまったので、忘れないように記事にしておきます。

参考サイト①、参考サイト②、参考サイト③。

ちなみに今日はF360だけやってみました。

ちょっと様子をみて問題なさそうなら他のサイトも同様にやってみます。

 

さて、まずはディレクトリ（フォルダ）を作ります。

とりあえずデスクトップ上に「twentyten_child」というフォルダを作って、その中に「style.css」と「functions.php」という2つのファイルを作成します。

と、書いてあってもどうやって作るのかわかりませんでしたが、とりあえずテキストエディタで作って拡張子をそれぞれ.css、.phpにしたらできました。

 

ちなみに、後からでもできるとは思いますが、style.cssには以下を記述します。

/*
Template:twentyten
Theme Name:twentyten_child
Theme URI:http://f360.jp
Description:twentyten の子テーマです
Author:Hitoshi Oikawa
Version:1.0
*/

実際には必須項目は

/*
Template:twentyten
Theme Name:twentyten_child
*/

だけのようで、あとはカッコつける感じでしょうかね？

 

さらにある記事では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’ );

}

私も始めはそうしたのですが、結果的にうまくいかずに後で消すことになります。

 

ここまでできたら、それらのファイルが入っている「twentyten_child」というフォルダをFTPツールなどで「wordpress/wp-content/themes」以下にアップロードします。

この時点でthemesフォルダ以下に元々あった親テーマの「twentyten」と今作った子テーマの「twentyten_child」というフォルダが存在することになります。

そしてF360にログインしてテーマを変える画面に行くとtwentyten_childという子テーマが選べるようになっており、有効化することで子テーマとして使えるようになります。

そして、この子テーマをカスタマイズすることで、親テーマがアップデートされてもカスタマイズ部分は問題なく継続できるという仕組みなのですが・・・

 

ある記事にはスタイルシートに以下の記述をすることで、親テーマを引き継ぐから、あとはカスタマイズ部分だけを追加で書き込めば良いと書いてありました。

@import url(“../twentyten/style.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’ );

}

を記述することで、親テーマを呼び出す方法を推奨すると書いてあった記事もあったのでやってみたのですが、こちらもうまくできませんでした。

結構いろいろと試してみたのですが、私として最終的にうまくできたような気がするのは、

 

①functions.phpに書いたコードは消す

②style.cssに書いた@import url(“../twentyten/style.css”);も消す

③style.cssに書いてある

/*
Template:twentyten
Theme Name:twentyten_child
Theme URI:http://f360.jp
Description:twentyten の子テーマです
Author:Hitoshi Oikawa
Version:1.0
*/

に続き、親テーマのスタイルシートをそっくりそのままコピペして、上の部分とカブっていると思われる部分

/*
Theme Name: Twenty Ten
Theme URI: https://wordpress.org/themes/twentyten/
Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable — make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the “Asides” and “Gallery” categories, and has an optional one-column page template that removes the sidebar.
Author: the WordPress team
Author URI: https://wordpress.org/
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, white, two-columns, fixed-layout, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu, flexible-header, featured-images, featured-image-header
Text Domain: twentyten
*/

だけを消す。

④過去の記事をみながら、面倒だけどもう一度カスタマイズする。（フォントのゴシック化やカラム幅の変更など）

 

という手順でやってみたら、なんとなくできた感じがします。（もしこの方法でうまくできるなら、始めに今あるカスタマイズ後のスタイルシートをコピーしておけば手間が省けるハズ）

とりあえず今日はF360だけやってみて、SafariとFirefoxで確認してみたけど問題なさそうでした。

ちょっと様子をみて、本当に問題なさそうなら他の2つのサイトも同じ方法で子テーマ化したいと思いますので、もしF360をみておかしな箇所がありましたら報告してもらえると助かります。

は〜疲れた。