WordPressにPocketボタンを設置してみた(賢威6.1対応)

この記事は約6分で読めます。

  • LINEで送る

pocketボタン設置

最近、いろんなページを徘徊している時に見かけるようになった「pocket」ボタン。
Twitterやfacebookのボタンと同じ位置に配置されているので、
SNSのボタンなんだろうな…と思っていましたが、これまでスルーしてきました。

ただ、結構いくつかのサイトで設置されていて、数字の跳ね方も大きいので当サイトでも設置してみることにしました。

pocketってそもそもなに?

pocket

pocketは、「あとで読む」に特化したブックマークサービスです。
SNSとは似て非なるもので、Twitterやfacebookのように誰かとWeb上で共有するものではなく、
単純に、「あとで読む」ためにWebサイトなどをブックマークしておくサービスです。

これまでもブクマといえば、はてブなどでも「あとで読む」タグをつけたりして活用していましたが、
pocketはブックマークに特化したサービスで、iOSやAndroidとも連携しておりスマホアプリもあります。

使い勝手はかなりよく、これまでの他サービスに乗っかってブックマークしておいた時よりも、
かなり使いやすい「あとで読む」サービスになっています。

pocketの使い方やサービスの詳細は、以下のサイトが参考になります。
気になるページを保存してあとで別のスマホなどからオフライン時にも読めるようにできる「Pocket」の使い方 | Gigazine

pocketボタンの設置

pocketボタン設置

それでは早速pocketボタンを設置していきましょう。
ボタンコードを取得して、Webサイト・ブログ内に貼り付けるだけなので簡単です。

コードの取得

以下のサイトから、pocketボタンのコードを取得します。
Pocket Button

このような、リンクタグ(アンカータグ)とJavaScriptタグがセットで取得できます。

<a data-pocket-label="pocket" data-pocket-count="horizontal" 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>

このコードを、Webサイト内のpocketボタンを表示したい位置に貼り付けるだけです。

WordPressへコードを貼り付ける

WordPressではpocketボタンを各記事に設置する時には少し改造する必要があります。
リンクタグを以下のように変更します。

変更前

<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>

変更後

<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink(); ?>"></a>

記事のURLを動的に取得するために、以下のコードを追加しています。

data-save-url="<?php the_permalink(); ?>"

これで、各記事用のPHPファイルに貼り付けても動作します。
ボタンを表示する位置に、このリンクタグを貼り付けましょう。

JavaScriptは分けて貼り付けておくのがよいでしょう。
WordPressへの貼り付けは、「footer.php」が適当です。「</body>」の直前にでも貼り付けておきましょう。

賢威6.1にコードを貼り付ける場合のひと工夫

賢威6.1pocketボタン設置

賢威6.1でpocketを貼り付ける場合にひと工夫します。
賢威6.1では、ツイートボタンやいいね!ボタンがデフォルトで追加されているので、
それに合わせた形で、pocketボタンを追加します。

まずは、リンクタグを追加します。
「外観 > テーマ編集」から「social-button.php」を開きます。

<ul class="sb m20-b">
<li class="sb-tweet"></li>
<li class="sb-hatebu"></li>
<li class="sb-gplus"></li>
<li class="sb-fb-like"></li>
<li class="sb-pocket"><a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink(); ?>"></a></li>
</ul>

6行目にpocketボタンを追加しました。
これで画像のように、これまで他のソーシャルボタンが表示されていた位置にpocketボタンが追加されます。

JavaScriptコードは「footer.php」の「この行は削除しないでください。」の上に以下のように貼り付けましょう。

<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>
<?php wp_footer(); //この行は削除しないでください。 ?>

これでpocketボタンをWordPressに追加完了です。
後は、あとで読みたくなる記事をどんどん書いていきましょう!!

  • LINEで送る

コメントを残す

このページの先頭へ