StingerのSNSシェアボタンをスマホ表示の際に消す方法

本サイトは広告費から運営されております。

SEO効果の高いWordPressテンプレートとして有名なStinger。私も利用しているのですが、「ちょっとな。。」と思っていたのが、スマホで見た時フッターに表示されるSNSボタン群。それを消すための方法を書いていきます。

課題だったスマホUI

StingerのスマホUIで改善したかったのはこの部分です。
stingerでスマホの読みやすさを高めサイト周遊率を高めるための方法
記事にSNSボタンエリアがかぶさっていて、読みにくかったんですよね。しかも、Adsenseが嫌う誤クリックの誘発につながってしまいそうで、これを外してしまおうと考えました。「PAGE TOP↑」と共に。

スポンサーリンク

SNSボタン群を外す簡単な方法

まず、SNSボタン群消去から。
WordPressダッシュボードのfooter.phpを編集します。
ここの

<?php if (is_home()) { ?>
<div id="snsbox">
  <div class="sns">

あたりをいじります。
結論から言うと、以下のように編集すればOK。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php else: ?>
<?php if (is_home()) { ?>
<div id="snsbox">
  <div class="sns">

<中略>
      </li>
    </ul>
  </div>
</div>
<?php } ?>
<?php endif; ?>

この意味について解説していきます。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php else: ?>

のエリアがスマホサイトアクセスの際に表示するもの。「wp_is_mobile()」というのがスマホサイトかどうかを判定する命令です。つまりこのコードでは、スマホサイトの時なにも表示しないという意味になります。
で、else以下は「それ以外の時は」という意味ですから、PCサイトにアクセスしたときの命令になります。この時にで囲まれたもの(SNSボタン群)を表示しています。

次に「PAGE TOP↑」を消す方法。
これは簡単で、footer.phpの

<div id="page-top"><a href="#wrapper">PAGE TOP ↑</a></div> 

を消すだけです。または、以下のようにして無効化するだけ。

<!-- <div id="page-top"><a href="#wrapper">PAGE TOP ↑</a></div> -->

これで、「PAGE TOP↑」が消えます。

スポンサーリンク

課題だったスマホUI改善後

2つの項目を消した後のページがこちら。
stingerのスマホUIを改善して読みやすくする
大分読みやすくなりましたね。これでユーザーにゆっくり記事を読んでもらう事ができます。よかった。よかった。

まとめ

・Stingerのスマホページを編集すると、もっと読みやすくなる
・簡単にできる改善項目なので、SNSボタン群を除きたい人はぜひやってみてほしい

なお、今回の記事は@RyunNoteさんのこちらの記事を参考にさせて頂きました。@RyunNoteさん!ありがとうございました!
参考記事:[ℜ]【Stinger3カスタマイズ】追尾型SNSボックスをスマホのみ非表示に

WordPressをカスタマイズしたい方はこちらもどうぞ

この記事を書いた人のTwitterアカウント

ツイートをまず見てみる>>@TwinTKchan
フォローいただければ、最新記事や、ブログで稼ぐ方法、投資でお金を増やす情報が手に入ります。

【無料】ブログで収入を得る方法をメルマガで配信中

知識0から「ブログで収入を得る方法」を学べるメルマガ
メールアドレス
YouTubeでも無料で学べます!

>>チャンネル登録はこちらから

いつもシェア感謝です!今回もぜひ

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!

SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。