スマホから見た時にだけ「LINEで送るボタン」を表示させる方法（WordPress用）

ここ最近LINEの勢いがハンパないですよね。スタンプだけじゃなくてゲームも大人気で、もはや完全にインフラ状態。スマホ利用者の中では使っていない人を探す方が難しいくらいなのではないでしょうか。そんなLINEから、ブログやサイトに設置できる「LINEで送る」ボタンが公開されたので、このブログにも設置してみました！

ちょっと手を加えてスマホで見た時だけ表示されるようにしたので、メモかねて設置方法をご紹介。

LINEで送るボタンとは

Webサイトやブログの情報を簡単にLINEでシェアできるボタン。これによって、ユーザーは気に入った情報を友達や家族に気軽にシェアすることが可能となります。また、サイト運営者としてもLINEユーザーからの集客が期待できる。双方にメリットのあるボタンというわけですな。詳しくは以下のページをご覧ください。

LINEで送るボタン｜メディア運営者の方へ

作業にあたって

今回、LINEで送るボタンを設置するにあたり、以下のふたつの記事を参考にさせていただきました！

スマホから見た時だけ表示するという部分は「アナザーディメンション」さんの記事。

【WordPress】User-agentを判定してモバイル用コンテンツを切り分け、検証する方法

LINEで送るボタンの設置方法については「あかめ女子のwebメモ」さんの記事。

[Å] LINEで送るボタンをPC版とモバイル版に設置しました！ | あかめ女子のwebメモ

どちらもすごく分かりやすい記事でした！ありがとうございます。

設定方法

※ご注意

LINEボタンを設置するだけならコピペしてちょちょいと手直しするだけなので簡単なのですが、スマホで見た時だけ表示させるためにはfunctions.phpというデリケートな部分をいじるので、必ずバックアップを取ってから行いましょう(>Д<;) なお、作業は必ず自己責任でお願いします。環境によっては正常に動作しない可能性もありますのでご了承ください。また、この作業によって何かトラブルが発生しても一切責任を負いかねますので、その認識でお願いします。

作業手順

まずはfunctions.phpに以下の記述を追加します。これはスマホから見たときとPCから見たときの表示を切り替えるための下準備みたいなものです。

function is_mobile(){
  $useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android', // 1.5+ Android
    'dream', // Pre 1.5 Android
    'CUPCAKE', // 1.5+ Android
    'blackberry9500', // Storm
    'blackberry9530', // Storm
    'blackberry9520', // Storm v2
    'blackberry9550', // Storm v2
    'blackberry9800', // Torch
    'webOS', // Palm Pre Experimental
    'incognito', // Other iPhone browser
    'webmate' // Other iPhone browser
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

万が一functions.phpをいじったあとに画面が真っ白になってしまった時は以下の記事を参考に復旧を試みてください。焦ると思いますが落ち着いて。

[WordPress]functions.phpの修正方法

続いてLINEボタンの設置です。テーマを編集し、設置したい場所に以下のコードを追加します。

<!-- LINEボタンここから-->
<!--スマホで見た時の表示 -->
<?php if(is_mobile()) { ?>
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><img src="ボタン画像のURL" width="ボタン幅" height="ボタン高さ" alt="LINEで送る" /></a>
<!--スマホで見た時の表示終わり -->
<!-- PCで見た時の表示 -->
<?php } else { ?>
<!-- 何も表示しない -->
<?php } ?>
<!-- PCで見た時の表示終わり -->
<!-- LINEボタン終わり -->

コード内の「ボタン画像のURL」および「ボタン幅」、「ボタン高さ」は自分の環境に合わせて書き換えてください。ボタンの画像については、あらかじめ以下の公式サイトで入手し、アップロードしておくといいでしょう。

設置方法｜LINEで送るボタン

作業自体はこれで終了です。

ちなみに、わたしの場合はこんな感じの記述になっております。場所は記事の終わり部分に設置しました。

<!-- LINEボタンここから-->
<!--スマホで見た時の表示 -->
<?php if(is_mobile()) { ?>
<div style="margin:10px 0px;">
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><img src="/image/post/2012/12/linebutton.png" width="88px" height="20px" alt="LINEで送る" /></a>
</div>
<!--スマホで見た時の表示終わり -->
<!-- PCで見た時の表示 -->
<?php } else { ?>
<!-- 何も表示しない -->
<?php } ?>
<!-- PCで見た時の表示終わり -->
<!-- LINEボタン終わり -->