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のシングルページの記事の下に現在表示されている記事と…

  2. ベストなWordPressテーマ集

    WordPress

    無料&有料のベストなWordPressテーマ集(2014年8月)

    ベストなWordPressテーマ集(無料&有料、2014年8月)「Be…

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

    指定した親ページの子ページを取得してみる

    前回、「WordPressで指定した固定ページを読み込む方法」を書いた…

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

    WordPress

    WordPressでキーワードを登録しておくと自動でリンクをつけてくれるプラグイン「WP Keywo…

    なかなか便利だったのでご紹介します。WordPressで自分が登録した…

  6. ツールバーが表示されない時の対処方法

    WordPress

    WordPressのツールバー(管理バー)が表示されない時の対処方法

    WordPressで自分のサイトにログインすると画面上部にツールバー(…

コメント

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

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

最近の記事

  1. メンソレータム リップスティック
  2. スイデンテラス 濃厚バターチキン
  3. ドトール マンデリン
  4. 厚切りトーストツナチーズメルトとブラックコーヒー
  5. ドトール マイルドブレンドコーヒー

アーカイブ

PAGE TOP