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

*

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

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

4326217872_81b6139b4c_z

Photo by Visa Kopu

こんにちは、キリンです。最近は日銀の追加緩和の影響でなかなかブログ記事に集中できない日が続きます。[※1]ブログ記事だけでなく、睡眠不足 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年に帰国。零細株式会社経営中。

References   [ + ]

1. ブログ記事だけでなく、睡眠不足 orz

Adsense

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

関連記事

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

WordPressには絶対に入れた方がいい WP Editorが便利すぎる件

こんにちは。キリンです。 今日も例に漏れず、ブログ構築の際に得た情報をご紹介します。WordPressを運用してい

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

2chまとめを無料で作るならこれ! エディターツールの紹介

以前、クリック証券での999円狩りを見てから初めて2chまとめを作ってみたものの、慣れない作業というのは難しいものですよ

記事を読む

Message

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

Adsense

システムトレードを始める前に知っておきたかったこと

今日の勉強会で発表してきました。nbviewer に共有しておきます。 システムトレードを始め

chmod で やらかしてしまったときの対処法

メモ書きです。 find | xargs とかを普通にやってしまうと、すぐに argument

AMD Ryzen & Nvidia GTX 1080 BTO PC 構成・組立と Ubuntu インストール

まだググっても、構成例とか出てないので参考になるんじゃないかなと。機械学習用ですが、全然ゲーム用

Windows のデスクトップアプリをSSHクライアントから再起動する

シェルスプリクト一発で、システムトレードの設定を一括で更新して、MT4を再起動したいとかそういう

UX21A のディスプレイが壊れたので修理

UX21A のディスプレイがぶっ壊れた。 画面にラインが入ったり、ディスプレイが揺れたりするよ

→もっと見る

PAGE TOP ↑