WordPress — вывод постов

Как вывести посты в два столбца?

Wordpress - вывод постовСегодня хочу рассказать и показать вам вывод постов Worpress в два столбца. Такая необходимость возникает у людей, которые ведут информационные блоги и добавляют новости в свой блог десятками. А иногда некоторым блоггерам просто нравится такой вывод постов, а в шаблоне это не предусмотрено.

Представленный код, разбивает страницу вертикально на два столбца, а посты выводятся следующим образом. Если у вас выводится 7 постов вообще, то 4 первых поста выводятся в первом столбце, а 3 следующих во втором.

Суть этого php-кода, добавленного к стандартному коду поста, заключается в том, чтобы в определенных местах вставить html-теги, с помощью которых через CSS оформить посты в столбцы.

Конечно существуют и другие способы чтоб сделать вывод постов wordpress в два столбца, все зависит от того какую цель вы преследуете. Можно вывод постов делать вертикально, как в этом случае, а можно горизонтально. Например в строке по два поста.

А также, обязательно!

Дописываем в css файле вашей темы стили для наших двух колонок.

А вот и сам код для главной страницы вывода постов:

А это стили css, которые надо дописать в ваш файл стилей:

Вот и все.

Моя рекомендация. Если вы плохо разбираетесь с кодами wordpress, то лучше самому этим не заниматься. Обратитесь к специалистам и они вам сделают это профессионально и без каких-либо проблем для вашего блога.

Удачи вам и процветания!

Похожие записи

Рейтинг: 0

Автор публикации

не в сети 4 месяца

Александр

24

Ничего так в делах не подкупает, как своевременная предоплата. $

Комментарии: 146Публикации: 102Регистрация: 05-02-2016

3 комментария

  • Дмитрий

    Спасибо, а то только на сателиты однотипные попадал

    Рейтинг: 0
  • Инга

    Очень нужная и дельная информация. Но, к сожалению, у меня пока так и не получилось совместить мой вывод постов
    (

    <a href="» rel=»bookmark»>

    ) с Вашим решением.:( А мне как раз и нужно 2 выводимых поста разместить не вертикально друг за другом, а горизонтально. Не подскажите, как можно редактировать приведённый мною код, сильно его не меняя? Буду очень благодарна за помощь.

    Рейтинг: 0
  • Инга

    Ой, а у меня всё получилось! И всего-то надо было класс перенести.
    Но всё-равно спасибо за полезный материал — никогда не знаешь, что и где пригодится.

    Рейтинг: 0

Добавить комментарий