Как сделать похожие посты на wordpress со своими стилями на masonry?

Question

[freeman0204]

Это верста masonry, здесь показан один блок для примера:

<div class="grid">

      <div class="grid-item">
          <div class="overwrap-images">
              <a href=""><img src="images/555.jpg" alt=""></a>
              <div class="overwrap-date">
                  <a href="" class="date">12/04/2016</a>
                  <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
                  <p class="desc">
    Lorem ipsum dolor sit amet.
                  </p>
              </div>
          </div>
      </div>

    </div>

Это код на php для вывода похожих записей в wordpress:

<?php $categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids, // Сортировка производится по категориям
'orderby'=>rand, // Условие сортировки рандом
'post__not_in' => array($post->ID),
'showposts'=>5, //Количество выводимых записей
'caller_get_posts'=>1); // Запрещаем повторение ссылок
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<ul>';
        while ($my_query->have_posts()) {
            $my_query->the_post();
        ?>
            <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
        <?php
        }
        echo '</ul>';
    }
wp_reset_query();
}

Если вставить весь это скрипт сюда:

<div class="grid">
      <div class="grid-item">
Сюда
</div>
</div>

то в один блок масонри поместились все 5 постов и стилей у них не. Еще судя по коду в нем автоматически создается список. Может он мешает?

<div class="grid">
      <div class="grid-item">
<ul>
<li>
<a>
Сюда
</a>
</li>
<//ul>
</div>
</div>

Как правильно вставить код php что бы масонри работало нормально?

Answer 1

[Павел]

Вот эту часть

if( $my_query->have_posts() ) {
echo '<ul>';
        while ($my_query->have_posts()) {
            $my_query->the_post();
        ?>
            <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
        <?php
        }
        echo '</ul>';
    }

Заменить на:

if( $my_query->have_posts() ) {
echo '<div class="grid">';
        while ($my_query->have_posts()) {
            $my_query->the_post();
        ?>
           <div class="grid-item">
          <div class="overwrap-images">
              <a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a>
              <div class="overwrap-date">
                  <a href="<?php the_permalink();?>" class="date"><?php the_date('d/m/Y');?></a>
                  <h3><a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
                  <p class="desc">
    <?php the_excerpt();?>
                  </p>
              </div>
          </div>
      </div>

        <?php
        }
        echo '</div>';
    }

Нужно иметь хоть базовые представления. Читаем: IF - php.net/manual/ru/control-structures.if.php
WHILE - php.net/manual/ru/control-structures.while.php
Цикл WP - https://codex.wordpress.org/Цикл_WordPress

Comments

[freeman0204]

Спасибо!

[Павел]

Артур Черешнюк: Пожалуйста)

[freeman0204]

Павел: А как сделать так что бы в одном из блоков здесь был добавлен класс grid-item-h2? Так как с одного блока в масонри высота в 2 раза больше.

[Павел]

Артур Черешнюк: Есть какая-то закономерность? каждый 2ой или каждый 5ый, или просто 4ый по счету и все.

[freeman0204]

Павел: в css то стили указаны для grid-item-h2 но в блоке div class=grid-item если поставить этот класс то стили этого блока применяются для всех постов. А нужно поставить этот класс только в 3 блок например.

[Павел]

Артур Черешнюк: попробуйте через css
.grid-item:nth_child(3) {
height: 100500px;
}
можно через jquery попробовать. но ПЕРЕД masonry
$('.grid-item:nth_child(3)').removeClass('.grid-item').addClass('.grid-item-h2');

можно на стороне сервера в цикле добавить счетчик и условие

if( $my_query->have_posts() ) {
$i=1;
echo '<div class="grid">';
        while ($my_query->have_posts()) {
            $my_query->the_post();
        ?>
           <div class="grid-item<?php if($i==3) echo '-h2';?>">
          <div class="overwrap-images">
              <a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a>
              <div class="overwrap-date">
                  <a href="<?php the_permalink();?>" class="date"><?php the_date('d/m/Y');?></a>
                  <h3><a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
                  <p class="desc">
    <?php the_excerpt();?>
                  </p>
              </div>
          </div>
      </div>

        <?php $i++;
        }
        echo '</div>';
    }

[freeman0204]

Павел: Спасибо, попробую.