wordpressの子テーマについて


WordPressで使っているテーマをアップデートするたびに、スタイルシートを毎回編集していたのだが、どうやらそんな事しなくてよかったらしい。

WordPressのテーマには子テーマ機能というものが実装されていて、これを使うと

テーマのアップデート毎に
カスタマイズ部分が
消されることが無い

どうやるかというと

こちらにやり方が載っている

この方法を上から実践すれば、子テーマの設置は完了する。
具体的に子テーマの作成をやってみた時のメモを少々

 

01、XXX-childというディレクトリを作成する

このXXXの部分は、子テーマの親のテーマの名前になる
以下のような状態だぞ

wp_child01

これはFileZilaでのFTP上の画面
上記の場合

twentyfourteenのテーマの子テーマを作るので
twentyfourteen-childというディレクトリを作る

 

 

02、次にstyle.cssとfunctions.phpを作る

さっき作ったXXX-childのディレクトリ内に二つをアップする。
作るものは、style.cssfunctions.phpこの二つだよ。作り方は、他からコピーしても、txtファイルの拡張子を書換えてもなんでもいい。中身はただのテキストなのだから!

style.cssには以下のようなスクリプトを書く

[css]

/*
/最低限この二つ名前とテンプレート名を入れる/
/テンプレート名は親になるテーマの名前/
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/

[/css]

Theme Name:には何か好きなテーマ名を
Template: は親になるテーマの名前を記述する
上記の場合は親テーマであるtwentyfourteenと記述

たったこれだけ!!

functions.phpは以下の内容書き込む

[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’ );

[/php]

意味はざっくり言うと、私は子テーマなので親テーマのスタイルの内容を引き継ぎますみたいな感じ。
これは丸っとコピーして、functions.phpに書き込んでおしまい

せっかくなので、styleシートとfunctions.phpをダウンロードできるようにしておこう

ダウンロード:functions

※もちろん必要に応じてstyleシートの中身は書き換えてね!

 

この2つのファイルをさっき作ったXXX-childのディレクトリに放り込む。

wp_child02

これでほぼ準備完了。

 

 

03、最後にテーマを有効化しておしまい

今作った新しいテーマが新たに追加されているので、
有効化ボタンを押したらおしまい!!
(※画像ではTwenty Fourteen Childの名前)

簡単だぜ!!!

wp_child03

これで親テーマを基本的には使用しつつ
子テーマ独自のスタイルシート設定などを盛り込める寸法だ!!

以上で終了!

 

 

以下は補足

子テーマのスタイルシートは、親テーマで設定されたテーマの内容をオーバーライドするので、部分的にも全体的にも編集可能のようだ。

自分の場合はフォントを変更したかったので
以下のように書き換えてみた

[css]

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://wordpress.org/themes/twentyfourteen
Description: Twenty Fourteen Child Theme
Author: ChaptainHansode
Author URI: http://www.sakaiden.com/
Template: twentyfourteen
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-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, accessibility-ready
Text Domain: twentyfourteen-child
/
/
Twenty Fourteenの子テーマ化*/

/文字指定/
body,
button,
input,
select,
textarea {
font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,Meiryo,メイリオ,sans-serif;
}

[/css]

 

微妙に長くななっているのは
別に意味はない

ただカッコつけたいだけなのだ(`・ω・´)

    /*文字指定*/
font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,Meiryo,メイリオ,sans-serif;

と言う部分を加えて、全体のフォントを変更している

実はまだまだ、ほかにも変更したい部分があるのだが
正直言って、暇がない・・・

なので今はコレが精一杯

どうでもいいけど子テーマで全部作りなおすなら
そもそもテーマ丸々作った方がイイよね?

Leave a comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください