WordPress — полноэкранное слайдшоу на главной странице

WordPress - полноэкранное слайдшоу на главной странице

От автора: В этом уроке мы поработаем с CMS WordPress и попробуем реализовать функционал, который часто можно видеть в премиум-темах WordPress. Речь идет о полноэкранном слайдшоу на главной странице. Выглядит этот эффект довольно симпатично: на главной странице представлен минимум данных (название сайта, меню, логотип), которые представлены на фоне привлекательных изображений, сменяющих друг друга.

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

Итак, для реализации задуманного нам, в первую очередь, необходим javascript-плагин, позволяющий реализовать полноэкранное слайдшоу. Я использую плагин Backstretch. Документацию к нему и сам плагин можно найти на Гитхабе или официальном сайте плагина.

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

Итак, для главной страницы сайта я использую шаблон home.php темы WordPress. Данный шаблон как раз и ищет WordPress для отображения главной страницы. Все, что нам нужно сделать, это подключить библиотеку jQuery, сам плагин и вызвать метод плагина, передав ему необходимые параметры. Итоговый код шаблона home.php у меня выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<?php wp_head(); ?>
</head>
<body>

<?php wp_nav_menu(array('theme_location' => 'menu', 'container' => false)); ?>

<?php $url = ''; ?>
<?php query_posts( $query_string . '&category_name=home&posts_per_page=-1&order=ASC' ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	
	<?php 
		$id = get_post_thumbnail_id();
		$url .= '"' . wp_get_attachment_url($id) . '",';
	?>

<?php endwhile; ?>
<!-- post navigation -->
<?php else: ?>
<!-- no posts found -->
<?php endif; ?>

<script>
	jQuery.backstretch([
		<?php echo $url ?>
	], {
		fade: 750,
		duration: 4000
	});
</script>
<?php wp_footer(); ?>
</body>
</html>

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

В коде шаблона мы немного корректируем стандартный цикл, выбирая посты из созданной категории Home. Из выбранных постов мы получаем url миниатюр и передаем параметром одноименному методу плагина.

Осталось подключить библиотеку jQuery и сам плагин. В моей теме все скрипты подключаются из файла functions.php. Чтобы подключить на главной странице только необходимые нам скрипты и стили, воспользуемся функцией is_front_page(), которая проверит, находимся ли мы на главной странице:

function load_style_script(){
	if( is_front_page() ){
		wp_enqueue_script('backstretch', get_template_directory_uri() . '/js/jquery.backstretch.min.js', array('jquery'));
		wp_enqueue_style('style-home', get_template_directory_uri() . '/style-home.css');
		return;
	}
	wp_enqueue_script('jquery-1', get_template_directory_uri() . '/js/jquery-1.js');
	wp_enqueue_script('jquery00', get_template_directory_uri() . '/js/jquery00.js');
	wp_enqueue_script('init0000', get_template_directory_uri() . '/js/init0000.js');
	wp_enqueue_style('style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'load_style_script');

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

На этом я с вами прощаюсь. Удачи и до новых встреч!

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (11)

  1. BECEJLbE / Данил

    Прекратите юзать плагины.
    Уроки по установке плагинов — низший уровень вашего сайта.

    Лучше показать, как просто самому сделать такое. Причём, это будет и интереснее, и поднимет сайт.

    • Андрей Кудлай

      Мне кажется вы не посмотрели урок или посмотрели его невнимательно. В уроке не используются плагины WordPress, и я не показываю, соответственно, как установить плагин WP. В уроке используется плагин jQuery — Backstretch. Писать такой с нуля — это все равно, что писать с нуля свой JS-слайдер, когда вокруг полно готовых. Да и урок бы тогда стоило назвать, скорее, Написание JS-плагина.

  2. Азат

    Уроки у Андрея Кудлая отличные, все доходчего объясняет.
    Но хочется увидеть урок или серию уроков по созданию собственного блога на PHP и MySQL. Хочется блог сделать самому, своими руками. Надеюсь получить какой нибудь ответ, спасибо.

    P.S. В идеале еще уроки по созданию форума и службы поддержки. Хотя бы простенького.

  3. Олег

    Здравствуйте!
    Есть небольшой вопрос по данной теме.
    Миниатюры на весь экран прокручиваются, однако при этом слева экрана отображаются эти три записи с миниатюрами:
    Название записи «Слайд 1″ и ниже сама миниатюра в уменьшенном виде.

    Как убрать эти дубликаты сбоку?

    • Андрей Кудлай

      Здравствуйте, Олег.
      Для того, чтобы ответить на Ваш вопрос, необходимо смотреть код Вашей темы. Без этого я могу только ответить, что их нужно убрать из кода темы. В уроке, насколько я помню, никакие записи не выводятся, только слайды.

  4. Олег

    И второй вопрос)

    с главной страницы необходимо убрать сайдбар, а вместо стандартного футера отобразить div с чем-то

    В page.php для начала вписал вот это:

    Не помогло.. это же вписал в остальных файлах, где подключается сайдбар и футер — не помогло. Если просто в файле page.php удалить подключение сайдбара и футера, то они исчезают, но со всех страниц.

    Буду очень рад, если подскажете, как справиться с этим.

    • Андрей Кудлай

      Опять же, нужно смотреть код Вашей темы. Не совсем понятно при чем здесь файл page.php. В уроке я работаю с файлом home.php, в котором не подключаю сайдбар, и он у меня не выводится. Но прекрасно выводится внутри сайта, там, где он подключается.

  5. Олег

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

    • Андрей Кудлай

      Опять же, внимательнее посмотрите урок. Используйте файл home.php для главной страницы. В этом файле не подключайте ни футер, ни сайдбар. Для всего остального сайта будет использоваться index.php, в котором будут необходимые подключения.

      • Олег

        В начале так и сделал. Добавил в каталог с темой файл home.php, в него вставил нужный код. Вордперсс его проигнорировал.
        Поэтому пользовался файлом header.php

        В админке в качестве главной страницы нужно поставить статическую ?

        • Андрей Кудлай

          WP не может проигнорировать файл home.php, поскольку это главный шаблон темы. Олег, можете создать тему на нашем форуме, сделайте все точно по уроку (с использованием шаблона home.php) и выложите архив с темой на форуме. Как я и говорил выше, чтобы помочь чем-то конкретным — нужно видеть код Вашей темы.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree