Stinger

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

stinger7-thumbnail

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

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

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

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

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

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

カスタマイズ前

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

stinger7-line-button-before

カスタマイズ後

カスタマイズ 1

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

stinger7-line-button-after-1
カスタマイズ 2

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

stinger7-line-button-after-3

[ad]

1. style.css を編集

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

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

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

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

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

stinger7-line-button-after-1

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

stinger7-line-button-after-2

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ボタンが表示されます)

stinger7-line-button-after-3

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