Wizard In The Market
システムトレードの魔術師

*

WordPress Popular Postsにはてなブックマーク数を表示!

公開日: : 最終更新日:2014/11/10 Wordpress, Plugin , ,

4326217872_81b6139b4c_z

Photo by Visa Kopu

こんにちは、キリンです。最近は日銀の追加緩和の影響でなかなかブログ記事に集中できない日が続きます。((ブログ記事だけでなく、睡眠不足 orz))土日にできるだけ頑張って記事を蓄えるようにしています。続けれるように頑張っていかなければですね!

今日は先日ご紹介した人気記事表示アプリ、Wordpress Popular Postsにはてなブックマーク数を表示する方法のご紹介です。

Stinger3への導入を前提としていますので、他のプラグインの場合はしっかり動作しないことがあります。その場合は必要に応じてコードを変更してくださいね。

はてなブックマーク数を追記する方法

WordPress Popular Postsプラグインの変更で追加

プラグインを独自にカスタマイズすることで、はてブ数を自動で挿入できるように変更できます。ただ、この方法ではプラグインがアップデートされた際に再度独自にカスタマイズしなければならないため、メンテナンスが手間です。なので、次の方法がオススメです。

Javascritsで動的に追加

WordPress Popular Postsの表示が終わった後に、動的にはてなブックマーク表示用のタグを挿入する方法です。この方法であれば、プラグインがアップデートした際にでも追加でメンテナンスする必要性がなくなります。

はてなブックマークをjQueryで動的に追加

追加してみた結果

WS000222

こんな感じに表示できるようにしてみました。ただ追加するだけではなく、画像の上に覆いかぶさるように表示する、よく2chまとめサイトとかで見る構成です。こちらのほうが見栄えがいい気がしますよね。

WordPress Popular Postsの設定

上記の「人気記事を一覧表示!サイドバーに簡単設置」の内容に従って、サイドバー上にウィジェットとして設置します。

<ul>タグのクラス設定class=”wpp-list”が重要なので、間違えないようにしてくださいね。

footer.phpへのjQueryの追記

上記コードをfooter.phpの</body>以前に設置します。コードの挙動としては、人気記事のサムネイル画像のタグの直前に、はてなブックマークの表示タグを挿入するようにしています。独自でクラス”hatena”指定し、style.cssよりCSSの指定を行うようにしています。その設定により、サムネイル画像の右下にブックマーク数が表示するようにします。

style.cssへの追記

最初のcssで、はてブ用タグのCSSを設定しています。親の<a>リンクタグでwidthとhightを設定し、positionをrelativeにします。親のリンクタグにより相対的に指定された表示箇所を元に、img.hatenaクラスでpositionをabsoluteに指定し、のbottom, right値によって表示位置が決定されるようにします。そのため、bottomとrightの値を調節して、サムネイル画像での表示位置を調整できます。width, height値は各々のデザインで確保されているサムネイル画像の表示域を指定してくださいね。

footer.phpとstyle.phpの変更だけで、はてなブックマーク数をサムネイル画像上に自動で表示することができるようになりました。お疲れ様でした!

にほんブログ村 為替ブログへ 
Fx-Kirin

About Fx-Kirin

2009年10月にFXを開始、翌年2010年5月から脱サラをしてFX業界に専念。 2012年10月頃から本格的に勝ち始め、一月で資産を倍にする、2年半月間負けなし等、安定した収支で2013年11月に生涯FX収支が1億を超える。 投資スタイルはシステムトレード。プログラミングの知識がほぼない状態から、独学で自分がしたいと思うことであればほぼ実現することが可能なレベルまで成長。好きな言語はRuby, Python。必要となればC++からVBA、Pascal等なんでも行う。MT4/MT5のプログラミングも得意。 2011年にはFXで稼いだ資金をもとにシンガポールに移住し、留学も兼ねて起業をチャレンジするほど、ビジネスを興すことに熱意がある。国内の業者を主に使い始めたことから、2012年に帰国。零細株式会社経営中。

Adsense

  • このエントリーをはてなブックマークに追加
  • Pocket
  • 66 follow us in feedly

関連記事

SyntaxHighlighter EvolvedとTinyMCEの組み合わせでバグる

SyntaxHighliter Evolvedのショートコード([/code]等)を使うと、TinyMCE Advanc

記事を読む

これが原因か!TinyMCE AdvancedのStop Removingオプションは使わなほうが良い件

WordPressを使い建ての頃は、エディタの独特さと付き合うのが苦手でした。全部HTMLで作成してももちろ

記事を読む

もうデータ全消去も怖くない!WordPress全体をDropBoxにバックアップ

WPBlogというレンタルサーバをこのサイトでも利用しているのですが、怖いのがサーバ側のトラブルによるブログデータの

記事を読む

乗っ取られてからでは遅い!WordPressのログインのセキュリティを向上

WordPressはBrute Force Attackに弱い [bm url="http://wpdocs.sou

記事を読む

WordPressで運用を始めるならWPBlogがお勧め

少しでも生活の足しになれば・・・。 FX専業投資家として活動を続けてきていますが、この度幸いなことに結婚をして子宝

記事を読む

ログイン試行回数を制限して、ログインのセキュリティを向上しよう!

一昨日の記事からの続きで、ログイン関連のセキュリティのプラグインのご紹介です。 [bm url="ht

記事を読む

セキュリティ向上、スパム対策にGoogle Captcaで画像認証!

昨日からの続きで、ログインページのセキュリティ向上や、コメントスパムの対応策としてGoogle Captch

記事を読む

バグ回避!Crayon SyntaxHighliterの上手な使い方

先日の記事で、TinyMCE AdvancedとSyntaxHighlighter Evolvedを併用すると表示バ

記事を読む

神プラグインWP Editorにカスタムボタンを追加するには

先日の記事からの延長でご紹介です。 WordPressには絶対に入れた方がいい WP Editorが便利すぎる件 |

記事を読む

簡単お手軽!Pluginでrobots.txtを設定!

今日もWordPressのプラグイン関係の記事です!Google Web Masterを使っている際に、なぜかクロールエ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Adsense

まだBokehで消耗してるの?これからはPandas-Bokehを使おうぜ

タイトルはあまり気にしないでください。全然、Bokehで消耗する価値があるとは思っています。ただ

SQLAlchemy のマイグレーションライブラリ Alembic を使ってみる。

SQLAlchemyの作者が作ったデータベースマイグレーションツール。個人的には、SQLAlch

Avoiding the problem of connect to outside of LAN with L2TP/IPSec on Ubuntu 18.04.

とても困って、原因の特定に2日かかった。疲れた。確定申告したいのに。 The IPSEC tu

Wine 上の MT4から ZeroMQ を使って Linux の pyzmq の通信をさせる

こんにちは。キリンです。 最近、年に数度のMQLを書くときがきたのですが、Pythonに慣れま

numpy の2つ行列で片方にあるものだけを抽出する。

numpy で2つの時間のインデックスをarrayデータとして持っていて、x にはない時間のイン

→もっと見る

PAGE TOP ↑