Webの記録

WordPress 子テーマを作ってみた。

投稿日:2015年2月1日 更新日:

この記事は約 5 分で読めます。


WordPressで公開されているテーマを自分なりにカスタマイズしたいとき、2通りの方法があると思います。
1つ目は直接テーマをいじる方法。2つ目は、「子テーマ」を作って子テーマの中にカスタマイズ分をアップする方法。
頻繁にテーマのアップグレードがある場合は、直接テーマをいじっているとアップグレードした時に消えてしまうので、「子テーマ」を作る方法が一番だと思います。
「子テーマ」に関することをメモしていなかったので、今回書くことにします。


子テーマの作り方

親テーマの一部をカスタマイズしたい時に、「子テーマ」を作ってカスタマイズ部分のみ親テーマを上書きします。
最低「style.css」と「functions.php」が必要です。


「functions.php」には、親テーマのcssを読むために、以下のように記述します。
(これを記述することで、cssに@importを記述しなくて済みます)

<?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」は、子テーマと認識してもらうために、最初に以下のようなコメント記述をします。

WordPress Codex「子テーマ」より抜粋

/*
 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
*/

必須は、1行目の「新しいテーマ名」と、7行目の「親のテンプレート名」です。他は省略しても構いません。

親テーマをカスタマイズしたいスタイルは、この後に続けて書きます。


新規でフォルダを作り(名前は自由)、上記の「style.css」と「functions.php」を入れます。
その他のphpファイル(header.phpやindex.php等)は、カスタマイズしたファイルがあれば、これもフォルダの中に入れます。


ファイルが一通り揃ったら、WordPressの「themes」フォルダの中にアップします。
管理画面から、「外観」→「テーマ」で見ると、新しいテーマが加わっていればOKです!
これを有効化して、表示がきちんとされたら「子テーマ」完成です♪


テーマの画像を表示したい時は、子テーマのフォルダの中に「screenshot.png」を入れると表示できます。
サイズは、横300px、縦225pxです。

子テーマのjsフォルダーに個別でjQueryプラグインを追加するとき

親テーマになかったjsファイルを子テーマに追加した時は、子テーマのheader.phpにjsのパスを追加した場合の記述例は以下となります。

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/追加したjsファイル名"></script>

※親テーマのjsファイルを読み込む場合は、以下となります。

get_template_directory_uri()



これで「子テーマ」が出来ました。
アップグレードが多い場合は、テンプレート直書きよりずっと楽です!!
実は、「子テーマ」の存在を知りながら、結構な期間親テーマを直書きしてました。。。時間のムダしておりました。。。
こんなコトなら、早く作れば良かった。。。


【参考】WordPress Codex「子テーマ」

-Webの記録
-,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

IllustratorとPhotoshopで刺繍風のイラストと文字を作ってみた。

この記事は約 1 分で読めます。布地に刺繍をしたみたいなイラストと文字をIllustratorとPhotoshopで作ってみました。 ※布地素材は既に用意している状態の説明です。

no image

WordPress記事中の文章をコピーしたら管理者にお知らせしてくれるプラグイン「Check Copy Contents(CCC)」を試してみた

この記事は約 2 分で読めます。 私の過去記事で人気なのが、「画像のコピーガード」。画像を盗用されることに対して対策を打ちたい方がたくさんいらっしゃるのでしょう。 もしこれが記事中の文章においても、コ …

no image

MacでもWindowsでもOKな「AMPPS」でローカル環境を作ってみる

この記事は約 1 分で読めます。 以前、ローカル環境では「XAMMP」と「MAMP」の環境を作ってみました。 今回は、MacでもWindowsでも使える「AMPPS」でローカル環境を作ってみました。 …

no image

WordPressでRSSフィードを便利に使うプラグイン。

この記事は約 1 分で読めます。 以前、「WordPressサイトでRSSフィードボタンを設置してみた♪」でRSSフィードボタンを設置しました。 その後、RSSフィード関係で便利そうなWordpres …

no image

WordPressプラグイン「WP-Copyright-Protection」で右クリック・ドラック禁止でコピーガード

この記事は約 1 分で読めます。 以前、「右クリック禁止で画像のコピーガード」など、画像のお持ち帰りを禁止したい措置について記事を書きました。 3年ほど前の記事にもかかわらず、今も毎日閲覧数が多いです …