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

WordPress

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

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

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

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

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

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

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

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

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

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

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

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

23912_26

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

23912_27

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

23912_28

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

23912_29

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

23912_30

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