りんろぐ。

女子でも分かるぷちまにあっく話。

Wordpress

人気記事ランキングの数字部分に画像を使ってみた!

2012/11/11

The cast of my non-stop entertainment
The cast of my non-stop entertainment Photo by Xanboozled

WordPressもphpも初心者の凛(@rin_wan)です。学生の頃htmlとcssは基本程度はやってましたが、がっつり忘れてるものですねぇ。

そんな初心者の私でもがむしゃらにやったら何かしら出来たよシリーズ第2段!!(偉大なる諸先輩方の見よう見まねシリーズとも言いますw)blog右側に表示している「沢山読まれた記事達」に王冠を付けたいー!!です。

以前、いつもお世話になっている@Rikuma_さんのサイトを見て、ランキングには数字が付けられるのかー!と思い、そのうち王冠とか付けたら可愛いやもしれぬ。と思いつつ放置しておりました。

別の調べ物をしていて、たまたま画像でランキング表示をさせるという記事を発見!一気にやる気になってやってみました。

——*2012/11/12 追記*——–
XPのchromeとIE6では思ったように数字が出ない模様です。
謎が増えたーorz
——*2012/11/12 追記*——–

最初の壁はプラグイン違い!!

今回大変お世話になったのは@ateitexeさんのこちらの記事!

WordPressのWordPress Popular Postsを利用して、簡単に王冠を付けられる!しかも王冠の中に数字まで!!さらにさらに王冠素材まで!!!!これは使わせていただくしかないでしょ~♪とルンルンでちゃかちゃかやって…出来ないorz

初心者に立ちはだかる壁…なぜ出来ない…なぜ…orz

あ、私が使ってるプラグインWordPress Popular Postsじゃないよwww私が使ってるのはWP PostViewだよwwwww

まぁ、同じような人気記事を表示させるプラグインなので、何とかなるでしょーという楽観的な考えで再スタート。

次は画像準備&CSS!

有難い事に@ateitexeさんのサイトにて可愛い王冠アイコンが準備されており、誰でも利用可能とまで!!!お言葉に甘えてアイコンをいただきました。

アイコンは自分が使っているテーマの画像フォルダ内へ格納。今回は無地のアイコンにリスト化された数字を表示してあげるという仕組みらしい。

そして有難い事にCSSのコードまで!!!ふとここでこのCSSをどこに書き込むのか戸惑う初心者。右往左往しながら、プラグインにも専用CSSがない所をみるとテーマのスタイルシートだろうと勝手に考えてスタイルシートに追記。

私が今使っているテーマ「Surface」では既にList関連のCSSが指定されていたので、そこに追加。

また、私はランキングにサムネイルは利用していないのでタイトル左に王冠を持ってきたかったので17行目のtop指定は0pxにしました。

次の壁はリスト形式!

さてお次はhtmlをいじればOK。たしかプラグインのテンプレでhtml指定が出来たはず。

設定>Post Viewより設定ページを表示。
こんな感じで編集。※画像はクリックで大きくなります。

記入しているコードはこちら。
[html collapse=”true”]
<li><img src="http://使用中のテーマ内/images/ico_rank.png" /><a href="%POST_URL%" title="%POST_TITLE%">%POST_TITLE%</a> – %VIEW_COUNT% アクセス</li>
[/html]

これで更新を押してワクワクして見てみる!!!

…orz
無地の王冠は表示されたものの数字なんて見当たらずorz

@ateitexeさんのサイトを見直す。

あ、htmlの所でolタグ使ってる!!忘れてた(●´ω`●)ゞエヘヘ

と言うことでさっきのhtmlの上下にolタグを入れてみる!!!更新!!ワクワク!!!

…orz
全部1位になってしまった…wwwww

まぁかっこよくていいけどね!!!全部1位とか素敵だけどww折角だからちゃんとやりたいー!!!

と言うことで調査開始。

自分のサイトのソースコード確認。
olタグがランキングの1タイトル毎についてる事が発覚。そりゃ全部1位になっちゃうよねーwwってことでhtmlテンプレからolタグを削除。

もう一度ソースコードとにらめっこ。liタグがulタグで挟まれてるを発見。
しかしulとolの違いがイマイチ分からない初心者。

こちらの記事に大変お世話になりました。

やはりliタグをolタグで挟まないとカウントが発生しない模様。

ボスとの戦い!!!

しかし今までお手本なしでphp編集した事がない私。ドキドキ。

まずはwp-postviewフォルダごとローカルに保存。これで最悪何とかなる!!

とりあえずwp-postviews/wp-postviews.phpを触ればよさげ。
再びにらめっこ。読み解くのに慣れてないから脳が疲労困憊…と思ったら知ってるulタグを発見!!!

念のためこれをolに差し替えてみる。

プラグイン画面から編集が出来るらしい。

該当のプラグインを選択してボタンを押せば編集画面。

編集完了!!!!

ページを更新…できたーーーーーヾ(*´∀`*)ノキャッキャ ちゃんと王冠に数字入ったーーー!!!!

