Вывод новостей на Wordpress’е в несколько колонок

AWM    CMS     CMS, Wordpress

Вот и обещанный мой пост. Сегодня пойдет речь о движке Wordpress, а точнее как выводить новости в несколько колонок, а так же автоматически обрезать длинные заголовки постов. На самом деле тут ничего сложного нет, нужно будет вставить всего в пару мест код который я приведу ниже. Скорее всего вам придется затратить больше времени не на саму реализацию колоночного вывода, а на правку css стилей, что отображение стало так как надо. Приминение данного метода я использую при создании например видео тьюбов.

Итак начнемссс… Первое что нужно, это определиться в какие файлы шаблона необходимо вставлять код что бы вывод был в несколько колонок. Привожу их названия, самое главное это конечно же индексный файл, – Основной шаблон (index.php). Второй файл, это файл вывода архива записей, – Архивы (archive.php), и последний это Результаты поиска (search.php). Последние из двух файлов могут отсутствовать в теме, это не страшно. Если же вы не хотите в этих файлах использовать колоночный вывод, просто не трогайте их.

Второе что необходимо будет сделать, это найти цикл вывода постов, начинается он так:

1
2

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

Сразу выше этого кода необходимо вставить такой код:

1

<?php $col = 0; ?>

В итоге у нас получится так:

1
2
3

<?php $col = 0; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Далее нам нужно будет найти первый div внутри этого цикла, обычно он выводится таким макаром:

1

<div class="post" id="post-<?php the_ID(); ?>">

И добавить в него стиль, если необходимо 2 колонки, то вставляем:

1

style="width:48%; float:left;"

Если необходимо 3 колонки, вставляем такой стиль:

1

style="width:30%; float:left;"

Итог что получилось, для 2 колонок:

1

<div class="post" id="post-<?php the_ID(); ?>" style="width:48%; float:left;">

Для 3:

1

<div class="post" id="post-<?php the_ID(); ?>" style="width:30%; float:left;">

И последнее что осталось сделать, это перед закрытием цикла

1

<?php endwhile; ?>

добавить такой код для 2 колонок:

1
2
3
4
5
6
7

<?php $col++; 
if ($col == 1) echo "<div style=\"width: 15px; float:left;\">&nbsp;</div>"; 
if ($col == 2) {
	echo "<div style=\"clear: left; padding-top: 10px; overflow: hidden; height: 0;\"></div>";
	$col=0;
}
?>

А для 3 колонок:

1
2
3
4
5
6
7

<?php $col++; 
if ($col == 1 OR $col == 2) echo "<div style=\"width: 15px; float:left;\">&nbsp;</div>"; 
if ($col == 3) {
	echo "<div style=\"clear: left; padding-top: 10px; overflow: hidden; height: 0;\"></div>";
	$col=0;
}
?>

В итоге для 2 колонок получится так:

1
2
3
4
5
6
7
8

<?php $col++; 
if ($col == 1) echo "<div style=\"width: 15px; float:left;\">&nbsp;</div>"; 
if ($col == 2) {
	echo "<div style=\"clear: left; padding-top: 10px; overflow: hidden; height: 0;\"></div>";
	$col=0;
}
?>
<?php endwhile; ?>

А для 3 колонок так:

1
2
3
4
5
6
7
8

<?php $col++; 
if ($col == 1 OR $col == 2) echo "<div style=\"width: 15px; float:left;\">&nbsp;</div>"; 
if ($col == 3) {
	echo "<div style=\"clear: left; padding-top: 10px; overflow: hidden; height: 0;\"></div>";
	$col=0;
}
?>
<?php endwhile; ?>

Чуть не забыл, еще вставить после цикла

1

<?php endwhile; ?>

на всякий пожарный такой div

1

<div style=\"clear: left; padding-top: 10px; overflow: hidden; height: 0;\"></div>

Т.е. получим:

1
2

<?php endwhile; ?>
<div style=\"clear: left; padding-top: 10px; overflow: hidden; height: 0;\"></div>

Все, теперь осталось отредактировать css стили темы, а так же побаловаться с процентами и размерами ширины div’ов, которые мы вписывали выше.

Вот что как получилось у меня:

Наверное заметили что название 1 поста на моих скриншотах обрезается. Это реализовано то же очень просто. Необходимо вставить нижеприведенный код в самое начало файлов шаблона, где нужно обрезать заголовки (index.php, archive.php, search.php). Вот собственно и сам код:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
function crop_title($title){
   if (strlen(trim($title)) > 50)
   {
      $title = substr($title, 0, 50)."...";  
      $title = iconv('utf-8', 'windows-1251//IGNORE', $title);
      $title = iconv('windows-1251', 'utf-8', $title);
      $title = str_replace(" ...", "...", $title);
   }
return $title;
}
add_filter('the_title', 'crop_title');
?>

Этот код обрезает заголовки, количество символов которых превышает 50 символов. Если нужна другая цифра, то измените ее в коде (3 и 5 строка) на нужную вам. Вот и все. Думаю на сегодня хватит. Всех жду в комментах.

Поздравляю всех с наступлением лета!

Сохранить в:                                                        

Рейтинг записи -

 Loading ...