+7-499-70-300-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Спасибо за оставленную заявку
Ожидайте звонка

Вывод постов в несколько колонок

Блог вебмастера

Пример 1 — что получим на выходе:

2015-09-08_143751

Пример 2 — что получим на выходе:

2015-09-08_143837

Как 1 так и 2 способы делается с помощью функции:

<div class="main">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work
if (have_posts()) : while (have_posts()) : the_post();
if( $counter == $grids ) : 
$counter = 0; // Reset counter ?>

<div class="col-3 mybock">
<?php else: ?>
<div class="col-3 mybock"> 
<?php endif; ?>
 
   
<div class="archiveimg">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" /></a>
<div class="post-title"><h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3></div>
</div>

<div class="clear" style="margin: 20px 0;"></div> 
</div>
 


<?php
$counter++;
endwhile;
//Pagination can go here if you want it.


endif;
wp_reset_postdata(); // Reset post_data after each loop
?>

</div>

</div>

Код ниже добавляем в файл functions.php. Он берет первую картинку с поста и делаем её миниатюрой.

 
//Вывод первой картинки с поста
function first_post_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
  if(empty($first_img)){
   $first_img = "/wp-content/themes/hypershot/images/demo-content.jpg";
// укажите путь к изображению, которое будет выводится по умолчанию. 
  }
  return $first_img;
}

В графе — $grids = 3; //Grids per row — указываем нужное число колонок.
В графе — col-3 — указываем класс, с помощью которого мы и делаем колонки. Прописывал так:


.col-3 {
    width: 32.33%;
    float: left;
    margin-right: 1%;
	}
.col-3:last-child {
    margin-right:0%;
    width: 33.33%;
}

В графе — mybock — прописан класс, который отвечает за выравнивание постов по высоте. Дополнительно требуется подключение скриптов (jquery подключайте если не подключен ):

Стандартный код


<div id="gridcontainer">
<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work


/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');


if(have_posts()) :	while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>
</div>

Исходный код будет выглядеть так:


<div id="gridcontainer"> 
<div class="griditemleft"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="griditemright"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="clear"></div> 
</div>

Стили к стандартному коду:


#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #77787a; font-size: 13px;}
#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
#gridcontainer .griditemright{float: left; width: 278px;}
#gridcontainer .postimage{margin: 0 0 10px 0;}


<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<!-- Скрипт отвечает за выравнивание постов по высоте -->

<script>
/* Thanks to CSS Tricks for pointing out this bit of jQuery
http://css-tricks.com/equal-height-blocks-in-rows/
It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.main .mybock');
});


$(window).resize(function(){
  equalheight('.main .mybock');
});

</script>

В графе main — указан стиль, внутри которого будет ровнять блоки по высоте.

Выводим посты из произвольных таксономий


<?php
  $args = array(
    'tax_query' => array(
        array(
            'taxonomy' => 'products-category',
            'field' => 'slug',
            'terms' => array( 'katalog' )
        ),
    ),
    'post_type' => 'products'
);
?>

Где — katalog — название произвольной рубрики в новой таксономии.
А — products-category — название таксономии

2015-09-08_144823

Другие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка