WordPress Popular PostsにjQueryではてブ数を表示できなかった原因と対処法

人気記事ランキング表示プラグイン「WordPress Popular Posts」にはてなブックマーク数を表示させる方法を調べて試してみたのですが、当ブログでは修正が必要だったので、修正した箇所をメモしておきます。

セレクタの指定方法を修正しないと表示されませんでした。

「WordPress Popular Posts」にはてなブックマーク数を表示する方法は、プラグイン自体を改造する方法と、jQueryで表示する方法があります。jQueryで表示すればプラグインのアップデートのたびに修正する必要がないので、ぷらすぶろぐさんの記事を参考にjQueryで追加する方法を試してみました。

WordPress Popular PostsにjQueryではてブ数を表示する | ぷらすぶろぐ

しかし、上記の通りにやってみてもはてブ数を表示できませんでした。どうやらセレクタの指定方法に問題があったようで、コードを下記のように修正したところ、正常に表示されるようになりました。

<script type="text/javascript">
jQuery(function() {
    jQuery('a.wpp-post-title').each(function(){
        var href = jQuery(this).attr('href');
        jQuery(this).nextAll().after(' <a href="http://b.hatena.ne.jp/entry/'+href+'" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/'+href+'" border="0" style="vertical-align: middle;"></a>');
    });
});
</script>

はてブ数が表示されない人は上記のコードをお試しください。貼り付け箇所は「footer.php」にあるbody要素の終了タグ直前です。※念のため、バックアップを取ってから貼り付けてください。

補足：jQueryの修正箇所について

これで終わってしまうと記事が短すぎるので、どこを修正したのか解説しておきます。
修正した箇所で重要なのは、3行目にある「a.wpp-post-title」という部分です。これは「セレクタ」と呼ばれるhtml内の要素の指定方法で、はてブ数を貼り付ける要素の起点になります。

修正前のコードでは、

jQuery('.popular-posts a.wpp-post-title').each(function(){

となっていました。

これは、

という意味です。

しかし当ブログのhtmlには、「popular-postsという文字列を含むClass属性の要素」が存在しないため、はてブ数が表示されない原因になっていました。

そこで、下記のセレクタに修正しました。

jQuery('a.wpp-post-title').each(function(){

これは、

という意味になります。

「wpp-post-title」は「WordPress Popular Posts」で必ず使用されるクラス名です。
なので、「WordPress Popular Posts」を使用しているブログであれば、上記コードにすることで、問題なくはてブ数を表示できるというわけです。

それでもはてブ数が表示されない場合は？

もし、上記のコードを使用してもはてブ数が表示されない場合、コードのコピーミス以外で考えられるのは、WordpressにjQuery自体が導入されていないことが考えられます。jQueryはWordpressに標準で組み込まれていますが、環境によっては導入されていない可能性もあります。

対応策はケース・バイ・ケースで複雑なのですが、かちびと.netさんの記事でわかりやすく解説されていてますので、この問題への対処に役立ちます。

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

今回の改造は「WordPress Popular Posts」の末尾にはてブ数を表示するようにしました。
プログラマーじゃない人でもjQueryは習得が容易で改造の難易度も低いので、興味のある人は色々いじってみると面白いと思います。下記のスライドが大変わかりやすいので、参考にしてみてください。