WordPressにPocketボタンを設置

WordPress

WordPressにPocketボタンを設置するやり方

そういえばPocketのボタンをまだ設置していなかったので、このたび設置してみることにしました。設置のやり方はPocketボタンのページからコードをコピペするだけなので簡単にできるかと思います。ということで、せっかくなのでやり方を書いておきます。

やり方

以下のPocketボタンの公式ページからコードを取得できます。

Pocket Button

Pocketボタン設置

Choose Button Styleから三種類のボタンスタイルが用意されているので使用したいものを選択します。あとはCopy Codeからボタンのコードをコピーして、自分のサイトの表示したい場所にペーストするだけでOKです。

トップページに設置する場合

注意点としてはトップページにボタンを設置したい時です。この場合はコードをコピペするだけではダメで、data-save-urlに各記事URLを入れてあげる必要があります。

WordPressの場合は the_permalink() でパーマリンクを出力してくれるので、以下のように↓

<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink(); ?>"></a>
<script type="text/javascript">...以下略

記述すればOKです。

JavaScriptはフッターへ

あと、JavaScript部分はフッター(</body>直前)に記述してあげると表示速度の面からよさそうですよね。

add_actionを活用すれば簡単にフッターに出力してくれます。以下はfunctions.phpに記述する例です。

function pocket_button() {
	$pocket = '<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>';
	echo $pocket;
}
add_action('wp_footer', 'pocket_button');

実際にボタンを設置する場合、特にfunctions.phpを弄る場合にはローカル環境でまずは試してみることをオススメします。

Excolo Sliderタッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」前のページ

最大4台の機器を同時充電(合計最大2Aまで)できるiBUFFALOのUSB充電器(4ポートタイプ)を購入次のページiBUFFALOのUSB充電器(4ポートタイプ)

最近の記事

  1. 抹茶クリームドーナツ
  2. FAST
  3. クリスマスブレンド
  4. ホワイトチョコマカダミアドーナツ
  5. エッグペペ
PAGE TOP