0
년 아카이브 페이지를 작성하여 연도 행과 월 행을 만들려고합니다. 그런 다음 사용자는 1 년을 선택한 다음 한 달을 선택해야하며 게시물 갤러리가 생성됩니다. 나는 내가 원한 것에 대한 아래의 예제 이미지를 가지고있다. 내가 어떻게 이걸 얻을 수 있니? 온라인으로 검색 한 결과 이와 비슷한 것을 찾을 수 없습니다. 나는 모형 (mockup) html과 css를 추가해야한다.하지만 어떻게 작동하는지 알아낼 수는 없다. 어떤 도움을 주시면 감사하겠습니다! 나는 HTML과 여기에 내가 원하는 http://codepen.io/anon/pen/egpZqr연도를 선택하고 월을 선택하여 아카이브를 표시합니다.
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;
}