Как разделить цикл на несколько столбцов
Если у меня есть цикл, выполняемый из запроса категории, например:
<?php $the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');?>
<ul>
<?php while ($the_query->have_posts()) : $the_query->the_post();?>
<li>.. </li><?php wp_reset_query(); ?>
<?php endwhile; ?>
</ul>
Как бы я создал предложение if, которое разбивает список на определенный интервал и запускает новый. Так, например, в 10-м посте верните </ul> и начните новый <ul> в 11.
Это неверно, но для иллюстрации моей цели:
<?php $count =0;
while($count <=50){
if ($count == 9){
echo "<li><a href='<?php the_permalink(); ?>'>
<?php the_title(); ?></a></li></ul>";
}
elseif ($count == 10){
echo "<ul><li><a href='<?php the_permalink(); ?>'>
<?php the_title(); ?></a></li>";
}
else {
echo "<li><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></li>";
}
Как правильно включить эту логику в цикл?
5 answers
Создайте столбцы для вашего запроса и удобного отображения
В темах, вероятно, более полезно иметь что-то, что хорошо вписывается в теги шаблонов и цикл. Мой первый ответ не был сосредоточен на этом. Кроме того, я подумал, что это слишком сложно для быстрого усыновления.
Более простой подход, который пришел мне в голову, состоял в том, чтобы расширить "цикл" столбцами и пришел к этому решению до сих пор:
Объект wp_query_columns "расширяет" любой стандартный запрос WP с колонками, которые можно легко повторить. Первый параметр - это переменная запроса, а второй параметр - количество элементов, отображаемых в столбце:
<?php $the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');?>
<?php foreach(new WP_Query_Columns($the_query, 10) as $column_count) : ?>
<ul>
<?php while ($column_count--) : $the_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php endforeach; ?>
Чтобы использовать его, просто добавьте класс wp_query_columns из этого gist в свои темы function.php .
Расширенное использование
Если вам нужен номер столбца, который вы в данный момент отображаете (например, для некоторых четных/нечетных классов CSS, вы можете получить его из foreach как хорошо:
<?php foreach(new WP_Query_Columns($the_query, 10) as $column => $column_count) : ?>
И общее количество столбцов также доступно:
<?php
$the_columns = new WP_Query_Columns($the_query, 10);
foreach($the_columns as $column => $column_count) :
?>
<h2>Column <?php echo $column; ?>/<?php echo sizeof($the_columns); ?></h2>
<ul>...
Двадцать десять Примеров
Я мог бы быстро взломать двадцать десять тем для теста и добавить заголовки над любым циклом таким образом. Он вставлен в loop.php, начало - это код темы:
<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</div><!-- #post-0 -->
<?php endif; ?>
<!-- WP_Query_Columns -->
<?php
### Needs WP_Query_Columns --- see http://wordpress.stackexchange.com/q/9308/178
$query_copy = clone $wp_query; // save to restore later
foreach( new WP_Query_Columns($wp_query, 3) as $columns_index => $column_count ) : ?>
<ul>
<?php
while ( $column_count-- ) : the_post(); ?>
<li><h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2></li>
<?php endwhile; ?>
</ul>
<?php endforeach; ?>
<?php $wp_query = $query_copy;?>
<?php
/* Start the Loop.
...
Для более длинного ответа:
( в основном так я пришел к изложенному выше, но лучше объясняет, как на самом деле решить проблему с помощью простых математических операций. Мое новое решение состоит в том, чтобы повторить что-то предварительно рассчитанное.)
Это немного зависит от того, сколько вам на самом деле нужно для решения проблемы.
Например, если количество элементов в столбце равно единице, это очень просто:
<?php $the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');?>
<?php while ($the_query->have_posts()) : $the_query->the_post();?>
<ul>
<li>.. </li>
<ul>
<?php endwhile; wp_reset_query(); ?>
</ul>
Даже с помощью этого простого кода можно увидеть, что необходимо принять несколько решений:
- Сколько элементов в одном столбце?
- Сколько всего предметов?
- Есть ли новый столбец для начать?
- И есть ли столбец, который нужно закончить?
Последний вопрос довольно интересен для вывода HTML, так как вы, вероятно, захотите вложить не только элементы, но и столбец с элементами html.
К счастью, с помощью кода мы можем задать все это в переменных и создать код, который всегда вычисляет в соответствии с нашими потребностями.
А иногда даже мы не можем ответить на каждый вопрос с самого начала. Для примера, количество общих элементов: есть ли какие-либо, некоторые, несколько, точное количество, которое совпадает с целым числом столбцов в общей сложности?
Даже ответ Яна Фабри может сработать в некоторых случаях (как в моем примере выше для сценария с одним элементом на столбец), вас может заинтересовать что-то, что работает для любого количества элементов, возвращаемых WP_Query.
Сначала по математике:
//
// arithmetical example:
//
# configuration:
$colSize = 20; // number of items in a column
$itemsTotal = 50; // number of items (total)
# calculation:
$count = 0; // a zero-based counter variable
$isStartOfNewColum = 0 === ($count % $colSize); // modulo operation
$isEndOfColumn = ($count && $isStartOfNewColum) || $count === $itemsTotal; // encapsulation
Этот код не запускается, поэтому давайте рассмотрим его в простом текстовом примере
//
// simple-text example:
//
$column = 0; // init a column counter
for($count=0; $count<= $itemsTotal; $count++) {
$isStartOfNewColum = 0 === ($count % $colSize); // modulo
$isEndOfColumn = ($count && $isStartOfNewColum);
$isStartOfNewColum && $column++; // update column counter
if ($isEndOfColumn) {
printf("/End of Column: %d\n", $column-1);
}
if ($isStartOfNewColum) {
printf("<start of Column: %d\n", $column);
}
printf(" * item %d\n", $count);
}
if ($count && !$isEndOfColumn && --$count === $itemsTotal) {
printf("/End of Column: %d\n", $column);
}
printf("Done. Total Number of Columns: %d.\n", $column);
Это на самом деле выполняется и уже выводит некоторые данные:
<start of Column: 1
* item 0
* item 1
* item 2
* item 3
...
* item 17
* item 18
* item 19
/End of Column: 1
<start of Column: 2
* item 20
* item 21
* item 22
...
* item 37
* item 38
* item 39
/End of Column: 2
<start of Column: 3
* item 40
* item 41
* item 42
...
* item 48
* item 49
* item 50
/End of Column: 3
Done. Total Number of Columns: 3.
Это уже довольно хорошо имитирует, как это могло бы выглядеть в шаблоне WordPress:
//
// wordpress example:
//
$count = 0; // init item counter
$column = 0; // init column counter
$colSize = 10; // column size of ten this time
$the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');
$itemsTotal = $the_query->post_count;
?>
<?php while ($the_query->have_posts()) : $the_query->the_post();?>
<?php
# columns display variables
$isStartOfNewColum = 0 === ($count % $colSize); // modulo
$isEndOfColumn = ($count && $isStartOfNewColum);
$isStartOfNewColum && $column++; // update column counter
if ($isEndOfColumn) {
print('</ul>');
}
if ($isStartOfNewColum) {
printf('<ul class="col-%d">', $column);
}
?>
<li> ... make your day ...
</li>
<?php endwhile; ?>
<?php
if ($count && !$isEndOfColumn && --$count === $itemsTotal) {
print('</ul>');
}
// You don't have to do this in every loop, just once at the end should be enough
wp_reset_query();
?>
(Я не выполнил последний пример в среде WP, но он должен быть, по крайней мере, синтаксически правильным.)
Это скорее общий вопрос программирования, но вот основная идея:
<?php $the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');?>
<ul>
<?php
$post_counter = 0;
while ($the_query->have_posts()) :
$the_query->the_post();
$post_counter++;
?>
<li>.. </li>
<?php
if ( 0 == $post_counter % 10 ) {
echo '</ul><ul>';
}
endwhile;
?>
</ul>
<?php
// You don't have to do this in every loop, just once at the end should be enough
wp_reset_query();
?>
Нет необходимости создавать отдельный var для подсчета, так как var запроса уже подсчитывает его по адресу: $wp_query->current_post. Кроме того, вам необходимо учитывать последнюю запись в списке, чтобы в вашей разметке не было пустого <ul></ul>.
<?php
$the_query = new WP_Query('showposts=21&orderby=title&order=asc');
echo "<ul>";
while ($the_query->have_posts()) :
$the_query->the_post();
echo "<li>{$the_query->current_post}</li>";
// Note that the post is already counted in the $the_query->current_post variable when in the loop. Add one to translate array counting to real counts.
// Jan's example didn't account for the final entry in the list. Don't want empty <ul>'s hanging around
if ((($the_query->current_post+1) % 10 == 0) && ($the_query->current_post+1 !== count($the_query->posts))):
echo "</ul><ul>";
endif;
endwhile;
echo "</ul>";
?>
Добавьте get_columns_array() функция для вашего function.php . Затем вы можете легко перебирать свои столбцы:
В вашей теме вы затем выполняете цикл по столбцам:
<?php $the_query = new WP_Query('cat=1&showposts=50&orderby=title&order=asc');?>
<?php foreach(get_columns_array($post_count) as $column_count) : ?>
<ul>
<?php while ($column_count--) : $the_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php endforeach; wp_reset_postdata(); ?>
Я установил размер столбца по умолчанию равным 10. Вы можете использовать второй параметр, чтобы самостоятельно задать размер столбца. Хотелось бы 7: get_columns_array($post_count, 7);.
Вот еще один подход, который вы можете предпринять:
$article = 0;
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $article = $article + 1; ?>
<?php if ($article % 3 == 1) echo '<div class="row-fluid">'; ?>
<div class="span4">
<h2><a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
</div><!--/span-->
<?php if ($article % 3 == 0) echo '</div><!--/row-->'; ?>
<?php endwhile;?>
<?php else: ?>
<h2>...</h2>
<?php endif; ?>