「Stinger3」モバイルで接続の時だけ表示するようにカスタマイズ。

Stinger3をカスタマイズ モバイル接続だけ表示する方法

当ブログで使用しているWordpressのテーマのStinger3のカスタマイズをしたので備忘録として残しておこうと思います。

カスタマイズした内容は、モバイルで接続したときにだけタイトルの上に広告やSNSボタンを表示するようにしてみました。

変更する前はこのような状態で特に何も表示していません。

では早速変更をしてみたいと思います。

まずは、header.phpを編集します。
※コマンドラインではなくワードプレスの管理画面のテーマの編集からも編集可能です。

# vim /＜ドキュメントルート＞/wp-content/themes/＜使用しているテーマ＞/header.php

＜div id=”main”＞の下あたりに下記のコードを追記して保存します。

<?php if(is_mobile()) { ?>
<!--mobile_ads-->
<div class="mobile_ads">

 ここに表示させたいコードを記入

</div>
<!--/mobile_ads-->
<?php
}
?>

そして次に、CSSを編集します。

# vim /＜ドキュメントルート＞/wp-content/themes/＜使用しているテーマ＞/smart.css

以下の内容を追記します。
※margin-leftは必要であれば調整してください。

.mobile_ads {
  /*margin-left: -10px;*/
  padding-bottom: 5px;
}

そして、最後にhttpdのサービスを再起動します。

# service httpd graceful

これで設定は完了です

左の画像が変更前で、右の画像が変更後の画像です。

今回僕はSNSで少しでも広まることを期待してSNSボタンを設置しました。
広告を表示させたい場合は広告のコードを用意してもらえればと思います。

参考になりましたでしょうか。もしお役にたちましたらせっかくなのでSNSボタンでシェアしていただけると幸いです。

参考にさせていただいたサイト

http://n2apps.jp/