Можно по разному располагать записи рублики, например: плиткой или списком. Также сделаем механизм по переключению режимов представления постов.
Верстка плиткой
HTML
<div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <div class="hentry-box"> <a href="<?php the_permalink(); ?>"> <?php if( has_post_thumbnail() ) {the_post_thumbnail(square);} else {echo '<img src="'.get_bloginfo("template_url").'/images/img-default-square.jpg" />';} ?> </a> <h2 class="title-post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php if( get_the_tag_list()): ?><?php the_tags( '<small>', ' / ', '</small>' ); ?><?php endif; ?> <div class="post-info"><small> <hr class="line-wt"> <i class="fa fa-user"></i> <?php the_author(); ?><br> <i class="fa fa-clock-o"></i> <?php echo get_the_date(); ?><br> <i class="fa fa-comment"></i> <?php comments_number('0', '1', '%'); ?> </small></div> </div> </div>
CSS
.hentry-box { float: left; display: block; position: relative; width: 18%; padding: 5px; /*padding: 2%;*/ margin: 15px 1%; box-shadow: 2px 2px 6px #ccc; background-color: whitesmoke; /*rgba(25, 25, 25, 0.5);*/ border: 1px solid #FFFFFF; box-sizing: border-box; transition: background-color 0.5s ease; -webkit-transition: background-color 0.5s ease 0s; } @media (max-width:1280px) { .hentry-box {width: 23%;} } @media (max-width:1024px) { .hentry-box {width: 29.33333%; margin: 15px 2%;} } .hentry-box:hover {background-color: #fff;} .hentry-box small {text-align:center;} .hentry-box small a {color: coral;} .hentry-box img { width: 100%; height: auto; } .hentry-box .line-cont { float: left; width: 100%; } .hentry-box .title-post { padding: 5px 0 10px 0; text-align: center; font-size: 18px; } .hentry-box .excerpt {display: none;} .post-info { width: 100%; color: #FF9C9C; float:left; color: #111; } .post-info .fa {color: #FF9C9C;}
Верстка линиями html
CSS
.hentry-line { margin-bottom: 10px; float: left; display: block; width: 100%; padding: 1%; box-shadow: 2px 2px 6px #ccc; border: 1px solid #FFFFFF; box-sizing: border-box; transition: background-color 0.5s ease; -webkit-transition: background-color 0.5s ease 0s; } .hentry-line img { width: 17%; height: auto; float: left; margin-right: 3%; } .hentry-line .line-cont { float: left; width: 80%; } .hentry-line .title-post { padding: 0; text-align: left; font-size: 22px; } .hentry-line small { text-align: left; } .hentry-line .excerpt { display: block; float: left; width: 100%; padding: 20px 0; } @media (max-width:1440px) { .hentry-line img {width: 20%;} .hentry-line .line-cont {width: 77%;} } @media (max-width:1280px) { .hentry-line img {width: 22%;} .hentry-line .line-cont {width: 75%;} } @media (max-width:1024px) { .hentry-line img {margin-right: 6%;} .hentry-line .line-cont {width: 72%;} }
Переключение видов
Подключаем скрипты: jquery.cookie.min.js (базовый скрипт) и скрипт site-choice-view-post.js
$(document).ready(function(){ $("#btn-line, #btn-block, #btn-photo, #btn-column").click(function(){ $('.hentry').addClass('animated fadeIn'); setTimeout(function () { $('.hentry').removeClass('animated fadeIn'); }, 500); }); /* localStorage */ $("#btn-block").click(function(){ $(".hentry").removeClass("hentry-line hentry-photo hentry-column"); localStorage.setItem('construct', 'blocks'); }); $("#btn-line").click(function(){ $(".hentry").removeClass("hentry-box hentry-photo hentry-column"); $(".hentry").addClass("hentry-line"); localStorage.setItem('construct', 'lines'); }); $("#btn-photo").click(function(){ $(".hentry").removeClass("hentry-line hentry-box hentry-column"); $(".hentry").addClass("hentry-photo"); localStorage.setItem('construct', 'photo'); }); $("#btn-column").click(function(){ $(".hentry").removeClass("hentry-line hentry-box hentry-photo"); $(".hentry").addClass("hentry-column"); localStorage.setItem('construct', 'column'); }); if(localStorage.getItem('construct') == 'blocks') { $(".hentry").removeClass("hentry-line hentry-photo hentry-column"); } if(localStorage.getItem('construct') == 'lines') { $(".hentry").removeClass("hentry-box hentry-photo hentry-column"); $(".hentry").addClass("hentry-line"); } if(localStorage.getItem('construct') == 'photo') { $(".hentry").removeClass("hentry-line hentry-box hentry-column"); $(".hentry").addClass("hentry-photo"); } if(localStorage.getItem('construct') == 'column') { $(".hentry").removeClass("hentry-line hentry-box hentry-photo"); $(".hentry").addClass("hentry-column"); } }); // Перезагрузка высоты блоков $( '#btn-block, #btn-line, #btn-photo, #btn-column, .list_tabs2 li:first-child' ).click(function(){ $(".hentry").css("height", "auto"); $(".hentry").setEqualHeight(); });
Работает это все на основе cookies. Теперь создаем функцию шорткода кнопок переключения (либо можно их вывести в любом месте и без шорткода):
function sitechoiceviewpost() { echo '<div id="style-list">'; echo '<span id="btn-block"><i class="fa fa-th-large"></i></span>'; echo '<span id="btn-line"><i class="fa fa-bars"></i></span>'; echo '<span id="btn-photo"><i class="fa fa-picture-o"></i></span>'; echo '<span id="btn-column"><i class="fa fa-bars fa-rotate-90" aria-hidden="true"></i></span>'; echo '</div>'; } add_shortcode( 'choice-view-post', 'sitechoiceviewpost' );
Этот же функционал, только заточенный для товаров Woocommerce.
[site-socialshare]