Вертикальные столбцы в алфавитном порядке

Мне нужно создать список из 9 столбцов, который выводит сообщения, отсортированные по вертикали и по алфавиту. Я приближаюсь, но все равно не знаю. У меня есть две отдельные петли, с которыми я работаю.

Первый цикл у меня есть так, как я его хочу, отсортированный по букве и по алфавиту в таблицах. Проблема здесь в том, что я просто не могу получить стиль правильно.

Второй из которых я использовал функцию wp_query_columns . С этим я получаю цикл, который правильно отсортирован, и с float:left я правильно выровнял его. Здесь отсутствует то, что мне нужно установить заранее определенный набор чисел для каждой строки, где мне нужно, чтобы она была динамически, а также мне нужно ее сортировать после буквы, как в первом примере.

Я пробовал множество способов сделать это за последние несколько дней, и я в замешательстве. Оба они, кажется, на правильном пути, не уверенные, с кем я должен работать. Здесь вы можете увидеть оба выхода (прокрутите вниз для второго)

Петля 1

 <?php $last_char = ''; $args=array( 'post_type' => 'portfolio', 'orderby' => 'title', 'order' => 'ASC', 'posts_per_page'=>-1, 'portfolio-category' => 'indie', 'ignore_sticky_posts'=>1 ); $my_query = new WP_Query($args); $columnCount = 0; ?> <?php if( $my_query->have_posts() ) : ?> <?php echo 'Alphabetic index of all ' . count($my_query->posts) . ' posts'; ?> <table> <?php while ($my_query->have_posts()) : ?> <?php if ($columnCount == 8): ?> <?php endif; ?> <?php $my_query->the_post(); ?> <?php $this_char = strtoupper(substr($post->post_title,0,1)); if ($this_char != $last_char) : ?> </table></td><td> <?php $last_char = $this_char; ?> <h2> <?= $last_char; ?></h2> <table> <?php else: ?> <tr><td><p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p></td></tr> <?php endif; ?> <?php endwhile; ?> <?php if ($columnCount != 8): ?> </tr><!-- Make sure the last row gets closed. --> <?php endif; ?> </table> <?php endif; ?> <?php wp_reset_query(); // Restore global post data stomped by the_post(). ?> 

Петля 2

 <?php $args=array( 'post_type' => 'portfolio', 'orderby' => 'title', 'order' => 'ASC', 'posts_per_page'=>-1, 'portfolio-category' => 'indie', 'gnore_sticky_posts'=>1 ); $the_query = new WP_Query($args); foreach(new WP_Query_Columns($the_query, 15) as $column_count) : ?> <ul> <?php while ($column_count--) : $the_query->the_post(); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> <?php endforeach; ?> 

Solutions Collecting From Web of "Вертикальные столбцы в алфавитном порядке"

РЕДАКТИРОВАТЬ

Из комментариев ОП

Есть несколько проблем, хотя и предложения по улучшению. Прежде всего, не уверен, что я что-то пропустил, но список не ссылки? Во-вторых, в этом списке он выводит письмо, даже если у него нет сообщения, назначенного букве …..

а также

Сообщения, начинающиеся с номера, не будут указаны, можно ли расширить диапазон для этого?

Я полностью переписал весь код. Тем не менее, у обоих блоков кодов в вашем вопросе были серьезные проблемы, поэтому снова я сбросил оба. Как указано в @birgire, код в моем первоначальном ответе имел недостаток количества запросов db из-за того, что я включал и пустые буквы (подумал, что это то, что вы хотели)

Я сделал ссылки кликабельными, а также предусмотрел включение чисел в качестве первого символа для сортировки. То, что я не вдавался в детали, – это стиль.

Итак, вот пересмотренный код

 <?php $args=array( 'post_type' => 'portfolio', 'portfolio-category' => 'indie', 'orderby' => 'title', 'order' => 'ASC', 'posts_per_page'=>-1, 'ignore_sticky_posts'=>1 ); $my_query = new WP_Query($args); $q = array(); if( $my_query->have_posts() ) { while ($my_query->have_posts()) { $my_query->the_post(); $t = '<a href="'. get_permalink() .'" rel="bookmark" title="Permanent Link to '. get_the_title() .'">' . get_the_title() .'</a>'; $c = strtoupper(substr(get_the_title(),0,1)); $q[$c][] = $t; } } wp_reset_postdata(); // Restore global post data stomped by the_post(). $count = 0; foreach ($q as $key=>$values) { $count++; ?> <div class="column<?php echo $count; ?>" style="width:9%; margin-right:2%; float:left; margin-bottom:25px"> <?php echo $key; foreach ($values as $value) { ?> <div style="width:95%; padding-right:5%"> <p> <?php echo $value; ?> </p> </div> <?php } ?> </div> <?php if( 0 == $count%9 ){ ?> <div class="clear" style="clear:left"></div> <?php } } 

Вот вывод из приведенного выше кода

