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

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка
Время чтения: 5 мин. 12 сентября 2015 в 9:00 Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

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

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

2015-09-08_143751

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

2015-09-08_143837

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

[php]
<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>

[/php]

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

[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;
}

[/php]

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

[php]

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

[/php]

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

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

[php]

<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>

[/php]

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

[php]

<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>

[/php]

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

[php]

#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;}

[/php]

[php]

<!— 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

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>

[/php]

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

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

[php]

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

[/php]

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

2015-09-08_144823

Похожие статьи

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

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

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

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

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

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

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

или позвоните мне по телефону
+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"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка
Заказ тарифа Профессионал
Введите ваше имя и телефон.
Я лично свяжусь с Вами для начала обучения.

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка
Заказ тарифа начинающий
Введите ваше имя и телефон.
Я лично свяжусь с Вами для начала обучения.

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка
Заказать услугу
В течении 15 минут я рассчитаю точную стоимость и сроки и отпишусь Вам.

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

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

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

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

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

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

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

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

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

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

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

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

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

Прикрепите файл

Сообщение *

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

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

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