WordPress — вывод постов
Как вывести посты в два столбца?
Сегодня хочу рассказать и показать вам вывод постов Worpress в два столбца. Такая необходимость возникает у людей, которые ведут информационные блоги и добавляют новости в свой блог десятками. А иногда некоторым блоггерам просто нравится такой вывод постов, а в шаблоне это не предусмотрено.
Представленный код, разбивает страницу вертикально на два столбца, а посты выводятся следующим образом. Если у вас выводится 7 постов вообще, то 4 первых поста выводятся в первом столбце, а 3 следующих во втором.
Суть этого php-кода, добавленного к стандартному коду поста, заключается в том, чтобы в определенных местах вставить html-теги, с помощью которых через CSS оформить посты в столбцы.
Конечно существуют и другие способы чтоб сделать вывод постов wordpress в два столбца, все зависит от того какую цель вы преследуете. Можно вывод постов делать вертикально, как в этом случае, а можно горизонтально. Например в строке по два поста.
А также, обязательно!
Дописываем в css файле вашей темы стили для наших двух колонок.
А вот и сам код для главной страницы вывода постов:
<?php get_header(); ?> <?php if (have_posts()) { ?> <?php $i = 0; ?> <?php $per_column = ceil($posts_per_page / 2); ?> <?php if ($wp_query->post_count <= $posts_per_page) $per_column = ceil($wp_query->post_count / 2); ?> <div class="column"> <?php while (have_posts()) { the_post(); $i++; ?> <div class="post"> <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2> <div class="date"><?php the_time('d.m.Y') ?></div> <div class="entry"> <?php the_excerpt(); ?> </div> </div><!-- .post --> <?php if ($i == $per_column) { ?> </div><!-- .column --> <div class="column right"> <?php } ?> <?php } ?> </div><!-- .column --> <div class="clear"></div> <div class="navigation"> <div class="alignleft"><?php previous_posts_link('Следующие записи') ?></div> <div class="alignright"><?php next_posts_link('Предыдущие записи') ?></div> </div> <?php } ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
А это стили css, которые надо дописать в ваш файл стилей:
.column { float: left; width: 48%; } .column.right { float: right; } .clear { clear: both; height: 0; overflow: hidden; }
Вот и все.
Моя рекомендация. Если вы плохо разбираетесь с кодами wordpress, то лучше самому этим не заниматься. Обратитесь к специалистам и они вам сделают это профессионально и без каких-либо проблем для вашего блога.
Удачи вам и процветания!
- Установка WordPress на хостинг - 11.05.2017
- Хостинг для WordPress - 26.04.2017
- 7 советов как ускорить WordPress - 18.01.2017
- WordPress плагины вывода популярных постов - 25.07.2016
- Готовим ваш сайт для мобильных устройств? - 29.06.2016
Как преодолеть технические сложности
|
Javascript + jQuery
|
Профессиональный сайт за один день.
|
Спасибо, а то только на сателиты однотипные попадал
Очень нужная и дельная информация. Но, к сожалению, у меня пока так и не получилось совместить мой вывод постов
(
<a href="» rel=»bookmark»>
) с Вашим решением.:( А мне как раз и нужно 2 выводимых поста разместить не вертикально друг за другом, а горизонтально. Не подскажите, как можно редактировать приведённый мною код, сильно его не меняя? Буду очень благодарна за помощь.
Ой, а у меня всё получилось! И всего-то надо было класс перенести.
Но всё-равно спасибо за полезный материал — никогда не знаешь, что и где пригодится.