通过选择年份然后选择月份来显示存档

Question

我正在尝试将我的存档页面构建为连续几年和连续几个月。然后，用户必须选择一年，然后选择一个月，然后会生成一个帖子库。我在下面有一个我想要的示例图像。我怎么能做到这一点？我在网上搜索过，我找不到类似的东西。我已经添加了一个样机 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;
}

Answer 1

您必须捕获用户选择的日期（年和月），然后进行 ajax 调用以按日期范围获取帖子并填充结果。

查看：wp_get_archives() 函数了解更多详情。