前回に引き続き『Pocket』の記事です。
タイトルの通り、WordPressトップページの各記事に『Pocketボタン』を設置する方法を解説します。
コードの取得
まずは公式サイトにアクセスして、好きなサイズのボタンのコードを取得しましょう。
とりあえず、今回は一番大きいサイズのボタンを使います。
aタグを改造
コードを見ると、aタグとJavaScriptになっていますね。
まずはaタグをWordPressループの中にコピペするんですが、
そのまま貼るとトップページ自体のPocketされた数が表示されてしまうので、少し改造します。
改造前
|
|
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a> |
改造後
|
|
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink();?>"</a> |
「data-save-url」というのは、PocketするURLを指定するときに使うプロパティです。これに
<?php the_permalink();?>を設定することで、各記事ごとのPocketボタンの出来上がりです。簡単だね！
JavaScript部分は</body>の直前に
JavaScript部分は1回読みこめばOKなので、</body>の直前に突っ込んでおきましょう。
編集するのは「外観→テーマ編集→フッター」からです。
・・・
<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>
</body>
</html>
こうすることで、
Scriptの無駄な読み込みによるページ表示速度の低下を抑えることができます。これはツイートボタンとかはてなブックマークボタンにも共通して使えるテクニックなので、覚えておきましょう！
関連するかもしれない記事
