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

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

はてブ数が表示されたWordPress Popular Postsのイメージ画像

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

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

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

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

[html]
<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>
[/html]

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

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

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

修正前のコードでは、
[html firstline=”3″]
jQuery(‘.popular-posts a.wpp-post-title’).each(function(){
[/html]
となっていました。

これは、

セレクタ: .popular-posts a.wpp-post-title
popular-postsという文字列含むClass属性の要素の子要素でwpp-post-titleという文字列を含むClass属性が指定されているa要素」

という意味です。

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

そこで、下記のセレクタに修正しました。
[html firstline=”3″]
jQuery(‘a.wpp-post-title’).each(function(){
[/html]
これは、

セレクタ: a.wpp-post-title
wpp-post-titleという文字列を含むClass属性が指定されているa要素」

という意味になります。

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

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

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

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

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

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

●本日のまとめ
「WordPress Popular Posts」にjQueryではてブ数を表示できなかった原因は、当ブログに存在しないセレクタを指定していたコードを使っていたためで、必ず使用されるセレクタに修正することではてブ数が表示されるようになった。