人気記事表示プラグイン「WordPress Popular Posts」を好きなHTMLで表示させよう

スポンサーリンク

これいつの間にできるようになってたんでしょう。こないだのアップデートくらいからかなぁ。

人気記事を表示できるプラグイン「WordPress Popular Posts」がカスタムHTMLを実装できるパラメータ「post_html」というのを利用できるようになっていました。

wordpress pencil
“wordpress pencil” by bionicteaching is licensed under CC BY-NC 2.0 

SEO的な観点からもなかなかいいかも?

これまでの「WordPress Popular Posts」でも、パラメータを使って吐き出すタグを指定して出力できていたんですが、基本的な使い途としてはせいぜいリストアイテムliを順序リストolにするくらいのもので、記事タイトルを見出しタグ(h1,h2,h3,h4など)で吐き出させるとか、そういう細かいことができなかったんですよね。

まぁムリヤリやろうと思えばできないことはなかったんですが、新たに実装されたパラメータpost_htmlを使えば、思いの外カンタンに実装することができます。

うちでもサイドバーの人気記事のデザインに手を入れたんですが、今回はこの新しいパラメータを使って実装しました。

post_start/post_endパラメータはなくなりました

以前まではパラメータにpost_startpost_endというのがありました。
これは、本来リストアイテムタグが出力されるのを、別のタグに置き換えて吐き出すときに利用するパラメータで、上述したようなムリヤリカスタマイズの際に使ったりすることができたわけですけど、新しいパラメータの追加にともなって消えてしまいました。

新パラメータ「post_html」の使い方

新しいパラメータpost_htmlでは、プラグイン側で予め用意しているコンテンツタグを組合せることで、カスタムしたHTMLを吐き出させることができるようになります。

コンテンツタグの一例を上げると、

  • {thumb}
    投稿や固定ページに紐づくサムネイルを表示。記事へのリンク付き。
  • {title}
    投稿や固定ページへのリンクタイトルを表示。
  • {url}
    投稿や固定ページのURLを出力。
  • {text_title}
    投稿や固定ページのタイトルをリンクなしで表示。

といったものが利用できます。詳しいコンテンツタグを知りたい場合、すでにプラグインを利用しているのであれば、設定→WordPress Popular Posts→よくある質問で確認することができるので、そちらを参照してください。

一応うちでは以下の記述で実装していますので参考までに晒しておきますね。

if(function_exists('wpp_get_mostpopular')); $args = array( 'order_by' => 'views', 'limit' => 5, 'range' => 'daily', 'post_type' => 'post', 'thumbnail_width' => 246, 'thumbnail_height' => 152, 'stats_comments' => 0, 'wpp_start' => '</p><div class="popular-posts">', 'wpp_end' => '</div><p>', 'post_html' => '</p><div class="popular-item"><div class="hentry-img">{thumb}</div><h4 class="ranktitle"><a href="{url}" title="{text_title}">{text_title}</a></h4></div><p>'
);
wpp_get_mostpopular($args);

あとは、CSSで調整してやればOK。その辺りは従来と変わりありません。

いやー、ここまでできるようになっていたとはなー。全然知らなかった。
ちょっとデザイン調整とかしようなんて思わなかったら、そのまんまにしっぱなしにしてたところですよ。

ということで「WordPress Popular Posts」ユーザーの方は、これを機会に人気記事のデザインを変えてみたりしてはどうでしょうか。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく