WordPressメモ Stinger3のSNSボタンが並んでいるところに”LINEへ送る”ボタンを追加してみる

2014/09/18WordPress

ここ最近のログを見ると、スマホで見てくれてる人が多くなったので。

ざっくりな手順はこんな感じ。

• LINEのアイコンの画像をダウンロードしてくる
• アイコンの画像をWordPressを経由してサーバーにアップロードする
• StingerのSNSのスクリプト(php)にリンクを追加する

んで、まずはアイコンの画像をダウンロード。

1. ブラウザで次のURLを開く。
   http://media.line.me/howto/ja/ URLが変更になったっぽ…
   https://social-plugins.line.me/ja/
2. “設置方法"ってなページが開くので、下の方にスクロールしていって…
   
   ページの下にある"ボタン画像をダウンロード"をクリックする。
   ※このページはあとで使うので閉じないでおくといいかも…。
   
3. “linebuttons.zip"ってファイルが保存されたら、アイコンの画像のダウンロードはおしまい。
   

次にLINEのアイコンの画像をアップロードする。

1. さっきダウンロードしてきた"linebuttons.zip"って圧縮ファイルを解凍する。
   
   解凍すると"linebuttons"ってフォルダができる。
   
2. “linebuttons"ってフォルダを開くとアイコンの画像がいろいろ入ってる。
   
   今回は送るって書いてあるアイコンの画像を使う事にする。
   
3. WordPressの管理メニューで"メディア"の"新規追加"をクリックする。
   
   “メディアのアップロード"ってページの下にある"ここにファイルをドロップ"ってとこに、さっきのアイコンの画像をドラッグ＆ドロップする。
   
4. アップロードが終わると、アップロードした画像がプレビューされる。
   
5. これで、アップロードはおしまい。

んで、スクリプトを編集する。
まずは、１つの記事を表示したときに、記事の下んとこに表示させるようにsns.phpを編集する。

1. WordPressの管理メニューで"外観"ってとこの"テーマ編集"ってのをクリックする。
   
2. “テーマの編集"ってページが開く。
   
   んで、ページの右側にある"sns.php"って項目をクリックする。
   
3. ここで、最初に見たLineのページに戻って、ページの下の方にある"3 記述例"ってとこを表示する。
   
   んで、"Webサイトの場合"ってとこにあるタグをコピーする。
   ※"WordPressのテンプレートに記述する場合"ってとこがあるけど、こいつだと何故かレイアウトが崩れちゃう…。
   
4. さっきLINEのサイトでコピーしたタグを、とりあえずsns.phpのコードの中に貼り付ける。
   sns.phpはコードの順番にアイコンを表示していくみたいなので、今回は一番下に追加することにする。
   
5. 続けて、"[ボタン画像のURL]"ってとこに、さっきアップロードしたアイコンのURLを貼付ける。
   WordPressの管理メニューのうち、"メディア"ってとこをクリックする。
   
   “メディアライブラリ"ってページが表示されるので、さっきアップロードしたLINEのアイコンの名前んとこをクリックする。
   
6. “メディアを編集"ってページが表示されるので、ページの右側にある"ファイルのURL"ってとこに書いてあるURLをコピーする。
   
7. もいっかい"テーマの編集"ってページに戻って、"[ボタン画像のURL]"ってとこをアイコンの画像のURLに書き換える。
   続けて、"[ボタン幅]"ってとこは"36″、"[ボタン高さ]"ってとこは"60″に書き換える。
   
8. んで、ページの下の方にある"ファイルを更新"ってボタンをクリックする。
9. ページの上のほうに"ファイルの編集に成功しました"って表示されたら、sns.phpの編集はおしまい。
   ※あとでsns2.phpってファイルも同じタグを書くので、コピーしとく。
   

続けて、スクロールしたときにいつもくっついてくるアイコンのバーみたいなやつに表示されるようにsns2.phpを編集する。

1. “テーマの編集"のページで、sns2.phpをクリックする。
   
2. sns2.phpのコードが表示されたら、さっきコピーしといたタグを貼り付ける。
   sns2.phpでも、タグを貼付ける位置はコードの一番下にすることにする。
   
   貼付けたらこんな感じ。
   
3. んで、ページの下の方にある"ファイルを更新"ってボタンをクリックする。
4. ページの上のほうに"ファイルの編集に成功しました"って表示されたら、sns2.phpの編集はおしまい。
   
5. こんで、全部のスクリプト(php)の編集はおしまい。

ちゃんとLINEのアイコンが表示されるか確認してみる。
とりあえず、いつも表示されているSNSのバーはLINEが表示されとるっぽい。

１コのリンクをクリックして、１つの記事を表示してみる。

記事の下の方にあるSNSのリンクにLINEが表示されとるっぽい。

PCではLINEのアイコンのリンク先はLINEの公式サイトみたい。
スマホだとLINEが起動してリンクを送信するか聞いてくる。

んで、スマホでLINEのアイコンをクリックすると、LINEが起動して記事のURLの送信先を選んでくれって言ってくるようになる。

そんなこんなで、メモってことで。

[amazonjs asin="4883379248″ locale="JP" title="WordPressレッスンブック HTML5&CSS準拠"]