Intereting Posts
Автоматически создавать несколько размеров изображения для элемента <picture> Невозможно изменить ссылку для элемента навигации Установите столбцы div в цикле по количеству сообщений Контактная форма для перенаправления на страницу не найдена при отправке Шаблон страницы не отображает простой HTML, если он вставлен на другую страницу? Доступ к текущему URL-адресу в текстовом виджете для кнопки «Facebook»? Как заменить поле выбора javascript onchange event на действие отправки формы? Переписать пользовательский тип URL-адреса типа сообщения Отзывчивое меню по теме генезиса AJAX не передает переменные функции php в плагине Какая папка для размещения больших видеофайлов? Почему get_template_directory_uri () не включает «www», только для выставленных таблиц стилей? Javascript не работает в admin Каков правильный способ создания виджета с помощью OOP DIR против URI при определении пути к файлу

Отображение 3 сообщений с разной разметкой HTML с использованием цикла

Я хочу, чтобы иметь возможность отображать 3 сообщения из той же категории на моей странице index.php, но из-за того, что кодировка HTML / CSS на моем сайте мне сложно понять, как правильно это сделать, используя цикл (поскольку код для используемых divs не одинаковый для всех трех разделов, он использует разные стили CSS для достижения многоуровневого эффекта / внешнего вида).

Вот код HTML

<div id="first-story" class="story"> <div class="content"> <h3 class="story-heading">Headline 1</h3> <ul> <li>Nullam sit amet scelerisque est. </li> <li>Aliquam erat volutpat. Duis sed nisi nunc, faucibus rutrum mauris. </li> <li>Nullam iaculis lorem ut tortor ullamco per aliquet. Integer id leo non mauris pulvinar gravida vitae a enim. </li> <li>Nullam sit amet scelerisque est.</li> </ul> <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div> <div class="edge"></div> 

 <div id="second-story" class="story"> <div class="content"> <h3 class="story-heading">Headline 2</h3> <p>Paragraph text</p> <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div> </div> 

 <div id="third-story" class="story"> <div class="edge"></div> <div class="content">Headline 3</div> <ul> <li>List item</li> </ul> <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div> </div> 

Любая помощь будет очень высоко ценится.

Объект запроса WordPress имеет внутренний счетчик current_post , который вы можете использовать для проверки позиции сообщения в цикле, который вы в настоящее время вывешиваете, будь то основной запрос $wp_query или пользовательский запрос, WP_Query помощью WP_Query . Важная вещь, чтобы помнить о current_post состоит в том, что она нулевая индексация , первое сообщение – 0, второе сообщение – 1 и т. Д.

Пример, используя основной запрос в шаблоне:

 while( have_posts() ): the_post(); if( 0 == $wp_query->current_post ) { echo 'this is the first post'; // markup for first post } elseif( 1 == $wp_query->current_post ) { echo 'this is the second post'; } elseif( 2 == $wp_query->current_post ) { echo 'this is the third post'; } else { echo 'this is > third post'; } endwhile; 

Если вы создаете новый запрос через WP_Query , вы делаете то же самое, за исключением того, что вы ссылаетесь на объект запроса, который вы создали с помощью настраиваемого запроса:

 $args = array(); // your custom query args $custom_query = new WP_Query( $args ); while( $custom_query->have_posts() ): $custom_query->the_post(); if( 0 == $custom_query->current_post ) { echo 'this is the first post'; } // etc.. endwhile;