введите описание изображения здесь

ЧТО ТЕБЕ НЕОБХОДИМО СДЕЛАТЬ

  • Отбросьте все от оригинального ответа. Я сохраняю оригинальный ответ ради его полноты и что он может стать полезным для кого-то еще в будущем.

  • Добавьте свой стиль и стиль в соответствии с вашими потребностями

  • Внесите любые изменения в свой комплект личных потребностей

Я дал вам основу для удовлетворения ваших потребностей. Я бы ожидал, что это займет не менее 99% в достижении вашей цели. Пожалуйста, дайте мне знать о вашем прогрессе

ОРИГИНАЛЬНЫЙ ОТВЕТ

Я пошел по другому пути, что вы приняли в своих примерах. Вот что я сделал и как это работает:

ШАГ 1

@birgire сделал это сообщение некоторое время назад о расширении класса WP_Query который позволяет вам получить сообщение по первой букве. Это делается с введением нового параметра, name__like . Я использовал это для создания пользовательского запроса. Вот новый класс

 /** * Class WPSE_Query * * Add a support for the name__like parameter * * @link https://wordpress.stackexchange.com/a/136758/26350 * */ class WPSE_Query extends WP_Query { public function __construct( $args = array() ) { add_filter( 'posts_where', array( $this, 'posts_where' ), 10, 2 ); parent::__construct( $args ); } public function posts_where( $where, $qry ) { remove_filter( current_filter(), array( $this, __FUNCTION__ ) ); $name__like = $qry->get( 'name__like' ); if( ! empty( $name__like ) ) { $where .= " AND "; $where .= $GLOBALS['wpdb']->posts; $where .= ".post_name LIKE '"; $where .= esc_sql( like_escape( $name__like ) ); $where .= "%' "; } return $where; } } 

Это входит в ваши функции.

ШАГ 2

Чтобы динамически получить список всех букв алфавита, я использовал range() функций php range() и назначил ему переменную.

 $range = range('A','Z'); 

ШАГ 3

Затем я передал свою переменную через цикл foreach чтобы получить все отдельные буквы, которые передаются в пользовательский запрос

 foreach ($range as $r){ } 

ШАГ 4

Вместо использования WP_Query я теперь использовал новый класс, который был создан в STEP 1 под названием WPSE_Query . Я также использовал новый параметр name__like и передал ему каждую букву алфавита, чтобы получить мои сообщения соответственно

 $args = array( 'post_type' => 'portfolio', 'orderby' => 'title', 'order' => 'ASC', 'posts_per_page' => -1, 'portfolio-category' => 'indie', 'ignore_sticky_posts' => 1, 'name__like' => $r ); // The Query $the_query = new WPSE_Query( $args ); 

Причина, по которой я столкнулся с этой проблемой, – дать мне больше контроля над HTML

ШАГ 5

Я ввел счетчик контроля, когда введены элементы HTML и как они продвинуты

ШАГ 6

Чтобы создавать и стилизовать столбцы, я использовал следующую строку. Примечание. Я использовал встроенные стили для демонстрации вывода. Вы должны добавить эти стили в свою таблицу стилей, а не сохранять их как встроенные стили

 <div class="column<?php echo $count; ?>" style="width:9%; margin-right:2%; float:left; margin-bottom:25px"> 

Как вы можете видеть, я использовал счетчик здесь, чтобы продвинуть мой класс столбца по одному на каждой итерации

ШАГ 7

Наконец, чтобы остановить какой-то сумасшедший вывод, вам нужно очистить поплавок после каждого девятого сообщения. С использованием счетчика и оператора разделения по модулю после каждого девятого сообщения вставлен четкий поплавок

 if( 0 == $count%9 ){ ?> <div class="clear" style="clear:left"></div> <?php } 

ВСЕ ВМЕСТЕ СЕЙЧАС!

Это окончательный код:

 <?php $count = 0; $range = range('A','Z'); foreach ($range as $r){ $count++; ?> <div class="column<?php echo $count; ?>" style="width:9%; margin-right:2%; float:left; margin-bottom:25px"> <?php echo '<p>' .$r . '</p>'; // $args for the custom query $args = array( 'post_type' => 'portfolio', 'orderby' => 'title', 'order' => 'ASC', 'posts_per_page' => -1, 'portfolio-category' => 'indie', 'ignore_sticky_posts' => 1, 'name__like' => $r ); // The Query $the_query = new WPSE_Query( $args ); // The Loop if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); ?> <div style="width:95%; padding-right:5%"> <p> <?php the_title(); ?> </p> </div> <?php } } wp_reset_postdata(); ?> </div> <?php if( 0 == $count%9 ){ ?> <div class="clear" style="clear:left"></div> <?php } } ?> 

Все, что вам нужно сделать, это настроить и добавить всю соответствующую HTML-надпись

Вот вывод из приведенного выше кода

введите описание изображения здесь

и вот структура HTML

введите описание изображения здесь