今回は簡単に人気記事を表示してくれる大人気なWordPressのプラグイン「WordPress Popular Posts」について。

WordPress Popular Postsって細かく何ができるの？っていう所に関してはGoogle先生に聞いてみてください！

さて、非常に便利で実装も簡単で、誰にでも平等に人気記事を表示してくれるこのプラグインですが、一つ困ったことが…
サムネール画像を表示させると、画像の幅と高さが決められてしまって％指定の、いわゆるレスポンシブ的画像にできない！！

実際このサイトでも使用していているのですが、レスポンシブ対応がどうしても出来なくて相当ハマったので、当サイトではどうやってレスポンシブ化したかをご紹介。

まずは基本的なマークアップ！

基本的には何もしなくてもプラグインを有効化すれば、それとなくHTMLやCSSが反映されて見た目は出来上がるのですが、このHTMLとかCSSをカスタマイズしようと思うと少し工夫が必要になります。

まず書いたのがこちら

<?php
    if (function_exists('wpp_get_mostpopular')) {
        $arg = array (
            'range' => 'daily',
            'order_by' => 'views',
            'post_type' => 'post',
            'limit' => 4, 
            'stats_comments' => '1',
            'stats_views' => '0',
            'stats_date_format' => 'Y-m-d',
            'thumbnail_width' => 640, //画像の幅。これがないと表示されない。
            'thumbnail_height' => 427, //画像の高さ。これがないと表示されない。
            'post_html' => '
                <article class="column4-post popular-post">
                    <a href={url}>
                        <div class="column4-post-thumbnail">{thumb}</div>
                        <div class="column4-post-date"><time>{date}</time></div>
                        <h2 class="column4-post-title">{title}</h2>
                    </a>
                </article>
            '
        );
        wpp_get_mostpopular($arg);
     }?>

{thumb}の部分がサムネール表示部分になります。
厄介なのが、この{thumb}を使うのには’thumbnail_width’と’thumbnail_height’のオプションを必ず利用しないといけないという制限…
どうやらこのオプションの値で自動的に画像を生成する仕様らしい。更にもう一つ問題があって、何故か記事へのリンクとかのHTMLも全部自動で吐き出されて、自分で書いたaタグとかはあってないような状態になる…

ここで挫折一回目。(約5時間)

時は流れ、ふと設定のパラメーターの所を見ると{thumb_img}ってのがあることを発見！！ここに「リンクなしの画像のみを表示」という説明が！！
完全にこれだ！と思い、{thumb}の部分を{thumb_img}へ変更！

これでいけるのか！！？とドキドキしながらページを更新してみると…

・・・

・・・・・・

はいはい。どうせそうですよね。
リンクは確かについてはいない。だが完全にサイズ固定された画像が吐き出される。まぁ当たり前といえば、当たり前なのか。

本当にわからなかったので、色んなサイトを調べまくりました。
Google先生も、もう吐き出す記事がないよ！というくらい調べました。
確かに問題解決に繋がりそうな記事もいくつか見つけたのですが、ここで一つ問題が。

ボクはPHPが全くわからない！！

はい。これは致命的です。それっぽい記事を見つけても、肝心の中身が読み解けないので、使えない…

ここで挫折二回目。(約1日半)

本当に諦めようと思った時に、ふと閃きが。

これJavaScriptで出来るんじゃね？

完全に盲点でした。
WordPress = PHPみたいな固定概念に縛られてました。

吐き出された画像から幅と高さを取り除く

考え方としては、
1.オプションで指定したサイズで画像を吐き出させる
2.JavaScriptでimg要素のwidthとheightの値を書き換える

こんな感じで出来るのではと思って書いたコードがこちら
(かなり抜粋して記載しています)

Style.images();

var Style = {
    images : function(){
        $(".popular").find("img").attr("width","");
        $(".popular").find("img").attr("height","");
    }
};

ドッキドキしながらページ更新してみると…

大成功！！！！

このやり方は正しいのか、他に影響とかは及ぼさないのか、完全に不明です。
ただ出来たことは出来た。結果が全てよ！！

なんか長くなりましたが、こんな方法もあるよってお話でした！
ありがとうございました！