如何通过选择年再选择月来显示档案

时间：2017-01-08 作者：user6738171

我正在尝试构建我的归档页面，使其具有连续的年份和连续的月份。然后，用户必须选择一年，然后选择一个月，然后会生成一个帖子库。我下面有一个我想要的示例图像。我怎样才能做到这一点？

我在网上搜索过，找不到类似的东西。我已经添加了一个html和css模型，说明它应该是什么样子，但我就是不知道如何让它工作。任何帮助都将不胜感激！我这里有一支html和css的代码笔http://codepen.io/anon/pen/egpZqr

我想要的。。。enter image description here

我的当前page-archive.php

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<?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(); ?>

<!-- end snippet -->
和css

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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;
}

<!-- end snippet -->

1 个回复
SO网友:cjbj

不幸的是，没有办法筑巢wp_get_archives 为了实现这一点，您必须使用get_month_link 这样（未经测试，以此为起点）：

$year = 2009; 
while ($year =< get_the_time(\'Y\')) {
  echo \'<ul>\'
  $month = 1;
  while ($month =< 12) {
    $link = get_month_link ($year, $month);
    if ($link != \'\') {
      echo \'<li>\' . $link . \'</li>\';
      }
    $month = $month + 1;
    }
  echo \'</ul>\';
  $year = $year + 1;
  }
小心点get_month_link 不测试当月是否有要显示的帖子。因此链接永远不会为空，除非您使用month_link 筛选以执行该测试，在这种情况下，返回一个空链接。

接下来，您需要css来正确显示这个有序列表，但这不是一个WP问题。

标签： plugin-development   javascript   archives   custom-post-type-archives   archive-templat  

相关推荐

如何将Bootstrap Tour JavaScript添加到WordPress管理面板仪表板小部件

我正在开发一个主题，想知道如何将引导程序教程脚本添加到自定义仪表板小部件中。基本上，我想将引导程序巡更脚本包含到管理面板中，这样我就可以编写一个自定义仪表板小部件，然后将巡更脚本链接到该小部件。