【STINGER8】ではあらかじめ子テーマも用意されていてインストールすればすぐ使えるようになっています。でもstyle.cssとfunctions.phpで修正したほうが良い部分がありましたので、書いておきたいと思います。
最新の修正版について
【STINGER8】のカスタマイズ、子テーマの使い方！
【STINGER8】で子テーマの使い方を書きたいと思います。 子テーマをダウンロードする 【STINGER8】では親テーマと共に子テーマもあらかじめ用意されていますので、とても簡単です。 「STINGER8」のダウ...
shiritai.net
2017.10.21
※下記の情報はすでに変わっていますので、ご注意ください。
style.cssだけの修正でだいじょうぶです。こちらもそのうち修正されたものが出れば、修正の必要はないと思います。
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に書く方法が推奨されています。
なので、
@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です。
コメントをどうぞ