「LINEで送る」ボタンをWordPressに設置する方法

WordPressテーマカスタマイズ
2013.12.31

「LINEで送る」ボタンのコードを取得するには、LINE：運営方法のページを開きます。

運営方法のページに使い方が書いてありますので、その説明は省いて、ページ毎のタイトルとURLの設定方法について書きます。

「LINEで送る」ボタンでページ毎のタイトルとURLを送る方法

「スマートフォンサイトへの設置方法」で取得したコードをそのまま使うことで、「LINEで送る」ボタンにはページ毎のURLが送られるようになっています。

その送られるテキストは、「２送るテキストを選択」で、「ページタイトルとURLを使う」にチェックしたコードを使った場合、送られるのは「記事名｜サイトタイトル」と「URL」が送られます。

「LINEで送るボタン」をパソコンで表示する方法

このコードを使用する場合、デフォルトの設定ではパソコンで表示されません。パソコンで表示するには、「new.jp.naver.line.media.LineButton」にある「”pc”:false」の値を「”pc”:true」に変更します。

line_button

WordPress用のコードを利用する方法

上記に書いたようにそのままコードを利用していもいいのですが、運営方法ページ下に「WordPressのテンプレートに記述する場合」とあり、そこにWordPressで使用する場合のコードが書いてあるので、そのコードの使い方について説明します。

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

LINEで送るボタンのコードの設定と設置方法

  1. 「LINEで送る」ボタンを表示するためにボタン画像をダウンロードして解答します。
  2. テンプレートに「images」フォルダ（ディレクトリ）を作成します。
  3. 「images」フォルダに使用するボタン画像を配置します。
  4. テンプレートの記事本文を表示するthe_contentか記事タイトルを表示するthe_title前後に上記コードをコピーします。Twenty Twelveテーマの場合、content.phpファイルにthe_contentもしくはthe_titleがあるのでコピーします。
  5. imgタグの「ボタン幅」と「ボタン高さ」を使用する画像に合わせて設定します。
  6. ボタン画像のURLを設定します。テンプレートパス「get_stylesheet_directory_uri（※他のタグでもOK）」を使います。

あとは、ファイルや画像などを必要に応じてアップロードします。

参考までに画像の設定をしたコードは下のような形になります。

<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="<?php
 echo get_stylesheet_directory_uri() . '/images/linebutton_36x60.png'; ?>" width="36px" height="60px" alt="LINEで送る" /></a>
スポンサーリンク

コメント

タイトルとURLをコピーしました