Вывод контента в 2 колонки wordpress

Приветствую. Хотелось бы поделиться одной полезностью, а точнее – как сделать вывод постов на главной в 2 колонки.

По сути это всё дело можно легко реализовать на любом шаблоне, даже практически не зная css и html. Это всё делается с помощью кода, который вы правите в свой шаблон. Это не моя доработка, сам где-то надыбал в сети и не помню где, но попробовал так сказать на себе и сделал вывод что это работает.

Собственно этот код нужно добавить в index.php или же в файл, который отвечает за вывод статей в категориях. В общем смотрите сами.

Меняем код <?php if (have_posts()) : while (have_posts()) : the_post(); ?> и до <?php endif; ?> на слегка модифицированный:
<?php $col = 1; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ($col == 1) echo “<div class=\”row\”>”; ?>
<div id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Постоянная ссылка <?php the_title(); ?>”><?php the_title(); ?></a></h2><p><small><span style=”float: left;”><?php the_time(‘j F, Y’) ?><?php // the_author() ?></span> <span style=”float: right;”>Рубрика: <?php the_category(‘, ‘) ?> &nbsp; <?php wp_link_pages(array(‘before’ => ”, ‘after’ => ”, ‘next_or_number’ => ‘number’)); ?>  <?php edit_post_link(‘Редактировать’, ”, ”); ?></span></small>
<br clear=”all” /><div>
<?php the_content(‘Читать дальше »’); ?>
</div>

 <?php comments_popup_link(‘Нет комментариев »’, ‘Один комментарий »’, ‘Комментариев: %’); ?></p>
</div>
<?php if ($col == 1) echo “</div>”; (($col==1) ? $col=2 : $col=1); ?>
<?php endwhile; else : ?>
<h2>Не найдено</h2>
<p>Здесь ничего нет, попробуйте поискать:</p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?>
<?php endif; ?>
И в добавок нужно подредактировать ваш css файл, добавив в него следующие строчки:
.col1{width: 200px; float: left; padding: 0 10px;}
.col2{width: 200px; float: right;  padding: 0 10px;}
По сути это всё, но 2 колонки будут не совсем в стиле вашей темы, поэтому нужно отдельно в css поправить каждый .col на предмет цвета и размера шрифта и ссылок, на и возможно ширины столбцов. В данном коде ширина 200 каждого столбца, так что подбирайте, доводите эти столбцы под ваш шаб, а это не так уж и сложно)
С уважением, фрилансер-вебмастер Александр Шульгинов

Подпишитесь на рассылку

Чтобы быть в курсе обновлений блога, новостей по вордпресс и сайтостроительству

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заполните поле
Заполните поле
Пожалуйста, введите корректный адрес email.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Обо мне

Работаю с сайтами с 2010 года.
Более 500 выполненных проектов
Специализируюсь преимущественно на сайтах-визитках, блогах и небольших интернет магазинах.
Подробнее

Внимание! Получи бесплатно видеокурс!

Хостинг ХостиЯ


Меню