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. WordPress

    WordPressでオリジナルテーマを作成する時などにチェックしてくれるプラグイン「Theme-Ch…

    このプラグインはすごいですね。自作のテーマを作成した時なんかにこれを使…

  2. Monsterrat

    WordPress

    ミニマルなポートフォリオに最適なWordPressテーマ「Monsterrat」

    ミニマルなデザインのポートフォリオを作りたい時に最適なWordPres…

  3. WordPress

    ローカル環境のMAMPでWordPressをマルチサイト化してみる

    素人なので半日も悩んじゃいました。ローカルでWordPressをマルチ…

  4. WordPressのログイン時のツールバー

    WordPress

    the_tagsを使ってWordPressの投稿タグを表示させたり表示形式を替えたりしてみる

    WordPressで各記事につけた投稿タグを表示させたい場合にはthe…

  5. WordPress

    WordPressのContact Form 7にCAPTCHAを導入するためのプラグイン「Real…

    WordPressのお問い合わせフォーム(Contact Form 7…

  6. WordPress

    WordPressで人用のサイトマップを作ってくれるプラグイン「PS Auto Sitemap」の使…

    WordPressで人に見せるための人用サイトマップを簡単に作成してく…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP