前回はメージャーアップデートしたAQUOS PHONE ZETA SH-02Eのお話でしたが、今回はWordPressのプラグインネタです。
WP Social Bookmarking LightプラグインとPocket
このプラグインはWordPresssの各記事にFacebook, Twitter, Google+などのアイコンとリンクを設定するためのプラグインです。
開発者が日本人のため、日本のSNSにも強いのが特徴です。
このWebサイトでもFacebook, Google+, Hatenaなどのボタンの設置に利用させていただいています(Twitterボタンには別プラグインを使っていたりします)。
便利に使っていたのですが、Pocket(いわゆる”あとで読む”サービス)に対応していないのが難点でした。
Pocketは、スマホでサイトをチェックしていて、あとでPCでじっくり読みたいなんていうときに実に便利なのですが、最近まで残念ながらWP Social Bookmarking Lightプラグインが対応しておりませんでした。
WP Social Bookmarking Lightプラグイン 1.7.5
1.7.5にバージョンアップして遂にPocketがサポートされました。
使い方はこれまでと同様とても簡単です。WordPressにWP Social Bookmarking Lightプラグインをインストールして、「設定」→「WP Social Bookmarking Light」でサービスの一覧から左側に「Pocket」をドラッグアンドドロップするだけです。
さらに「Pocket」のタブでは表示方法を選択することができます。
表示例としては下記のようになります。左から「None」「horizontal」「Vertial」の例です。
これだけで、簡単にPocketボタンが、他のSNSボタンと一緒に表示することができます。
問題点と原因
しかし、実は問題がありました。私のサイトでは次のように表示されてしまいました。
Pocketがボタンにならず、テキストリンクになってしまうのです。これでは見栄えが悪いですし、正常に動いていないのは明らかです。
いろいろ調べていてたどり着いたのは他のプラグインとの干渉でした。
このサイトでは外部リンクをわかりやすくするためにExternal Linksというプラグインを導入しています。
ためしにこのプラグインをOFFにしたところ、Pocketボタンが正常に表示されるようになりました。
対策
解決に至るまでいろいろ試したのですが、最終的にはWP Social Bookmarking Lightプラグインを修正することで対応することにしました。
修正するファイルはWP Social Bookmarking Lightプラグインのmodulesディレクトリにあるservices.phpというファイルです。
サーバー上のファイルを修正できない方は、WordPressのダッシュボードで「プラグイン編集」を選択し、「編集するプラグイン」としてWP Social Bookmarking Lightを選ぶと右側にファイル一覧が出るので、そこで「services.php」を選ぶと変更できるようになります。
修正するのは、WpSocialBookmarkingLightクラスのpocket関数です。WpSocialBookmarkingLightクラスはかなり大きいクラスで、Pocket関数はservice.phpのかなり後ろの方に記載されています。
修正前のPocket関数は次のようになっています。
function pocket()
{
$options = wp_social_bookmarking_light_options();
return $this->link_raw('<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="' . $this->url . '" data-pocket-count="' . $options['pocket']['button_type'] . '" data-pocket-align="left" >Pocket</a><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>');
}
これを次のように修正します
function pocket()
{
$options = wp_social_bookmarking_light_options();
return $this->link_raw('<a class="pocket-btn" data-lang="en" data-save-url="' . $this->url . '" data-pocket-count="' . $options['pocket']['button_type'] . '" data-pocket-align="left" >Pocket</a><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>');
}
ちょっとわかりにくいですが、「href="https://getpocket.com/save"」の部分を削っています。
これすることによって、External Linksプラグインが入っている状態でも、WP Social Bookmarking LightプラグインでPocketボタンを表示させることができます。
ちょっとした修正
対策を施した状態で一応、問題なかったのですがボタンタイプとして「horizontal」を選ぶと、ボタンの横幅が135ピクセルになってしまいます。それでも問題ないといえば問題なのですが、実際に必要とするサイズに比べて大きすぎる気がします。
これをちじめる方法はいくつかあるのですが、ここではWP Social Bookmarking Lightプラグインの設定で行ってみます。
WordPressのダッシュボードで「設定」→「WP Social bookmarking Light」を選択します。
そして「スタイル」タブの「Custom CSS」のテキスト欄に次の記述を追加します。
.wsbl_pocket{
width: 100px;
}
これでPocketボタンの横幅が100ピクセルになります。Pocketされる回数が少ないサイトならこの幅でもOKだと思います。
まとめ
今回はWP Social Bookmarking Lighプラグインを使って、Pocketボタンを表示する方法を紹介しました。ちょっとの修正を加えることによって、External Linksプラグインとも共存することができます。
便利なプラグインを作成した開発者に感謝です。
次回はスマートフォンと連携できる体重計について紹介します。
コメント