【Stinger3カスタマイズ】スマホ用smart.cssを反映させる方法

WordPress
Photo by Pai Shih

WordPress用テーマ「Stinger3」の最新版が公開されたので、子テーマを作成して久しぶりにカスタマイズをしてみたのですがどうでしょうかね?出来るだけシンプルにしてみたんですが・・・見やすくなったでしょうか。

ここ数日、スマホ用レイアウトも少し変更しようとsmart.cssもいじっていたのですが、CSSが反映されないという壁にぶち当たっていました。

前回カスタマイズした時にはちゃんと反映されたのに・・・何がおかしいのか全然分からなかったのですが、やっと思い出したので備忘録として残しておきます。

スポンサーリンク

smart.cssを反映させるためのおまじないとは?

Stinger3をカスタマイズするのに子テーマを作成する方法はもうご存知だと思いますが、その際にsmart.cssを反映するのにはちょっとしたおまじないが必要です。

もし作成した子テーマディレクトリの中にheader.phpを入れてない場合は、親テーマからコピーしてブチ込んであげて下さい。

簡単に言うと、header.phpの一部を書き換えてあげます。その箇所は・・・

変更前

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>
</head>

6行目の<?php echo get_template_directory_uri(); ?>という箇所です。これを”stylesheet”と変更してあげます。

変更後

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>
</head>

上記のようになります。こうしてあげるコトでsmart.cssも子テーマの方から読み込んでくれるようになるので、同じように悩んでいる方がいましたら書き換えて見て下さいね♪

さて、コレでスマホ表示もレイアウト変更出来るようになったので頑張りまーす!皆さんもStinger3で楽しんで下さいね~♪

コメント

タイトルとURLをコピーしました