0
アーカイブページを作成して、年の行と月の行を作成しようとしています。ユーザは1年を選択してから月を選択する必要があり、投稿のギャラリーが生成されます。私は、私が望むものの下に例のイメージを持っています。どうすればこれを達成できますか？私はオンラインで検索しましたが、これに似たものは見つかりません。どのように表示されるべきかのモックアップHTMLとCSSを追加しましたが、動作させる方法を理解できません。どんな助けもありがとう！私は私が欲しいものhttp://codepen.io/anon/pen/egpZqrここ年を選択して月を選択してアーカイブを表示します。
をHTMLとCSSのコードペンを持っている... 
私の現在のページ-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(); ?>と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;
}