Intereting Posts
Сохранять выражение регулярного выражения в WordPress DB с помощью API-интерфейсов API WordPress в режиме «Couch Mode»? Перенаправить все сообщения с помощью URL .html в .html Извращенная копия моего блога на этом сайте? Post Format Archive имя шаблона для папки темы? Вызов файла JavaScript с пользовательским плагином Как установить плагин для automattic-разработчика под локальным хостом для мампа, когда есть ошибка, не рекомендуется? Twentyten Child Theme: изображение заголовков изображений перепутано в панели администратора 404 Дополнительно 403 Запрещенная ошибка URL-адреса Получить ордер Meta Box на странице / почте WordPress Последние комментарии Виджет исключает собственные комментарии Контролируйте, следует ли удалять собственный тип сообщения Определить имя плагина из фильтра plugin_action_links Используйте URL Rewrite, а также параметры $ _GET в URL-адресе? Поиск, который будет отображаться в пользовательском поле, опубликовать заголовок и опубликовать контент

Ориентация на определенную запись в цикле (CSS)

Я делаю раздел «Лучшие фотографии» на странице. Этот раздел будет содержать 3 последних сообщения (есть галереи в сообщениях), каждый из которых содержит эскиз, ссылку и выдержку из сообщений. Посты будут отображаться в «box-style» и выравниваются по горизонтали. Контейнер для этих коробок имеет ширину 1050 пикселей.

Вот моя петля:

<div id="top-content"> <?php $custom_query = new WP_Query('cat=2687&posts_per_page=3'); //Top of the page - Top Photo Category while($custom_query->have_posts()) : $custom_query->the_post(); ?> <ul> <li <?php post_class(); ?> id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('top-photo-thumb'); ?><h2><?php the_title(); ?></h2></a> <p> <?php llc_excerpt('llc_excerptlength_long', 'llc_excerptmore') ?></p> <p class="view-more"><a href="<?php the_permalink(); ?>">View Gallery</a></p> </li> </ul> <?php endwhile; ?> <?php wp_reset_postdata(); // reset the query ?> </div> 

и вот мой файл CSS:

 #top-content{ margin-left: -10px; } #top-content ul{ margin: 0 4px; float: left; } #top-content ul li{ width: 320px; height: 100%; margin: 0 5px 0 5px; padding: 0 14px 0 0; /*display: block;*/ border-right: 1px solid #D6D5D5; } #top-content h2 { font-family: Verdana, Geneva, sans-serif; font-size: 12pt; font-style: normal; line-height: 12pt; font-weight: bold; font-variant: normal; text-transform: none; color: #4A65A8; padding: 0px; margin: 7px 0 0 0; text-align: left; } #top-content ul li p{ width: 320px; margin: 5px 0 0 0; text-align: justify; } #top-content ul:last-child{ margin-left: 5px; background-color: yellow; border-style: 0px; } #top-content ul:last-child a img{ margin-left:23px; } #top-content ul:last-child h2{ margin-left:23px; } #top-content ul:last-child p{ margin-left:23px; } 

(извините за грязный код. Я экспериментировал: P)

Я хочу сделать разделительную линию CSS между этими «ящиками» (сообщениями). Первый и третий (последний) боксы должны быть размещены прямо на левом и правом краю контейнера, соответственно, без левого и правого края, поэтому я думаю, что способ достижения этого состоит в том, чтобы направить второй пост, а затем добавить левую и правую границу в Это.

Как мне это достичь или у вас есть другое предложение? (Я думаю, что в цикле можно добавить собственный класс). Как вы можете видеть, я пытался использовать last-child (с nth и этим «n» thingy) селектором и до сих пор не повезло .. Я не очень хорошо разбираюсь в CSS (и PHP) TBH ..

Заранее спасибо!

Solutions Collecting From Web of "Ориентация на определенную запись в цикле (CSS)"

Ключ здесь:

 <li <?php post_class(); ?> id="post-<?php the_ID(); ?>"> 

Вы можете добавить параметр к вызову post_class , например:

 $counter = 0; $custom_query = new WP_Query('cat=2687&posts_per_page=3'); //Top of the page - Top Photo Category while($custom_query->have_posts()) : $custom_query->the_post(); $counter++; $column = $counter %3; // 3 columns, use module to get the remainder $class = "column-".$column; ?> <ul> <li <?php post_class($class); ?> id="post-<?php the_ID(); ?>"> 

Теперь первый столбец будет иметь класс «column-0», второй «столбец-1» и третий / последний «столбец-2». Затем вы можете применить свои стили к этим:

 #top-content .column-2{ margin-left: 5px; background-color: yellow; border-style: 0px; } #top-content .column-2 a img{ margin-left:23px; } #top-content .column-2 h2{ margin-left:23px; } #top-content .column-2 p{ margin-left:23px; } 

Также не забудьте поставить if($custom_query->have_posts()) вокруг вашего цикла, вы никогда не знаете, что может произойти, и определите ваш запрос как массив, а не строку, например:

 $custom_query = new WP_Query(array( 'cat' => 2687, 'posts_per_page' => 3 )); 

Это чище, легче читать, и вы можете делать более сложные запросы. Это также немного быстрее, и это хорошая практика.