Stinger7：「LINEに送る」ボタンをスマホ,タブレットのみに表示させる方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、無料WordPressテーマ：Stinger7に表示される「LINEに送る」ボタンをカスタマイズする方法を紹介したいと思います。

スマホやタブレットでは「LINEに送る」ボタンを押すとLINEアプリが立ち上がりますよね。
でもPCからサイトを見ているときに「LINEに送る」ボタンを押すと、LINEの公式サイトに移動してしまいます。

今のところPC用のLINEアプリが立ち上がることもないので、ここではPCサイズのLINEボタンを

1. CSSのみで非表示にする方法
2. PCサイズではLINEボタンのコード自体を読み込ませない方法（ブラウザの幅を狭めても非表示）

の2つの方法をご紹介します。

カスタマイズ前

↓ 記事一覧に表示されるSNSボタン

カスタマイズ後

カスタマイズ 1

↓ PCサイズのみLINEボタンを非表示に

カスタマイズ 2

↓ PCサイズではブラウザの幅を狭めてもLINEボタンは非表示に
（スマホ、タブレットサイズでは同じように表示されます）

[ad]

1. style.css を編集

今回のように「○○のサイズのみ」というカスタマイズは、CSSのメディアクエリを使用すれば簡単にできます。

Stinger7では780pxを境にメディアクエリが設定されているので、横幅（解像度）が780pxより大きくなったらLINEボタンを非表示にしていきましょう。

以下のコードを子テーマの style.css に追加すると、、、

@media only screen and (min-width: 781px) {
    .sns .line {
        display: none;
    }
}

LINEボタンが非表示になりました。

分かりにくいかもしれませんが、スマホサイズやタブレットサイズでは表示されています　↓

2. LINEボタンのPHPコードを読み込ませないようにするには

せっかくなので、LINEボタンのPHPコード自体を読み込ませないようにする方法も紹介しておきます。
（ほんの少しだけ速度がアップするかもしれません）

2-1. コード編集時の注意点

・下で紹介するカスタマイズは、親テーマをカスタマイズしていきます。
親テーマをアップデートした場合は、カスタマイズの内容が消えてしまうので注意して下さい。

・また、下のカスタマイズではPHPファイルを編集していきます。管理画面に入れなくなることもあるので、PHPコードは注意して編集するようにして下さい。

2-2. sns.php を編集

SNSを表示させるファイルは2つあるので、LINEボタンのコードを読み込ませないようにするには、2つのファイルを編集することが必要になります。

バージョンによって行数が変わるかもしれませんが、44行目付近にある以下のコードを、<?php if ( wp_is_mobile() ) { ?> と <?php } ?> で囲みます。

↓ コード編集前

<!--LINEボタン-->   
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><span class="snstext">LINEへ送る</span></a>
</li>    

↓ コード編集後

<!--LINEボタン-->   
<?php if ( wp_is_mobile() ) { ?>
    <li class="line">
    <a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><span class="snstext">LINEへ送る</span></a>
    </li>     
<?php } ?>

2-3. sns-top.php を編集

SNSを表示させるもう一方のファイルである sns-top.php も、 sns.php と同じように <?php if ( wp_is_mobile() ) { ?> と <?php } ?> で囲みます。

↓ コード編集前（ sns-top.php 70行目付近 ）

<!--LINEボタン-->   
<li class="line">
    <a target="_blank" href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><span class="snstext">LINEへ送る</span></a>
</li>   

↓　コード編集後

<!--LINEボタン-->   
<?php if ( wp_is_mobile() ) { ?>
    <li class="line">
        <a target="_blank" href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><span class="snstext">LINEへ送る</span></a>
    </li>   
<?php } ?>

これでPCサイズではLINEボタンのコードが読み込まれなくなりました。
（PCサイズではブラウザの幅を狭めてもLINEボタンは表示されませんが、スマホやタブレットで見た場合にはLINEボタンが表示されます）

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。