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

2014/10/29WordPress

最近自分でもPocketをよく使うんで、設置してみてはどうかと…。
ざっくりこんな感じ。

• PocketのサイトでボタンのHTMLコードをコピーする
• Stingerのsns.phpにコードを貼り付ける

んで、まずはコードを取得する。

1. 次のサイトをブラウザで開く。
   http://getpocket.com/publisher/button
2. ページが開いたら、ページの下の方にスクロールしていって…
   
3. “Copy Code:"って項目んとこにあるコードをコピーする。
   
4. これでコードのコピーはおしまい。

次にコードを貼り付ける。
貼り付けるコードはsns-top.php(トップページの下にあるSNSのボタン)とsns.php(個別の記事のSNSボタン)。
手順としてはこんな感じ。

1. WordPressの管理ページを開いて、左のメニューで"外観"の"テーマを編集"ってとこをクリックする。
   
2. “テーマの編集"ってページが表示されるので、右側にあるテンプレートってをみつつ…“sns-top.php"ってとこをクリックする。
   
3. sns-top.phpのソースが表示される。
   
   さっきコピーしたPocketのボタンのタグを<li>…はてなブック…</li>のすぐあとにコピーしたうえで、コピーした部分を<li>…</li>タグで囲んどく。
   コードとしてはこんな感じ。

   <!-- Pocket ボタン --->
   <li> <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
   </li>

   ※<!– Pocket –>ってのはコメント
   

4. “ファイルを更新"ってとこをクリックしてページの上の方に"ファイルの編集に成功しました。"って表示されたらOK。
   
5. さっきと同じように"sns.php"ってリンクをクリックする。
   
6. sns.phpのソースが表示される。
   
   さっきのsns-top.phpと同じようにPocketのボタンのコードに追加。
   書いたらこんな感じ。
   
7. “ファイルを更新"ってとこをクリックしてページの上の方に"ファイルの編集に成功しました。"って表示されたらOK。
   
8. ってことで、コードの編集はおしまい。

んで、表示してみるとこんな感じ。
まずは、トップページ。

 

ページの下の方をみると…SNSのボタンの一番右側にPocketのボタンが追加されとる。

次に単一記事のページ。

下の方に…SNSのボタンが並んでるところにPocketのボタンがある。

んま、そんな感じでメモ。

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