通过选择年份然后选择月份来显示存档
Posted
技术标签:
【中文标题】通过选择年份然后选择月份来显示存档【英文标题】：Display archive by selecting year and then selecting month 【发布时间】：2017-05-23 05:04:23 【问题描述】：我正在尝试将我的存档页面构建为连续几年和连续几个月。然后，用户必须选择一年，然后选择一个月，然后会生成一个帖子库。我在下面有一个我想要的示例图像。我怎么能做到这一点？我在网上搜索过，我找不到类似的东西。我已经添加了一个样机 html 和 css，它应该看起来如何，但我就是不知道如何让它工作。任何帮助，将不胜感激！我这里有一个html和css的代码笔http://codepen.io/anon/pen/egpZqr
我想要什么...
我当前的页面-archive.php
<?php
get_header(); ?>
<div class="page-header">
<h1>ARCHIVE</h1>
</div>
<div class="archive-block">
<span class="archive-block__alert">
Please Select A Year First </span>
<ul class="archive-block__list archive-block__list--year">
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2009">
2009 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2010">
2010 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2011">
2011 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2012">
2012 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2013">
2013 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2014">
2014 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2015">
2015 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2016">
2016 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year archive-block__selector--current-year" data-year="2017">
2017 </span>
</li>
</ul>
<ul class="archive-block__list archive-block__list--month">
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month archive-block__selector--current-month" data-month="1">
Jan </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="2">
Feb </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="3">
Mar </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="4">
Apr </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="5">
May </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="6">
Jun </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="7">
Jul </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="8">
Aug </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="9">
Sep </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="10">
Oct </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="11">
Nov </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="12">
Dec </span>
</li>
</ul>
</div>
<div class="archive-block__empty-con">
<span class="archive-block__empty">
That combination is empty! Please select a different combination </span>
</div>
<?php get_footer(); ?>和css
.archive-block
float: none !important;
margin: 0;
width: 100%;
max-width: 930px;
margin: 0 auto;
text-align: center;
.archive-block__alert
display: none;
.archive-block__list
padding-bottom: 15px;
padding-top: 15px;
display: block;
margin: 0;
.archive-block__list--month
border-top: 1px solid #000000;
.archive-block__empty-con
text-align: center;
.archive-block__item
list-style: none;
display: inline-block;
vertical-align: top;
padding: 0 23.5px;
【问题讨论】：
【参考方案1】：您必须捕获用户选择的日期（年和月），然后进行 ajax 调用以按日期范围获取帖子并填充结果。
查看：wp_get_archives() 函数了解更多详情。
【讨论】：
以上是关于通过选择年份然后选择月份来显示存档的主要内容，如果未能解决你的问题，请参考以下文章
android有月份选择器吗?或者怎么让日期选择器的日期不显示,只显示年份和月份