! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: Контент - кодингS  реплики: 11 комментариев
 
Запросто с WordPress - студия занимательная МИХАЛИКА

Как на сайте сделать вывод статей в две колонки…

Многие начинающие web-мастера, создав свой первый сайт, задаются вопросом: а как бы теперь сделать вывод статей в блоге в две или три колонки – на главной странице или категориях. Ведь бывает же так, когда тема выбрана, есть уже масса наработок, но вдруг мы понимаем, что необходим двухколоночный вывод записей. В самом деле, не искать же себе другой шаблон… теряя время и труд. Нет…

 

…мы поступим проще, сами решим эту задачу, да и опыта поднаберёмся.


Выводим статьи в две колонки с картинкой

 

 

 

И сегодня мы как раз и узнаем, как запросто реализовать двухколоночный вывод статей на сайте.

 

 

Не стану много разглагольствовать, для этого у меня есть и иные статьи, WordPress и его настройка — но приступлю непосредственно к делу разъяснения.
Я покажу пару решений вывода двух колонок статей, одно простенькое, а другое несколько сложнее — тем, что нужно будет редактировать файл CSS. А поэтому пригодятся, хотя бы базовые знания HTML … пройдите, если сомневаетесь, по ссылке и ознакомьтесь, с понятиями CSS — HTML, CSS, PHP — отличия

 

 

Приступим…

 

 

 

Простой способ вывода статей в две колонки в разделе категории

 

 

 

…он замечателен тем, что всё достаточно просто. С помощью добавления к записи еще одного класса, через фильтр… мы и решим нашу задачу. Просто открывайте файл вашей темы functions.php и перед знаком ?> прописывайте следующий код.

 

 

add_filter('post_class','category_two_column_classes');
function category_two_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
endif;
return $classes;
}

 

 

 

Внимание! в этой функции выполняется условие — if( is_category() ) : которое обусловлено тем, что класс будет добавлен лишь в разделе «категории». Это значит на других страницах (index.php, search.php и т.д.) двухколоночный вывод выполняться не будет. Но можно сделать и иначе, к примеру, поправить функцию и заменить условия вывода – только на главной.
Нам останется только поменять строки…

 

 

 

if( is_category() ) :

 

на…

 

if( is_home() ) :

 

 

Но если вам захочется вывести колонки только в определённой категории, то
…в скобках необходимо прописать ID категории… (номер)

 

 

if( is_category('2') ) :

 

 

Рекомендую посмотреть пост, в нём я подробнее рассказываю о правильном варианте добавления div классов к показанным выше кодам: тем самым вы заставите свой сайт геометрически правильно отрабатывать колоночное решение статей на разных расширениях экранов.

 

 

 

 

Безусловный вывод колонками на всех страницах

 

 

 

 

add_filter('post_class','category_two_column_classes');
function category_two_column_classes( $classes ) {
global $wp_query;
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
return $classes;
}

 

 

 

А теперь правим файл стилей style.css – добавляем этот код куда-нить в самый конец документа.

 

 

 

.two-column-post { width: 47%; float: left; margin-left: 5.9%; }
.two-column-post-left { clear: left; margin-left: 0; }

 

 

 

ГДЕ … width: 47%; ширина (процентная) самих колонок. Здесь можно экспериментировать.

 

 

 

 

Безусловный вывод колонками на всех страницах — В ТРИ КОЛОНКИ

 

 

 

 

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;
}

 

 

Что забавно, эта функция легко изменяема. Достаточно поменять оперативное число (оператор) и вывод в несколько колонок будет заказан в функции…
Ну и вот примерные стили CSS

 

 

.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>

 

 

 

И итог: в файл 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:15px 0;
}

 

 

Но, после этой нашей работы, следует сказать: все эти способы только принципиальные решения задачи вывода колонок, и новичку будут полезны только в плане знакомства с машинкой WordPress и изучения кода, но !! конечно же, проще и правильнее просто подобрать нужный вам шаблон.

 

 

 

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

 

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 


mihalica.ru

 

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
ещё статьи по теме:

меточная навигация:


