今回の記事では、無料WordPressテーマ:Stinger7に表示される「LINEに送る」ボタンをカスタマイズする方法を紹介したいと思います。
スマホやタブレットでは「LINEに送る」ボタンを押すとLINEアプリが立ち上がりますよね。
でもPCからサイトを見ているときに「LINEに送る」ボタンを押すと、LINEの公式サイトに移動してしまいます。
今のところPC用のLINEアプリが立ち上がることもないので、ここではPCサイズのLINEボタンを
- CSSのみで非表示にする方法
- PCサイズではLINEボタンのコード自体を読み込ませない方法(ブラウザの幅を狭めても非表示)
の2つの方法をご紹介します。
目次
カスタマイズ前
↓ 記事一覧に表示されるSNSボタン
カスタマイズ後
カスタマイズ 1
↓ PCサイズのみLINEボタンを非表示に
カスタマイズ 2
↓ PCサイズではブラウザの幅を狭めてもLINEボタンは非表示に
(スマホ、タブレットサイズでは同じように表示されます)
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ボタンが表示されます)
今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。