sns.php

ここ最近のログを見ると、スマホで見てくれてる人が多くなったので。 ざっくりな手順はこんな感じ。 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)の編集はおしまい。 ちゃんとLINEのアイコンが表示されるか確認してみる。 とりあえず、いつも表示されているSNSのバーはLINEが表示されとるっぽい。 １コのリンクをクリックして、１つの記事を表示してみる。 記事の下の方にあるSNSのリンクにLINEが表示されとるっぽい。 PCではLINEのアイコンのリンク先はLINEの公式サイトみたい。 スマホだとLINEが起動してリンクを送信するか聞いてくる。 んで、スマホでLINEのアイコンをクリックすると、LINEが起動して記事のURLの送信先を選んでくれって言ってくるようになる。 そんなこんなで、メモってことで。

WordPressメモ Stinger5のSNSボタンが並んでるところに”Pocket”ボタンを追加してみる

WordPressメモ テーマをStinger5にしてみる

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

WordPressメモテーマをStinger5にしてみる