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

Question

我正在尝试将我的存档页面构建为一行年和一行。然后，用户必须选择一年，然后选择一个月，并生成一个帖子库。我有一个示例图片，下面是我想要的。我怎么能实现这个目标？我在网上搜索过，找不到类似的东西。我已经添加了一个模型html和css应该看起来如何，但我无法弄清楚如何让它工作。任何帮助，将不胜感激！我在这里有一个html和css的代码笔http://codepen.io/anon/pen/egpZqr

我想要的......

my current page-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()函数以获取更多详细信息。