Как вывести посты в две колонки на WordPress

Разместил / Просмотров: 11 082 / комментариев 25

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

Примеры использования Вы сможете посмотреть в шаблоне Adapter.

Хочу заметить, что данный способ Вы можете применить и уже на существующих шаблонах WordPress. Правда всё это реализовать будет сложнее, нужно полностью изменить стили вывода постов. Более удобно применить этот код будет на новых шаблонах.

Теперь давайте подробнее.

Структура

Как я уже говорил выше, что будем использовать логическую структуру, то есть слева последний пост, а справа следующий (предпоследний) и так далее. Ещё есть способ вывода постов в 2 колонки, то есть слева в первой колонке выводятся последний пост под ним предпоследний, а в правой колонке выводятся 3 и 4 посты. Но этот способ тяжелее реализовать и мы его рассматривать не будем.

Стандартный код постов в WordPress

Практически во всех шаблон код вывода постов практически одинаковый, всё зависит от сложности шаблона. Давайте посмотрим код блога beloweb.ru:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!-- Начало .postBox -->

<article class="postBox">

<div class="postThumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>

<h2 class="visota"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

<div class="info"><span><?php the_time('M') ?>.<?php the_time('j') ?>.<?php the_time('Y') ?>. / <?php if(function_exists('the_views')) { the_views(); } ?> / <?php comments_popup_link('Нет комментариев', '1 комментарий ', 'Комментариев: %'); ?></span></div>

<div class="textPreview">

<?php the_excerpt(); ?>

</div>

</article>

<!-- Конец .postBox -->

<?php endwhile; ?>

Повторюсь ещё раз, что у Вас может код не много изменяться.

Ну а сейчас нам этот код нужно не много переделать.

Как это работает?

Очень просто, мы просто добавим счётчик для постов и присвоим им класс .one в стилях, таким образом к каждому нечётному посту будет присваиваться этот класс. И с помощью float:left; посты распределятся ровно в в блоке контента.

Готовый код

<?php if (have_posts()) : ?>
 <?php $one = true; ?>
 <?php while (have_posts()) : the_post(); ?>

<!-- Начало .postBox -->

<article class="postBox <?php if($first == true) echo "first" ?>" id="postBox-<?php the_ID(); ?>">

<div class="postThumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>

<h2 class="visota"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

<div class="info"><span><?php the_time('M') ?>.<?php the_time('j') ?>.<?php the_time('Y') ?>. / <?php if(function_exists('the_views')) { the_views(); } ?> / <?php comments_popup_link('Нет комментариев', '1 комментарий ', 'Комментариев: %'); ?></span></div>

<div class="textPreview">

<?php the_excerpt(); ?>

</div>

</article>

<!-- Конец .postBox -->

<?php $one = !$one; if ($one) echo '<br clear=all>'; ?>

<?php endwhile; ?>

Ну и конечно же нужно задать соответствующие стили для нашего класса поста .postBox

CSS

.postBox {
 float:left;
 width:300px;
 height:500px;
 margin-bottom:20px;
 }

.one {
 margin-right:20px;
 }

Вот и всё :-) Не так сложно как на первый взгляд. Ещё раз напомню, что пример Вы можете посмотреть в шаблоне Adapter. Если у Вас возникнут трудности, обращайтесь в комментариях, и я с радостью помогу Вам. До скорых встреч.

  • Все хорошо, только коды текстом читать не совсем удобно.
    Подключите какую-нибудь подсветку кода, пожалуйста.

  • Junk, так код вроде бы подсвечен.

  • Дмитрий

    Пытался реализовать в немного другому шаблонею Но не получилось. Может подскажите как здесь реализация?

    ID);
    $site_url = $custom[«site-url»][0]; ?>

    <a href="»><?php echo '’; echo »; the_post_thumbnail(array(200,200)); echo »; ?>
    <!—-><a href="»>Смотреть кейс >>

  • yatrav

    подскажите, как мне это реализовать вот в таком коде файла index.php

    <?php
    if(have_posts()) {
    /* Display navigation to next/previous pages when applicable */
    if ( theme_get_option('theme_' . (theme_is_home() ? 'home_' : '') . 'top_posts_navigation' ) ) {
    theme_page_navigation();}
    /* Start the Loop */
    while (have_posts()) {
    the_post();
    get_template_part('content', get_post_format());}
    /* Display navigation to next/previous pages when applicable */
    if (theme_get_option('theme_bottom_posts_navigation')) {
    theme_page_navigation();}
    } else {
    theme_404_content();

    Спасибо

  • Копируйте мой код

  • Дмитрий, попробуйте скопировать мой код и стили, которые показаны в посте.

  • Костя Андрианов

    Александр, Скопировал Ваш код, в вашу же тему — tresto. В файл index, но изменений так и не произошло. Как все же вывести посты в две колонки ?

  • Костя, что то не так сделали, возможно стили не указали.

  • Костя Андрианов

    Все так сделал. И стили и основной код поставил. Попробуйте сами на теме Tresto

  • SeeN

    Здравствуйте. Возникла проблема: http://img513.imageshack.us/img513/2429/ai2i.png Вроде вставил все по своим местам. Пожалуйста, помогите решить.

  • Возможно классы конфликтуют, может быть множество причин

  • Максим

    Похожая проблема, не как не хотят идти в 2 колонки, как будто пофиг на float:left

  • Проблема может быть в ширине блока в котором находятся блоки постов, они просто не влазят по ширине. Решение: увеличить ширину блока, или уменьшить ширину блоков постов, или же уменьшить расстояние между блоками постов. Если ничего не помогает, значит Вы допустили где то ошибку, проверяйте ещё раз.

  • Максим

    Ширина блоков в норме, перепробовал уже все:( Кстати это не ошибка что вы сортируете <?php $one = !$one; if ($one) echo '’; ?> а в Вашем шаблоне <?php $first = !$first; if ($first) echo '’; ?>

  • Максим

    далее идет $one а в шаблоне $first

  • В смысле?

  • Если бы была ошибка, код не работал

  • Максим

    Теги не вставляет дискус :(

  • Есть такое :(

  • вот, я нашел что искал))) Кто ищет тот всегда находит )))

  • Это точно! :)

  • Ильнар

    Здравствуйте,а вы не поможете мне с моим кодом на сайте(Мне нужно вывести записи на главной в три аккуратные колонки(Я уже совсем запутался какой код и куда.Одни говорят что в index,другие в function .Сайт pro-yugansk.ru

  • Ильнар, Вам лучше будет использовать готовый шаблон. Легче и быстрее. Такие вопросы в комментариях не решаются.

  • Вова Ленин

    Спасибо большое! Очень помогли. Вариант полностью рабочий.

  • Рад, что Вам пригодилось :)