【WordPress】サイドバーの「最新の記事」と「人気の記事」にトグルボタンを実装する方法WordPress2016年10月10日サイドバーで「最新の記事」と「人気の記事」を表示しているのですが、デフォルト表示を5件とし「さらに見る」ボタンでプラス5件を表示できるトグルボタンを設置いたしましたので実装方法をご紹介いたします。href="#">さらに見る</a></p>解説まずはWordPress側にて10件表示にし、<li>が10個出力されるようにしておいてください。6)~]で6個目以降のliを非表示にします。p.moreはサイトに応じてスタイルを設定してください。aのクリック時にevent.preventDefault();で#のアンカー移動を無効にしています。変数$moreContentsには[さらに見る]ボタンの手前にある兄弟セレクタ、すなわち新着記事もしくは人気記事のul/ol内にある6個目以降を取得します。これをif文内でclass="open"の付け替えで表示/非表示を切り替えを行いつつ、クリック毎に[さらに見る/閉じる]のテキストを出し分けしています。htmlでは、ulもしくはolの閉じタグ直後に[さらに見る]のソースを記述しています。まとめサイドバーにて最新の記事と人気の記事を最初から10件表示にすることも考えましたが、やはり縦長になりすぎるという点と、メインコンテンツは記事の内容であるという観点から、デフォルトは5件表示としました。ユーザー全てがサイドバーに注目するわけではなく、より見たいユーザーは「さらに見る」をクリックしてくれることと思います。htmlとcssがある程度理解できれば応用できると思いますので、ぜひご活用いただければ幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。