ワードプレス 子テーマを作ってみた

せっかくWordPress 4.1 にアップデートしたんだから、最新のデフォルトテーマをいじってみよう。

てことで、「Twenty Fifteen」をいれてみた。

このままだと、アップデート時にめんどくさい事になるので、子テーマを用意。 アドセンスの挿入などは、こっちのファイルでやる。これで親テーマが変更されても、そのままいける。

で、まずは子テーマ用のフォルダ「twentyfifteen-child」を「wp-content/themes」ディレクトリ以下に作成。

そこに「style.css」「functions.php」を作成。

スタイルシートには、以下のサンプルコードを適宜書き換えたものをスタイルシートヘッダとして記載。
/*
Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfifteen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-fifteen-child
*/

重要なのは、「Template: twentyfifteen」の一行。この一文で親テーマのディレクトリを読みに行く。

で、このヘッダ以下にオリジナルのスタイルを書いていく。親テーマの後に子テーマを読んでくれないとおかしなことになるので、「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' );
}

これでスタイルシート関連は、ok!

あとは、適宜変更したいファイルを子テーマのディレクトリにツッコむ。

とりあえずアドセンスをフッターに突っ込みたかったので、親テーマから「footer.php」をコピペ。

適当な所にレスポンシブ対応のアドセンスコードをツッコむ。

最後に 「管理画面 > 外観 > テーマ」に移動。子テーマを有効化。

【編集後記】
ゴッツイ久しぶりにメルマガ出してみた。今回からレスポンシブ対応のモバイルファーストなスタイルでメルマガ書いてみた。そのままだとPC で読みづらいかも。。横幅を狭めてスマホなカンジでお願いします。

暑さで溶けそう。。皆さまもご自愛ください。

参照:WordPress codex 子テーマ

コメントを残す

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