Часто встречал на форумах вопросы по поводу изменения структуры постов, точнее, вывода в две колонки или больше. В этой статье рассмотрим пару практических примеров реализации двухколоночного вывода статей. Сейчас можно найти много тем, которые уже изначально имеют построение в двухколоночном отображении. Это хорошо на начальном этапе когда вы только начинаете выбирать себе тему, но что делать если тема уже давно выбрана и оптимизирована под ваши нужды. Остается самостоятельная работа как раз этим сейчас и займемся.
Есть несколько решений, одно универсальное, а второе требует большего вмешательства и редактирование файлов. Тут пригодились бы знания в каскадной таблице 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
Спасибо за информация, очень долго ее искала. Код сработал.
Не за что.
Отлично решение. Большое спасибо! Но возникла проблема, как вывести в двух местах одновременно (на главной, категории, а лучше ещё и в поиске)?
Пробовал:
if( is_category() and is_home() ) :и
if( is_category() && is_home() ) :не помогло 🙁
Правда, решение очень хорошее, а главное — простое. В статье обратите внимание на заголовок «Без условия для всех страниц». Он добавит класс постам во всех страницах (index.php, sidebar.php, search.php). Если я правильно вас понял. Не за что)
Для всех не вариант, он делает и для статьи тогда. Но я уже оставлял вторым комментариям решение)
Понял:
if( is_category() || is_home() || is_search() ) :😐 не получается. очень нужно больше 2 колонок, которые уже были в шаблоне, но не делает 3-ю... имеет ли значение, что у меня фиксированная страница? Может для 3 колонки,хотя бы, места не хватает? хотя, визуально она влезет 😡 но разве это докажешь программе... 😡 как быть?
Фиксированная ширина страницы, вы это имеете ввиду? Нет, особой роли это не играет, важнее ширина колонок. И если изначально вашей теме уже был создан двухколоночный вывод статей, то думаю проще его подредактировать. А если хотите использовать именно этот способ, то скорей всего у вас идет разногласие в стилях (нужно там искать проблему) Попробуйте уменьшить ширину постов не подключая функции из статьи...
Да,да, это я и имела ввиду. Сократила ширину колонок, 3-я поместилась((: Подскажите, пожалуйста, у меня по бокам большие отступы, их можно уменьшить в css или где-то еще? Думаю, если растянуть рабочую зону в обе стороны, то туда еще пара колонк влезет 💡
Конечно можно, уменьшите внешние отступы (margin) колонок, и если нужно уменьшите внутренние отступы (padding) главного блока, в котором находятся посты.
Огромное спасибо за помощь!
Не за что)
А как настроить вывод постов как у вас в категориях?
wordsmall.ru/category/bez-plagina
Чтобы миниатюра была слева и рядом заголовок с текстом.
А то в моей теме Islemag какие-то слоны по умолчанию, а не посты.
Если в теме не предусмотрена настройка вида постов, обычно бывает несколько вариантов, то вручную, самостоятельно править код.
А как сделать так, чтобы на компьютере выводились в 2 или 3 колонки, а в мобильной версии сайта по умолчанию 1 колонка?
@media only screen and (max-width:400px){ .two-column-post { width: 100%; float: none; margin-left: 0%; } }Очень интересная статья. Может подскажете по категориям как оформить в две колонки?
На странице поста мне нужно вывести все кастомные категории которые принадлежат этому посту, и я их хотел бы вывести в две колонки, вот только не могу дойти к этому.
$atributes = wp_get_object_terms($post->ID, 'convenience'); if( $atributes && ! is_wp_error($atributes) ){ echo ''; foreach( $atributes as $term ){ echo ''. $term->name .''; } echo ''; }То есть вам нужно вывести все категории (их названия) относящиеся к посту. И чтоб они были в две колонки, так? Статья же не об этом. Используйте просто
float: left; width: 50%;Подскажите, а как именно на Главной странице сделать две колонки?
В статье указано
if( is_home() ) :Так долго искал такую статью. Думал вот наконец то, то что нужно. Но увы не работает. 1 способ для всех страниц и для категории и для id категории. Ошибка в синтаксисе, белый экран. На строчке: if ( $wp_query->current_post%2 == 0 ... Не знаю почему, вставлял в самый конец перед ?>
Второй способ тоже не работает. Стили всё сработало, но всё в одну колонку почему-то
Попробуйте снова первый вариант. После обновления сайта, появились лишние символы. Спасибо за сигнал.
Подскажите пожалуйста, как разместить текст рядом с названием страницы? То есть название как-бы в 1 колонке, а текст идет во второй, но не ниже
Просто используйте свойство float: left/right