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

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準拠"]