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を弄る場合にはローカル環境でまずは試してみることをオススメします。

関連記事

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

    WordPress

    WordPressでプラグインなしで関連する記事を一発で呼び出す関数をfunctions.phpに記…

    WordPressのシングルページで、よく記事の終わりにその記事に関連…

  2. WordPressで広告を非表示

    WordPress

    WordPressで指定したタグを付けると広告を非表示にできる設定方法

    意外と設定しておくと便利だと思ったのでメモがてらご紹介します。Word…

  3. WordPress

    WordPressでウィジェットのアーカイブを一発でドロップダウンにする超簡単な方法

    知らなかったですこれ。前からずっとアーカイブをドロップダウンにできない…

  4. WordPress

    ブログの編集作業が捗るWordPressプラグイン「AddQuicktag」

    すごく便利なプラグイン「AddQuicktag」を使ってみました。なん…

  5. WordPress

    WordPressで自分だけのショートコードの作り方

    WordPressのショートコードが便利なのでちょこちょこ使い始めてま…

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

    WordPress

    WordPressの囲み型ショートコードの基本的な使い方

    WordPressのショートコードはとても便利で色々なことができるんで…

コメント

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

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

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP