【WordPress】サイドバーの「最新の記事」と「人気の記事」にトグルボタンを実装する方法

WordPress2016年10月10日

サイドバーで「最新の記事」と「人気の記事」を表示しているのですが、デフォルト表示を5件とし「さらに見る」ボタンでプラス5件を表示できるトグルボタンを設置いたしましたので実装方法をご紹介いたします。

※サイトのデザインや設計に応じて、適宜カスタマイズしてご使用下さい

サンプルコード

js

(function () {

$(function(){
    $('p.more a').on('click',function(event){
        event.preventDefault();
        var $className = 'open';
        var $moreContents = $(this).parent().prev().find("li:gt(4)");
        if($(this).hasClass($className)){
            $(this).removeClass($className);
            $(this).text("さらに見る");
            $moreContents.stop().slideUp('fast');
        }else{
            $(this).addClass($className);
            $(this).text("閉じる");
            $moreContents.stop().slideDown('fast');
        }
    });
});

})(jQuery);

※jQueryを読み込んでいる場合のスクリプトとなります

css

ul.whatsnew,
ol.rank{
    li{
        //お好みのスタイルを記述
    }
   
    li:nth-child(n + 6) {
        display: none;
    }
}
p.more{
    //お好みのスタイルを記述
}

html

<ul class="whatsnew">
～
</ul>
<p class="more"><a href="#">さらに見る</a></p>

<ol class="rank">
～
</ol>
<p class="more"><a href="#">さらに見る</a></p>

解説

まずはWordPress側にて10件表示にし、<li>が10個出力されるようにしておいてください。

cssにてセレクタ[li:nth-child(n + 6)～]で6個目以降のliを非表示にします。p.moreはサイトに応じてスタイルを設定してください。

jsでは、p.more aのクリック時にevent.preventDefault();で#のアンカー移動を無効にしています。
変数$moreContentsには[さらに見る]ボタンの手前にある兄弟セレクタ、すなわち新着記事もしくは人気記事のul/ol内にある6個目以降を取得します。
これをif文内でclass="open"の付け替えで表示/非表示を切り替えを行いつつ、クリック毎に[さらに見る/閉じる]のテキストを出し分けしています。

htmlでは、ulもしくはolの閉じタグ直後に[さらに見る]のソースを記述しています。

まとめ

サイドバーにて最新の記事と人気の記事を最初から10件表示にすることも考えましたが、やはり縦長になりすぎるという点と、メインコンテンツは記事の内容であるという観点から、デフォルトは5件表示としました。
ユーザー全てがサイドバーに注目するわけではなく、より見たいユーザーは「さらに見る」をクリックしてくれることと思います。

htmlとcssがある程度理解できれば応用できると思いますので、ぜひご活用いただければ幸いです。

この記事を読んでいる方にオススメの記事

「WordPress」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。