0
Ich versuche, meine Archivseite so zu erstellen, dass eine Reihe von Jahren und eine Reihe von Monaten angezeigt werden. Der Benutzer müsste dann ein Jahr auswählen und dann einen Monat auswählen, und eine Galerie von Posts würde erzeugt werden. Ich habe ein Beispielbild unten von dem, was ich will. Wie könnte ich das erreichen? Ich habe online gesucht und ich kann nichts ähnliches finden. Ich habe ein Mockup-HTML und CSS hinzugefügt, wie es aussehen sollte, aber ich kann einfach nicht herausfinden, wie es funktioniert. Jede Hilfe wäre willkommen! Ich habe einen Code Feder des HTML und CSS hier http://codepen.io/anon/pen/egpZqrZeigen Sie das Archiv an, indem Sie Jahr auswählen und dann den Monat auswählen
, was ich will ... 
meine aktuelle Seite-archive.php
<?php
get_header(); ?>
<div class="page-header">
<h1>ARCHIVE</h1>
</div>
<div class="archive-block">
\t <span class="archive-block__alert">
\t \t Please Select A Year First \t </span>
\t <ul class="archive-block__list archive-block__list--year">
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2009">
\t \t \t \t \t 2009 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2010">
\t \t \t \t \t 2010 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2011">
\t \t \t \t \t 2011 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2012">
\t \t \t \t \t 2012 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2013">
\t \t \t \t \t 2013 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2014">
\t \t \t \t \t 2014 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2015">
\t \t \t \t \t 2015 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2016">
\t \t \t \t \t 2016 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year archive-block__selector--current-year" data-year="2017">
\t \t \t \t \t 2017 \t \t \t \t </span>
\t \t \t </li>
\t \t
\t </ul>
\t <ul class="archive-block__list archive-block__list--month">
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month archive-block__selector--current-month" data-month="1">
\t \t \t Jan \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="2">
\t \t \t Feb \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="3">
\t \t \t Mar \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="4">
\t \t \t Apr \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="5">
\t \t \t May \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="6">
\t \t \t Jun \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="7">
\t \t \t Jul \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="8">
\t \t \t Aug \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="9">
\t \t \t Sep \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="10">
\t \t \t Oct \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="11">
\t \t \t Nov \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="12">
\t \t \t Dec \t \t </span>
\t </li>
\t \t \t </ul>
</div>
<div class="archive-block__empty-con">
\t <span class="archive-block__empty">
\t \t That combination is empty! Please select a different combination \t </span>
</div>
<?php get_footer(); ?>und 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;
}