「LINEで送る」ボタンをWordPressに（しかもスマホでのみ）設置・表示させる方法

ものすごい勢いでユーザー数を増やしている LINE。その LINE が公式のソーシャルメディアボタンをリリースしました。
それがこちら・・・

LINEで送るボタン！

設置に関してはこちらに記載されています。とても簡単そうです。WordPress 向けのタグもちゃんと用意されていて、とてもありがたいですね。
早速設置してみようと思ったのですが、どうもスマホ対応のみのようです。スマホでサイトやブログを見ている人がこの「LINEで送るボタン」を押すと、記事タイトルや URL を簡単にシェアすることができるというわけです。
しかし、PC で閲覧している人が「LINEで送るボタン」を押してしまうと、LINE の公式サイトへとジャンプしてしまいます。つまり、せっかく見に来てくれているユーザーを、自分のブログから離脱させてしまうのです。なので、設置するのはいいけど、スマホでは表示・PC では非表示にした方がいいなという見解に至りました。

まず基本：LINEで送るボタンをWordPressに設置する方法

まずは LINEで送るボタンを設置する手順を示しておこうと思います。

(1) ボタン画像をダウンロード＆アップロード

「LINEで送るボタン」の画像は自分のサーバーに自分で設置する必要があります。まずは、こちらのページの最下部から、ボタンの画像フォルダをダウンロードしてください。【linebutton】というフォルダがダウンロードできると思います。
中には画像ファイルが 5 種類入っています。

(2) ボタン画像をアップロード

ダウンロードした画像は、フォルダ（linebutton）ごとサーバーにアップしましょう。どこにアップしてもいいんですが、子テーマファイルに images フォルダを用意してその中に入れるのがいいと思います。

(3)「LINEで送るボタン」タグの編集

LINEで送るボタンの WordPress 用のタグは、以下のようになっています。

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

任意で指定するのは 3 つあります。

• ボタン画像の URL
• ボタン画像の幅
• ボタン画像の高さ

URL は絶対パスで指定。幅や高さは使いたい画像ファイル名にある数字をそのまま当てはめれば大丈夫です（ px などの単位は不要）。

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="http://ドメイン/wp-content/themes/twentyfifteen-child/images/linebutton/linebutton_40x40.png" width="40" height="40" alt="LINEで送る" /></a>

(4) テンプレートに「LINEで送るボタン」を貼る

次に WordPress のテンプレートに「LINEで送るボタン」のタグを書き込みましょう。どのテンプレートに書き込むか悩むところですが、今回は【content.php】に書き込みました。他の候補としては、【content-single.php】や【comments.php】などが上げられます。
詳しくはこちらを参照ください。

どこに「いいね！」ボタンなどのソーシャルプラグインのタグを埋め込めばいいのか？

スマホで閲覧している人にのみ「LINEで送るボタン」を表示させる条件分岐分岐タグの使い方

さて、普通の設置方法が分かったところで、次は条件分岐タグを使ってスマホで見ている場合のみ「LINEで送るボタン」を表示させたいと思います。PC で見た場合は非表示なるというわけです。
条件としては・・・

という指定ができれば OK ですね。

PCサイトとスマートフォン用サイトを分ける条件分岐タグを発見

スマートフォン用のコンテンツを指定できる条件分岐タグを探してみたところ、やはりありました！さすがです！
そのタグはこちら

wp_is_mobile()

ただし、WordPress のバージョンが 3.4 以降ということで、使用する場合はバージョンに気をつけてください。

スマホ向け条件分岐タグの設置例

「LINEで送るボタン」をスマホ向けサイトでのみ表示されるようにする、具体的なソースコードはこちらです。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile()): //スマートフォン向け ?>
	<!-- ここに「いいね！ボタン」などソーシャルプラグインのコードを記載 -->
	<!-- ▼ LINEで送るボタンここから ▼ -->
	<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>
	<!-- ▲ LINEで送るボタンここまで ▲ -->
<?php elseif ( is_search() || is_home() || is_archive() ) : //このタグは無くてもOK ?>
<?php else: //スマートフォン以外 PC向け ?>
	<!-- ここに「いいね！ボタン」などソーシャルプラグインのコードを記載 -->
<?php endif; ?>

if の後に function なんたらかんたらと、なんだかややこしい事が書いてありますが、参考にさせて頂いたサイトに書かれていた通りのやっておりますので、詳しいことは分かりません。ただ、WordPress のバージョン 3.4 以前バージョンであったとしてもエラーにならない書き方のようです。

実際にどのように表示されているのか・・・？

条件分岐タグを使えばご覧の通り、

PC で見たときは「LINEで送るボタン」は表示されませんが、スマホで見ているときはちゃんと表示されています。
ちなみに、スマホ向けの表示を WordPress のプラグイン WPtouch で設定している場合は、テンプレートファイルに書き込んだソーシャルプラグイン関係がうまく表示できません。
この点は解決できませんでしたが、EZ zenback などを使って組み込むと上手くいくようです。ただし、その場合は条件分岐タグが使えなくなるので、スマホ用の CSS で表示・非表示を変えるしかないのかな〜・・・と思います。
ぜひ試してみてください。