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
  • 65 follow us in feedly

関連記事

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

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

記事を読む

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

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

記事を読む

おしゃれなTwitter Cardsをプラグインで簡単に表示する方法

Twitter Cardsはツイッターをしていると見ることが多い、おしゃれでなかなか良い感じの機能です。今日は記

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

WPBlogではPHPや外観の設定を変更してもすぐには反映されない

先日の記事にて、WPBlogがお勧めな理由をご紹介しました。 WordPressで運用を始めるならWPBlogがお勧め

記事を読む

SEO効果大!自動で記事に目次を追加しよう

今日はWordPressに目次を追加することのできるプラグインのご紹介です。目次って案外あなどれなくて、最近

記事を読む

高さが変?Stinger3でTwitterの挿入のスマホ表示のバグの修正

ブログでのTweetの紹介はとっても便利 Twitter EmbedというWordpress用プラグインがあります。

記事を読む

Message

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

Adsense

Windowsユーザ御用達の uci.edu から直接python wheelをインストールしてくれるライブラリ pipwin

あんまり情報が出てこないのでメモ書き。 https://twitter.com/fx_kiri

Python2 から Python3 へのC Extension の移行

最初に追加 モジュールの初期化と状態情報を書き換える initmyextension 関

Interactive Brokers 証券の Python API を利用する

Interactive Brokers 証券とは 日本には珍しく自動売買プラットフォームが提供され

Python Pandas からお手軽に highcharts が使える kanichart 作りました。

Kanichart fx-kirin/kanichart: Easy(簡易) plotting

Python 2, Python 3 で更新したファイルを調べてreloadするパッケージを作った。

pdbでのデバッグにはreload機能がない IPythonには優秀なautorelaod機能

→もっと見る

PAGE TOP ↑