メニュー

WP版キャラチョコブック

Chocobanditz ONLINE

ページトップ

ページボトム

メニュー

Chocobanditz ONLINE

閉じる

DESIGN HTML・CSS JavaScript Webデザイン WordPress

人気記事サムネイルに順位バッジ画像を付ける方法-WordPress Popular Postsカスタマイズ

投稿日:2014年9月2日 更新日:

dez_006_img_main

ブログの人気記事を表示するWordPressのプラグイン”WordPress Popular Posts”

この”WordPress Popular Posts”をカスタマイズしてCSSでナンバリングしつつ、任意の順位(サンプルでは1~3位)部分を順位バッジ画像に差し替え表示するよう実装してみました。

この記事では、覚書も兼ね今回実装したWordPress Popular Postsをカスタマイズして人気記事サムネイルに順位バッジ画像を付ける方法をご紹介します。

※カスタマイズは自己責任となるので、編集ミスした際に復元出来るよう、事前に元ファイルのバックアップを取っておくことをオススメします。
※追記修正有り(2014/09/19)

スポンサーリンク

人気記事サムネイルに順位バッジ画像を付ける方法

目次

  1. 01 jQueryの読込み
  2. 02 HTMLマークアップの設定
  3. 03 CSSの記述追加
  4. 04 順位バッジ画像素材
  5. 05 まとめ

jQueryの読込み

header.phpのheadエリアやsidebar.phpに下記のように記述し、jQueryを読込みます。
※既に他所で読込み記述済の場合は省略してください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">

HTMLマークアップの設定

[手順1]

WordPressにログイン後、
外観→ウィジェット→Wordpress Popular PostsからPopular Postsの設定画面を開きます。

[手順2]

img01

“投稿設定”の項目にある”投稿サムネールを表示する”の項目にチェックし、Width値、Height値を入力します。

[手順3]

img02

“HTMLマークアップの設定”項目にある”カスタムHTMLマークアップを使う”にチェックし、保存すると、HTMLマークアップ方法を変更できるようになります。

[手順4]

HTMLマークアップの設定を下記を参考に編集します。

■Before / after Popular Posts:

Before欄に

<div id="popular-post"><div>

after Popular Posts欄に

</div></div>

■Post HTML Markup:

<script type="text/javascript">
$(function(){
	$('#popular-post dl dt').each(function(i){
		$(this).attr('class','number' + (i+1));/*←➀*/
	});
});
</script>
<dl>
 <dt><span>{thumb}</span>
</dt>
 <dd> {title} <br />{stats}</dd>
 <p class="clear"></p>
</dl>

[解説]
➀jQueryを使ってクラス名を付ける’#popular-post dl dt’要素にクラス名’number'(任意の名前に変更可)+順番号(1~Show up to:項目で設定した数)を付与しています。

CSSの記述追加

子テーマのstyle.cssにCSSの記述を追加します。


/*---------------------------------------
Wordpress Popular Posts表示カスタマイズ
------------------------------------------*/

#side #popular-post dl dt {
	position: relative;//←➀-1
}

#popular-post {
    counter-reset: wpp-ranking;//←➂-1
}

#popular-post dl dt:before{
	position: absolute;//←➀-2
	top: 0px;//←➁
	left: 0px;//←➁
    color:#FFF;
    counter-increment: wpp-ranking;//←➂-2
    text-align:center;
    z-index:9999;//←➃
    float:left;
    line-height:30px;
    width: 30px;//←➄-1
    height: 30px;//←➄-1
    border-radius: 2px;
    -moz-border-radius: 2px;
}
 
#popular-post dl dt.number1:before{
    height: 40px;//←➄-2
    content: url(1位バッジ画像のURL);//←➅
}

#popular-post dl dt.number2:before{
    height: 40px;
    content: url(2位バッジ画像のURL);
}

#popular-post dl dt.number3:before{
    height: 40px;
    content: url(3位バッジ画像のURL);
}

#popular-post dl dt.number4:before{
    content: counter(wpp-ranking, decimal);//←➆
    background-color:#000;//←➇
}

#popular-post dl dt.number5:before{
    content: counter(wpp-ranking, decimal);
    background-color:#000;
}

[解説]
➀-1/➀-2
positionプロパティで順位バッジ画像(&ナンバリング)表示要素をサムネイル画像要素に対する絶対位置への配置とします。


順位バッジ画像の表示位置を指定します。
(top: 0px;left: 0px;だと左上角合わせとなる)

➂-1/➂-2
サンプルでは、4位以下には画像を使わずCSSのみでナンバリングするため、counter-resetプロパティ、counter-incrementプロパティを使って要素の連番をセットします。
※すべての要素を画像でナンバリングする場合は、この部分の記述は不要です。


z-indexプロパティで順位バッジ画像(&ナンバリング)表示要素をサムネイル画像要素の手前に配置します。
※z-indexプロパティの値がサムネイル画像要素<順位バッジ画像(&ナンバリング)表示要素であれば、値は9999でなくともかまいません。

➄-1/➄-2
順位バッジ画像(&ナンバリング)表示要素の大きさを指定します。
※各自、任意の値を設定してください。
※サンプルでは、順位バッジ画像を使用する部分のみ画像の大きさwidth:30px、height:40pxに合わせてheight値を調整指定しています。


contentプロパティで
表示したい順位バッジ画像のURLを指定します。


contentプロパティで
➂-1/➂-2で設定した連番の値をセットします。


CSSのみでナンバリングする部分の背景色を指定しています。

順位バッジ画像素材

順位バッジ画像は、
お好みの画像を用意してお使いください。

※その際は、画像の大きさに合わせて
width値とheight値を調整するのを忘れないように!

キャラチョコブックの作った順位バッジ画像でよければ、

chocobandiz_pp_rank_badge_smn2

pngバッジ画像×3種/size(width=30px × height=40px)

ダウンロードページからご自由にどうぞ。
※使用報告などは不要です。
いい感じで当ブログをご紹介頂けたら嬉しいです。

まとめ

簡単に要約すると、

1. position、z-indexプロパティを使って順位バッジ画像(&ナンバリング)表示要素をサムネイル画像要素の手前に配置表示する

2. CSSのcounterプロパティで設定した連番をcontentプロパティを使って表示する

3. jQueryを使ってクラス名を付与した要素にcontentプロパティを使って画像表示する

といった流れです。

くれぐれも
編集ミスした際に備えてバックアップをとったうえで、各自アレンジに挑戦してみてください!!

以上

この記事では、
WordPress Popular Postsをカスタマイズして人気記事サムネイルに順位バッジ画像を付ける方法をご紹介しました。

スポンサーリンク

-DESIGN, HTML・CSS, JavaScript, Webデザイン, WordPress

執筆者:


  1. […] キャラチョコブック 人気記事サムネイルに順位バッジ画像を付ける方法-WordPress Popular Postsカスタマイズ […]

comment

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

MadiaMarkerメディアマーカー

Maerchen_Diverグッズ