Часто встречал на форумах вопросы по поводу изменения структуры постов, точнее, вывода в две колонки или больше. В этой статье рассмотрим пару практических примеров реализации двухколоночного вывода статей. Сейчас можно найти много тем, которые уже изначально имеют построение в двухколоночном отображении. Это хорошо на начальном этапе когда вы только начинаете выбирать себе тему, но что делать если тема уже давно выбрана и оптимизирована под ваши нужды. Остается самостоятельная работа как раз этим сейчас и займемся.
Есть несколько решений, одно универсальное, а второе требует большего вмешательства и редактирование файлов. Тут пригодились бы знания в каскадной таблице CSS хотя бы базовые для мелких исправлений.
Универсальный способ
Этот вариант вывода постов в две колонки осуществляется с помощью добавления к записи еще одного класса через фильтр. На деле получается очень просто вставить, сохранить и смотреть результат. Откройте файл functions.php и в конце перед знаком ?>
вставляем следующий код:
Для раздела «категории»
add_filter('post_class','category_three_column_classes'); function category_three_column_classes( $classes ) { global $wp_query; if( is_category() ) : $classes[] = 'three-column-post'; if( $wp_query->current_post%2 == 0 ) $classes[] = 'column-post-left'; endif; return $classes; }
В этой функции используется условие if( is_category() ) :
которое говорит, что класс будет добавлен лишь в разделе «категории». Это значит на других страницах (index.php, search.php и т.д.) двухколоночный вывод не сработает. Можно сделать иначе, например, выводить только на главной.
Меняем…
if( is_category() ) :
на…
if( is_home() ) :
Для определенной категории
В скобках необходимо прописать ID категории
if( is_category('2') ) :
Без условия для всех страниц
add_filter('post_class','category_three_column_classes'); function category_three_column_classes( $classes ) { global $wp_query; $classes[] = 'three-column-post'; if( $wp_query->current_post%2 == 0 ) $classes[] = 'column-post-left'; return $classes; }
И последние, добавляем стили в файл style.css
.three-column-post { width: 47%; float: left; margin-left: 4.9%; } .column-post-left { clear: left; margin-left: 0; }
В три колонки
Функция легко поддается изменениям и чтобы вывести посты в три колонки или скажем в четыре, достаточно изменить число в операторе.
add_filter('post_class','category_three_column_classes'); function category_three_column_classes( $classes ) { global $wp_query; if( is_category() ) : $classes[] = 'three-column-post'; if( $wp_query->current_post%3 == 0 ) $classes[] = 'column-post-left'; endif; return $classes; }
Стили
.three-column-post { width: 30%; float: left; margin-left: 4.9%; } .column-post-left { clear: left; margin-left: 0; }
Способ №2
Если вы не ищете легких путей, то этот вариант отлично подойдет для вас. Хоть по сути тут ничего сложного нет, только может понадобиться легкая правка CSS кода. В любом файле где желаете выводить записи в две колонки замените функцию вывода поста на...
<div class="cat-colum" <?php post_class() ?> id="post-<?php the_ID(); ?>"> <div class="demopost"> <div class="img-post"> <a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post->ID, 'thumbnail'); ?></a> </div> <div class="topcatposti"> <time class="datecat"><?php the_time( get_option( 'date_format' ) ); ?></time> </div> <h2><a href="<?php the_permalink() ?>" rel="bookmark" <?php the_title(); ?>"><?php the_title(); ?></a></h2> <?php the_excerpt(); ?> <div class="postcatfooter"> <div class="fright"><a class="readmore" href="<?php the_permalink() ?>"><?php _e( 'Далее' ); ?></a></div> </div> </div>
После чего в файл style.css пропишите стили:
.demopost { background:#fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 0 10px 20px 0; padding: 15px; width: 250px; } .cat-colum{ background: none; display: inline-block; vertical-align: top; } .img-post img{ width: 100%; height: auto; max-width: 100%; } .postcatfooter{ margin-top:10px; height: 35px; } .datecat { color: #999; font-family: verdana; font-size: 15px; } .topcatposti { margin:10px 0; }
Если что-то не получается или есть вопросы спрашивайте в комментариях.
Источник: http://www.transformationpowertools.com/wordpress/posts-in-two-columns-twenty-twelve
Здравствуйте, подскажите, как сделать цитату в Вордпресс обтекаемой текстом.
День добрый. Цитата, обычно, идет под тегом
blockquote
. Значит просто этому тегу в style.css добавьтеfloat: left;
или right и задайте максимальную ширинуmax-width: 65%;
Добрый день, как можно у сгруппированного товара сделать 2-3 колонки?
Добрый. У каждого раздела сайта, в зависимости от темы, есть уникальные классы/идентификаторы. Через них можно задавать определенное оформление постам, отличающее от основных. Ну или создать шаблон для нужного раздела.
Использовал вариант с добавлением кода в functions.php — пропадает постраничная навигация внизу страницы...
Вариант устаревший, поэтому могут быть недочеты. Лучше решить эту задачу через css.