苦節2時間!!!無事に当初の目的を達成出来ましたーー:*:・(*´ω`pq゛いやー久々に楽しかった♪
それにしても今回は2時間で済んで運が良かったw

という事で同じような部分で困っている方へ!
当方初心者ゆえ、正しいかどうか分かりませんが、一応動いているのでご紹介w

※実施の際は必ず今の環境のバックアップを取ってからやってくださーい!!
※ベテランの方でここ変だよーって所見つけたらぜひ教えてくださーい!!

まずは集計&集計結果の表示の所(なのかな?)を修正。こちらが編集前。↓
[php firstline=”600″ collapse=”true” highlight=”605,607″]
### Function: Add WP-PostViews General Stats To WP-Stats Page
function postviews_page_general_stats($content) {
$stats_display = get_option(‘stats_display’);
if($stats_display[‘views’] == 1) {
$content .= ‘<p><strong>’.__(‘WP-PostViews’, ‘wp-postviews’).'</strong></p>’."\n";
$content .= ‘<ul>’."\n";
$content .= ‘<li>’.sprintf(_n(‘<strong>%s</strong> view was generated.’, ‘<strong>%s</strong> views were generated.’, get_totalviews(false), ‘wp-postviews’), number_format_i18n(get_totalviews(false))).'</li>’."\n";
$content .= ‘</ul>’."\n";
}
return $content;
}
[/php]

605行目と607行目のulをolへと変更!編集後。↓
[php firstline=”600″ collapse=”true” highlight=”605,607″]
### Function: Add WP-PostViews General Stats To WP-Stats Page
function postviews_page_general_stats($content) {
$stats_display = get_option(‘stats_display’);
if($stats_display[‘views’] == 1) {
$content .= ‘<p><strong>’.__(‘WP-PostViews’, ‘wp-postviews’).'</strong></p>’."\n";
$content .= ‘<ol>’."\n";
$content .= ‘<li>’.sprintf(_n(‘<strong>%s</strong> view was generated.’, ‘<strong>%s</strong> views were generated.’, get_totalviews(false), ‘wp-postviews’), number_format_i18n(get_totalviews(false))).'</li>’."\n";
$content .= ‘</ol>’."\n";
}
return $content;
}
[/php]

同様に、613行目からも編集。編集前。↓
[php firstline=”613″ collapse=”true” highlight=”619,621,625,627″]
### Function: Add WP-PostViews Top Most/Highest Stats To WP-Stats Page
function postviews_page_most_stats($content) {
$stats_display = get_option(‘stats_display’);
$stats_mostlimit = intval(get_option(‘stats_mostlimit’));
if($stats_display[‘viewed_most_post’] == 1) {
$content .= ‘<p><strong>’.sprintf(_n(‘%s Most Viewed Post’, ‘%s Most Viewed Posts’, $stats_mostlimit, ‘wp-postviews’), number_format_i18n($stats_mostlimit)).'</strong></p>’."\n";
$content .= ‘<ul>’."\n";
$content .= get_most_viewed(‘post’, $stats_mostlimit, 0, false);
$content .= ‘</ul>’."\n";
}
if($stats_display[‘viewed_most_page’] == 1) {
$content .= ‘<p><strong>’.sprintf(_n(‘%s Most Viewed Page’, ‘%s Most Viewed Pages’, $stats_mostlimit, ‘wp-postviews’), number_format_i18n($stats_mostlimit)).'</strong></p>’."\n";
$content .= ‘<ul>’."\n";
$content .= get_most_viewed(‘page’, $stats_mostlimit, 0, false);
$content .= ‘</ul>’."\n";
}
return $content;
}
[/php]

編集後!↓
[php firstline=”613″ collapse=”true” highlight=”619,621,625,627″]
### Function: Add WP-PostViews Top Most/Highest Stats To WP-Stats Page
function postviews_page_most_stats($content) {
$stats_display = get_option(‘stats_display’);
$stats_mostlimit = intval(get_option(‘stats_mostlimit’));
if($stats_display[‘viewed_most_post’] == 1) {
$content .= ‘<p><strong>’.sprintf(_n(‘%s Most Viewed Post’, ‘%s Most Viewed Posts’, $stats_mostlimit, ‘wp-postviews’), number_format_i18n($stats_mostlimit)).'</strong></p>’."\n";
$content .= ‘<ol>’."\n";
$content .= get_most_viewed(‘post’, $stats_mostlimit, 0, false);
$content .= ‘</ol>’."\n";
}
if($stats_display[‘viewed_most_page’] == 1) {
$content .= ‘<p><strong>’.sprintf(_n(‘%s Most Viewed Page’, ‘%s Most Viewed Pages’, $stats_mostlimit, ‘wp-postviews’), number_format_i18n($stats_mostlimit)).'</strong></p>’."\n";
$content .= ‘<ol>’."\n";
$content .= get_most_viewed(‘page’, $stats_mostlimit, 0, false);
$content .= ‘</ol>’."\n";
}
return $content;
}
[/php]

ここで終わり!ではなく、最後もう一箇所!ウィジットの表示箇所を修正しましょー。編集前。↓
[php firstline=”678″ collapse=”true” highlight=”688,703″]
// Display Widget
function widget($args, $instance) {
extract($args);
$title = apply_filters(‘widget_title’, esc_attr($instance[‘title’]));
$type = esc_attr($instance[‘type’]);
$mode = esc_attr($instance[‘mode’]);
$limit = intval($instance[‘limit’]);
$chars = intval($instance[‘chars’]);
$cat_ids = explode(‘,’, esc_attr($instance[‘cat_ids’]));
echo $before_widget.$before_title.$title.$after_title;
echo ‘<ul>’."\n";
switch($type) {
case ‘least_viewed’:
get_least_viewed($mode, $limit, $chars);
break;
case ‘most_viewed’:
get_most_viewed($mode, $limit, $chars);
break;
case ‘most_viewed_category’:
get_most_viewed_category($cat_ids, $mode, $limit, $chars);
break;
case ‘least_viewed_category’:
get_least_viewed_category($cat_ids, $mode, $limit, $chars);
break;
}
echo ‘</ul>’."\n";
echo $after_widget;
}
[/php]

編集後。↓
[php firstline=”678″ collapse=”true” highlight=”688,703″]
// Display Widget
function widget($args, $instance) {
extract($args);
$title = apply_filters(‘widget_title’, esc_attr($instance[‘title’]));
$type = esc_attr($instance[‘type’]);
$mode = esc_attr($instance[‘mode’]);
$limit = intval($instance[‘limit’]);
$chars = intval($instance[‘chars’]);
$cat_ids = explode(‘,’, esc_attr($instance[‘cat_ids’]));
echo $before_widget.$before_title.$title.$after_title;
echo ‘<ol>’."\n";
switch($type) {
case ‘least_viewed’:
get_least_viewed($mode, $limit, $chars);
break;
case ‘most_viewed’:
get_most_viewed($mode, $limit, $chars);
break;
case ‘most_viewed_category’:
get_most_viewed_category($cat_ids, $mode, $limit, $chars);
break;
case ‘least_viewed_category’:
get_least_viewed_category($cat_ids, $mode, $limit, $chars);
break;
}
echo ‘</ol>’."\n";
echo $after_widget;
}
[/php]

まとめ

しかしこの記事を書く為に新しいプラグイン「SyntaxHighlighter Evolved」を入れたり、h3タグのCSSを作ってみたり、IEで表示されていなかったフォントファミリーをいじったりと何やら色々やりました。面白かったー!!

そして初めてh3タグなるものを使ってみた所、テーマデザインにも利用されていて驚き。うーんどうしようかなぁ。また変えるやもしれません。

もっとphpとcssが読めたらいいなー!!と実感した日曜の午後でしたw

王冠に数字出てるよー!と思った方はぽちっとどうぞ!

[thankyou]

次の記事もお楽しみに~(*`・ω・)ゞ

スポンサードリンク

スポンサードリンク

CATEGORIES & TAGS

Wordpress,

Author:

iPhoneアプリ/語学学習/間取り図/ガジェットが大好きです!手帳と宇宙画像が最近の癒しです。WorkFlowyが好きでスマホから操作ができるアプリHandyFlowyとMemoFlowy絶賛オススメ中♡