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

    Google XML SitemapsプラグインでWordPressにサイトマップ作成

    WordPressにはロボット向けのXMLサイトマップを自動生成してく…

  2. WordPress

    WordPressの公式ロゴマークは公式サイトでダウンロードすることができる

    何気なくWordPress公式サイトを見ていたら、WordPressの…

  3. WordPress

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

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

  4. Daily Dish

    WordPress

    写真が映える2カラムのシンプルでスッキリしたWordPressテーマ「Daily Dish」

    Daily DishというWordPressテーマがとてもカッコよかっ…

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

    WordPress

    WordPressのトップページ(index.php)で公式ツイートボタンのURLを各記事別になるよ…

    ちょっとした備忘録です。WordPressのトップページで公式ツイート…

  6. WordPress

    WordPressでグーグルアナリティクスをフッターにadd_actionを使って表示させる

    WordPressにはadd_actionという便利な関数があります。…

コメント

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

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

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP