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

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

HIT

05.12.2015

3515

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

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

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]
  • Похожие записи
  • Комментарии
  • Вложения
Блочная верстка сайта

Блочная верстка сайта

Сайт должен верстаться по сетке блоками. При использовании сетки разметка сайта выглядит гармонично. Предлагаю свой простой вариант верстки блоков. Для добавления блоков, используйте тэги <div class="box"> <div class="block-1">Содержимое</div> — ширина Читать далее »

FlexBlock. Современная верстка

FlexBlock. Современная верстка

Верстка сайтов постоянно эволюционирует: от табличной верстки к верстке div с float (frame), далее промежуточный этап верстка diplay:inline-block. Так или иначе суть верстки — модульная сетка. Современный CSS дает нам Читать далее »

/
Верстка типовых блоков

Верстка типовых блоков

Находим оптимальные решения верстки типовых блоков, т.е. конструкций которыми на различных сайтах приходиться пользоваться часто. Изображение текст Очень часто используется связка «изображение + текст»: списки статей, перечисление преимуществ, опции, достопримечательности Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Построение записей сайта
Движение фона от мыши
Рекомендации для васДвижение фона от мышиOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.