Комментарии © 11 к статье: Как на сайте сделать вывод статей в две колонки…

  1. Здравствуйте! А у Вас на том примерном сайте работает вывод двух колонок и во всех архивах: в рубриках и метках! Мне бы сделать только в метках, возможно ли это? и как это сделать? Подскажете…

    Ответить - Сергей

    • Привет, Сергей!
      Да, возможно реализовать такую задачу, чтобы только в метках делилось…
      Если Вы используете 1-й вариант кода для вывода колонок, то всё достаточно просто отрегулировать условиями «!» или, к примеру, для более тонко-настраемого вывода на отдельных страничках, просто повторите приведённый в статье пример кода для вывода if( is_tag() ): архива меток.
      Почитайте и ЭТУ статейку относительно CSS: полезно!

      Ответить - Михаил

  2. Добрый день. Как убрать описание статей в рубриках, чтобы одни названия статей в ряд были?

    Ответить - Иван

    • Здравствуйте, Иван!
      …я не совсем понял вопрос, а точнее совсем не понял.
      Вы имеете в виду раздел категорий? и… чтобы без анонсов — только одни имена статей… (активные Title — ссылкой)??

      (Вы, вероятно, не читали правила комментирования: ссылки допускаются только на авторский сайт, но НЕ ИГРОВЫЕ БАНЧИШКИ и т.п.)

      Ответить - Михаил

  3. да именно в категориях названия статей

    Ответить - Иван

    • Вариантов весьма много, — как говорится, смотря по требованиям админа и возможностям шаблона.
      Как вариант, обратите внимание на функцию

      <?php the_content('');?>

      …о теге more не забывайте!
      А дальше работайте с условными тегами: if (is_category() /т.е с условиями вывода контента — так, как вам нужно/
      …либо как вариант: пробуйте <? the_excerpt();?>
      Или как, например, у меня на страничке архива сайта.
      …если подробнее пояснять — статья получится…
      P|S
      …если хотите — подождите, через пару деньков статейку напишу.

      Ответить - Михаил

  4. К теме комментатора, который спрашивал о настройках вариантов вывода контента на страничках рубрик:
    …вот из этой статьи можно узнать как вывести на страничках категорий только title записи.

    Ответить - Михаил

  5. Мои соображения такие, если представляешь код, то его нужно доводить до конца.
    Если Вы тестировали код на примере сайта, где Ваша ссылка переводит не например сайта, а на другой пост, почему, мне не понятно
    И еще, а как будет выглядеть блок пагинации, где он будет.
    Если страница будет располагать двумя блоками постов, то в низу, а вот если новый пост добавлен (Новый — он нечетный), то блок пагинации займет другое свободное место слева от него.
    Если не так, то поправьте, и каким методом это исправить, Ваше предложение.
    У меня есть выход из этой ситуации, что Вы предложите начинающим, а не в выборе подобного шаблона

    Ответить - Анатолий

    • Здравствуйте Анатолий!
      Вы верно заметили: в этой статье решение неполное… и это справедливо, ибо построение варианта двух колонок на обычном шаблоне, дело тонкое и кропотливое: одним постом (эликсиром) не отделаться.
      В этой статье показан пример (варианты) html и условия php для организации вывода двух колонок — принцип. CSS и описание всего остального в тексте следующей статьи:
      Даю линк повторно варианте адаптивного двухколоночного вывода статей — так же в статье «по ссылке» есть переходы на иные полезные посты, а в частности на рабочий сайт двухколоночного варианта… можно посмотреть как всё это чудо о двух колонок замечательно работает! (ссылка есть также в описании шаблонов)

      то блок пагинации займет другое свободное место слева от него.

      правильно! и это логично… и, как мне думается, новичку нелишне будет понять как это работает и почему так случается (поэтому и переходы на иные статьи)
      И:

      Если не так, то поправьте, и каким методом это исправить, Ваше предложение.
      У меня есть выход из этой ситуации, что Вы предложите начинающим, а не в выборе подобного шаблона

      Самый простой способ: между циклами (have_posts())… и кодом пагинации (в html файла post.php или index.php (у кого как) добавить разделитель (тогда блок пагинации будет там, где нужно /css подобного не решить/), например так: <hr id="a"> — где идентификатор обыграть уже в css (color).

      Вообще, вариации разные, к примеру, возможно организовать Дв.Кол напрямую в index.php — возможно же, кому-то так будет проще, но — необходимо хотя бы мало-мальски представлять принцип и логику WordPress в связке с блогом/сайтом.!!

      …а не в выборе подобного шаблона

      Я считаю, что правильнее запускать сайт на качественном шаблоне (а учиться на черновиках), ну, если относиться к своему проекту серьёзно! — иначе правка займёт бесконечно времени!! (возможно, неправ).

      PS|
      И к тому же, нормальный новичок всегда — всегда !! может задать вопросы в комментариях (к примеру, так как сделали Вы), на которые автор ОБЯЗАТЕЛЬНО даст ответ — мы все когда-то были молодыми.

      PS — 2|
      Мне не ясно, в чём Ваша притенения ко мне?? в том, что наша студия предлагает продукты..? Но в таком случае можно придраться к любой хлебной лавке и вместо «неё» выпекать пышки лично…
      А новичкам (которые не хотят учится) — любителям халявы, которые на готовое решение не говорят даже «спасибо», не знаю что и посоветовать…

      Спасибо за комментарий! (в общем, Ваше замечание дельное) — спрашивайте, коли что…

      Ответить - Михаил

  6. Спасибо, Ваш ответ на мой вопрос исчерпан.
    Всего хорошего и с прошедшими праздниками.

    Ответить - Анатолий

    • Взаимно, конечно же…

      Ответить - Михаил

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Внимание! Обязательные поля помечены *

Яндекс.Метрика