wp_get_archives・制限なしで出力し13ヶ月以前はアコーディオンで格納
HTML文法を無視した、liタグ外にdivを追加するやり方。
- wp_get_archives のデフォルト出力htmlはリストタグ
- 13番目以降の li 全てをdivで包括し、CSSでdisplay none
- そのdiv直前にトリガー用divを追加
- Velocity.js でスライド動作を滑らかに
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <body> <nav class="nav-archive"> <ul> <li><a href="">2017年7月(n)</a></li> <li><a href="">2017年6月(n)</a></li> <li><a href="">2017年5月(n)</a></li> <li><a href="">2017年4月(n)</a></li> <li><a href="">2017年3月(n)</a></li> <li><a href="">2017年2月(n)</a></li> <li><a href="">2017年1月(n)</a></li> <li><a href="">2016年12月(n)</a></li> <li><a href="">2016年11月(n)</a></li> <li><a href="">2016年10月(n)</a></li> <li><a href="">2016年9月(n)</a></li> <li><a href="">2016年8月(n)</a></li> <li><a href="">2016年7月(n)</a></li> <li><a href="">2016年6月(n)</a></li> <li><a href="">2016年5月(n)</a></li> <li><a href="">2016年4月(n)</a></li> <li><a href="">2016年3月(n)</a></li> <li><a href="">2016年2月(n)</a></li> <li><a href="">2016年1月(n)</a></li> <li><a href="">2015年12月(n)</a></li> <li><a href="">2015年11月(n)</a></li> <li><a href="">2015年10月(n)</a></li> <li><a href="">2015年9月(n)</a></li> </ul> <!-- /.nav-archive --></nav> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script> <script src="js/js.js"></script> </body> |
1 2 3 4 5 6 7 8 9 10 11 12 | <ul> <?php $my_archives = wp_get_archives( array( 'limit' => '', 'show_post_count' => 1, 'echo' => 0 ) ); echo $my_archives; ?> </ul> |
1 2 3 4 5 6 7 8 | .item-trigger { cursor: pointer; text-decoration: underline; &:hover, &.active { text-decoration: none; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* wp_get_archives Accordion Author: KEITA HIRAI URL: keitahirai.net */ $(function() { $(".nav-archive li:nth-child(12) ~ li").wrapAll('<div class="item-hide"></div>'); $(".nav-archive .item-hide").hide(); $('<div class="item-trigger">残りを開く</div>').insertBefore(".item-hide"); $(".nav-archive .item-trigger").on("click", function() { if ($(this).next().css("display") == "none") { $(this).next().velocity("slideDown", {duration: 400}); $(this).addClass("active"); } else { $(this).next().velocity("slideUp", {duration: 400}); $(this).removeClass("active"); } }); }); |
2コメント
こんにちは
ネット上で色々ぐぐったら、このページの情報が一番やりたいことにぴったりマッチしていて、とても助かりました。
コピペでできるって本当に感謝です。
ありがとうございます。
すみません…
1つ質問ですが..「残りを開く」を最後に入れるには、insertAfterにしたのですが、
その後の、$(this).next() をすべて$(this).before()にしたのですが動きませんでした^^；
そんな簡単に変更できないですよね..
何かアドバイスいただけないでしょうか。
よろしくお願いします。
3年ほど前の投稿に注目してくださりありがとうございます。
insertAfterやthisをまだ確認していない上で、以下お応えします。
[残りを開く]を「最後に入れて」しまうと、“残りを開く”の意味ではなくなってしまうので、ご質問の意図を掴めずにいます。
また、デモは静的HTMLでコーディングしたものでして、WordPressのPHPだと動くはずなので、その点も再度ご確認くださると嬉しいです。