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

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

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

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

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

ブラウザで次のURLを開く。
~~http://media.line.me/howto/ja/~~ URLが変更になったっぽ…
https://social-plugins.line.me/ja/
“設置方法”ってなページが開くので、下の方にスクロールしていって…

ページの下にある”ボタン画像をダウンロード”をクリックする。
※このページはあとで使うので閉じないでおくといいかも…。
“linebuttons.zip”ってファイルが保存されたら、アイコンの画像のダウンロードはおしまい。

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

さっきダウンロードしてきた”linebuttons.zip”って圧縮ファイルを解凍する。

解凍すると”linebuttons”ってフォルダができる。
“linebuttons”ってフォルダを開くとアイコンの画像がいろいろ入ってる。

今回は送るって書いてあるアイコンの画像を使う事にする。
WordPressの管理メニューで”メディア”の”新規追加”をクリックする。

“メディアのアップロード”ってページの下にある”ここにファイルをドロップ”ってとこに、さっきのアイコンの画像をドラッグ＆ドロップする。
アップロードが終わると、アップロードした画像がプレビューされる。
これで、アップロードはおしまい。

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

WordPressの管理メニューで”外観”ってとこの”テーマ編集”ってのをクリックする。
“テーマの編集”ってページが開く。

んで、ページの右側にある”sns.php”って項目をクリックする。
ここで、最初に見たLineのページに戻って、ページの下の方にある”3 記述例”ってとこを表示する。

んで、”Webサイトの場合”ってとこにあるタグをコピーする。
※”WordPressのテンプレートに記述する場合”ってとこがあるけど、こいつだと何故かレイアウトが崩れちゃう…。
さっきLINEのサイトでコピーしたタグを、とりあえずsns.phpのコードの中に貼り付ける。
sns.phpはコードの順番にアイコンを表示していくみたいなので、今回は一番下に追加することにする。
続けて、”[ボタン画像のURL]”ってとこに、さっきアップロードしたアイコンのURLを貼付ける。
WordPressの管理メニューのうち、”メディア”ってとこをクリックする。

“メディアライブラリ”ってページが表示されるので、さっきアップロードしたLINEのアイコンの名前んとこをクリックする。
“メディアを編集”ってページが表示されるので、ページの右側にある”ファイルのURL”ってとこに書いてあるURLをコピーする。
もいっかい”テーマの編集”ってページに戻って、”[ボタン画像のURL]”ってとこをアイコンの画像のURLに書き換える。
続けて、”[ボタン幅]”ってとこは”36″、”[ボタン高さ]”ってとこは”60″に書き換える。
んで、ページの下の方にある”ファイルを更新”ってボタンをクリックする。
ページの上のほうに”ファイルの編集に成功しました”って表示されたら、sns.phpの編集はおしまい。
※あとでsns2.phpってファイルも同じタグを書くので、コピーしとく。

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

“テーマの編集”のページで、sns2.phpをクリックする。
sns2.phpのコードが表示されたら、さっきコピーしといたタグを貼り付ける。
sns2.phpでも、タグを貼付ける位置はコードの一番下にすることにする。

貼付けたらこんな感じ。
んで、ページの下の方にある”ファイルを更新”ってボタンをクリックする。
ページの上のほうに”ファイルの編集に成功しました”って表示されたら、sns2.phpの編集はおしまい。
こんで、全部のスクリプト(php)の編集はおしまい。