29 Сентябрь 2011

Слайдеры контента для блога на WordPress

Верстка для WordPress часть 7

Приветствую вас, уважаемый читатель!

Данной публикацией я продолжаю курс верстки под WordPress. Давайте усложним решаемые задачи подключением модного слайдера контента на главной странице блока.

Постановка задачи:

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

Видеоурок:

Для решения поставленной задачи я выбрал два слайдера на jQuery: первый и второй.

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

Заодно поделюсь двумя найденными подборками модных слайдеров: первая и вторая.

Приступаем к решению поставленной задачи

В файл index.php темы mytheme, которую я создал и подключил в пятом видеуороке, развернется основное действо (внимательный читатель заметит, что в пятом видеуроке новая тема называлась moya-tema, но какая собственно разница).

Прямо под надпись <h1>Новый блог</h1> вставляем код, который будет проверять на какой странице мы находимся. Если мы на главной странице, то выполнится код со вставкой слайдеров, иначе — извините, не положено.

<?$pageNumber = (get_query_var('paged')) ? get_query_var('paged') : 1;  ?>
<?if(is_front_page() & $pageNumber == "1") : ?>

Под оператором if можно располагать код вызова слайдеров.

Поскольку в задаче говорилось о строго определенном количестве постов из заданной категории, мы воспользуемся функцией get_posts, которая позволяет массивом настроек $args передать все требуемые ограничения, накладываемые на посты для слайдеров. Полюбуйтесь на описание функции get_posts, она позволяет определить категорию, количество постов и кучу других дополнительных параметров выборки.

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

<?
$args = array('numberposts' => 4);
$myposts = get_posts($args);
foreach($myposts as $post) :	setup_postdata($post);
the_title();
endforeach;
?>

А уж дальше дело техники — осталось подставить в нужные места слайдеров соответствующие WordPress-функции:

  • Вывести название поста — the_title().
  • Идентификатор поста — the_ID().
  • Ссылка на пост — the_permalink().

Однако, в процессе расстановки знакомых нам функций движка, обязательно возникнет два вопроса:

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

Отвечу на эти вопросы последовательно.

Как получить адрес первой картинки поста

Для получения первой картинки необходимо воспользоваться новой функцией, которой мы расширим стандартный функционал WordPress. Вот она:

function catch_that_image() 
{
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	if(empty($first_img)) {
		$first_img = "/img/default.jpg"; // Ссылка на изображение-заглушку, если в посте оно не найдено
	}
	return $first_img;
}

Функция найдет первую картинку в посту и вернет ее адрес. Если картинки в посте нет — будет использована картинка по умолчанию /img/default.jpg

Видите регулярное выражение? Хотите познакомиться с ними поближе — тогда вам сюда.

Как, вы до сих пор не знаете, куда вставлять новые функции? Ай-ай-ай, что же вы меня так расстраиваете. Все просто: необходимо в папке с нашей темой (mytheme) создать файл functions.php, который и будет хранить функции, расширяющие стандартный функционал.

Теперь в месте, где нужно получить адрес первой картинки поста, необходимо вставить следующий код:

<?=catch_that_image();?>

Как ограничить количество слов в WordPress

На этот вопрос существует ответ в виде дополнительной функции (вставлять все туда же, в functions.php нашей темы):

function do_excerpt($string, $word_limit) {
	$words = explode(' ', $string, ($word_limit + 1));
	if (count($words) > $word_limit)
	array_pop($words);
	echo implode(' ', $words).' ...';
}

И вторая часть ответа — код для вызова ограниченного количества слов из поста:

<?do_excerpt(get_the_excerpt(), 10);?>

Вы и сами, наверное, догадались, что цифра «10» — ничто иное, как количество выводимых функцией do_excerpt слов.

Как вы могли убедиться, в данной публикации я применил короткие PHP-теги. Что это такое и как их включить я писал здесь.

С уважением, Андрей Морковин.