Построение записей сайта

Можно по разному располагать записи рублики, например: плиткой или списком. Также сделаем механизм по переключению режимов представления постов.

Верстка плиткой

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.

Поделиться в соц. сетях: