【STINGER8】カスタマイズ、子テーマのデフォルト部分の修正！

【STINGER8】ではあらかじめ子テーマも用意されていてインストールすればすぐ使えるようになっています。でもstyle.cssとfunctions.phpで修正したほうが良い部分がありましたので、書いておきたいと思います。

最新の修正版について

※下記の情報はすでに変わっていますので、ご注意ください。
style.cssだけの修正でだいじょうぶです。こちらもそのうち修正されたものが出れば、修正の必要はないと思います。

STINGER8子テーマのダウンロード

STINGER8の子テーマのダウンロード

STINGER8の子テーマに入っているもの

前回書きました記事、WordPressで使用するテーマから子テーマを作ろう！で書きましたように、STINGER8の子テーマにもstyle.cssとfunctions.phpが入っています。それ以外にもjsとimagesフォルダとscreenshot.pngが入っています。

style.cssを修正する

style.cssを見てください。このように書いてあります。

/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20161115
*/
@import url('../stinger8/style.css');

この中の下記部分

@import url('../stinger8/style.css');

となっていますが、現在ではfunctions.phpに書く方法が推奨されています。

子テーマ – WordPress Codex 日本語版

なので、

@import url('../stinger8/style.css');

部分を削除します。

media Queriesを修正する

親テーマの【STINGER8】にあるmedia Queriesと子テーマのmedia Queriesを見比べると微妙に違います。
あと

/*media Queries タブレットサイズ（960px以下）
----------------------------------------------------*/
@media only screen and (max-width: 960x) {
/*-- ここまで --*/
}

ですが、(max-width: 960x)になっています。
960pxが正しいはずです。
とはいえ親テーマでは959pxになっていますので、それを含めて修正を下記に書いておきます。

/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20161115
*/

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {

/*-- ここまで --*/
}

/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {

/*-- ここまで --*/
}

/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {

/*-- ここまで --*/

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {

/*-- ここまで --*/

functions.phpに情報を追加する

さきほどstyle.cssから@import url('../stinger8/style.css');部分を削除しましたので、それに該当するものをfunctions.phpに書きます。

<?php
if ( !defined( 'ABSPATH' ) ) {
exit;
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

style.cssとfunctions.phpを修正したものにそれぞれコピペすれば準備はOKです。