Создание галереи-слайдера на WordPress

Создание галереи-слайдера на WordPress

От автора: Данный урок будет логическим продолжением урока по созданию галереи за 5 минут на WordPress. В указанном уроке мы фактически лишь сделали галерею WordPress более современной и динамичной, никак не правя ее структуру. В данном уроке мы уже кардинально перепишем структуру галереи и, в результате, создадим слайдшоу, используя jQuery плагин Nivo Slider.

автор

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

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

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

Итак, скачаем jQuery плагин Nivo Slider и подключим все необходимые файлы к нашему сайту. Напомню, я произвожу подключение через файл functions.php темы WP:

wp_enqueue_style( 'my-nivoslider-css', get_template_directory_uri() . '/nivoslider/nivo-slider.css' );
wp_enqueue_style( 'my-nivoslider-default', get_template_directory_uri() . '/nivoslider/themes/default/default.css' );
wp_enqueue_style( 'my-nivoslider-bar', get_template_directory_uri() . '/nivoslider/themes/bar/bar.css' );
wp_enqueue_style( 'my-nivoslider-dark', get_template_directory_uri() . '/nivoslider/themes/dark/dark.css' );
wp_enqueue_style( 'my-nivoslider-light', get_template_directory_uri() . '/nivoslider/themes/light/light.css' );
wp_enqueue_script( 'my-nivoslider-js', get_template_directory_uri() . '/nivoslider/jquery.nivo.slider.js', array('jquery') );

Здесь мы подключаем файл стилей слайдера, js-файл плагина и четыре файла с темами оформления.

Теперь вставим галерею WordPress в запись. Как и в прошлом уроке, мы получили картинки, выстроенные плитками, т.е. получили формат галереи. Что же нам потребуется для того, чтобы получить формат слайдера? Давайте взглянем в редакторе, что представляет из себя галерея WP в режиме кода, для этого переведем редактор из визуального режима в режим текста. В результате мы увидим нечто вроде такого: . Это ничто иное, как шорткод, в котором есть параметр ids с идентификаторами картинок галереи.

Коль это шорткод, то мы вполне можем повесить на него свою функцию, которая будет генерировать необходимый вывод. Давайте так и сделаем в файле functions.php. Этой строкой мы свяжем щорткод gallery с функцией my_gallery:

add_shortcode( 'gallery', 'my_gallery' );

Ну и код самой функции:

function my_gallery($atts, $text = ''){
	$img_src = explode(',', $atts['ids']);
	$theme = isset($atts['theme']) ? $atts['theme'] : 'default';

	$html = '<div class="slider-wrapper theme-' . $theme . '">';
		$html .= '<div id="slider" class="nivoSlider">';
		foreach($img_src as $img){
			$html .= wp_get_attachment_image( $img, 'full' );
		}
		$html .= '</div>';
		$html .= '<div id="htmlcaption" class="nivo-html-caption"></div>';
	$html .= '</div>';
	return $html;
}

Данная функция по ID картинки получает ее HTML-код и складывает в переменную $html. В эту же переменную складывает вся необходимая верстка. Кроме атрибута ids шорткода, мы можем добавить дополнительные атрибуты, например атрибут theme, в котором пользователь может указать необходимую тему оформления для слайдера. Для этого заменим шорткод таким:

Ну и последним штрих: немного подкорректируем плагин Nivo Slider под себя, чтобы он выводил описания картинок. Для этого откроем файл jquery.nivo.slider.js, найдем строки 95-96:

if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
	var title = vars.currentImage.attr('title');

И заменим их на следующие:

if(vars.currentImage.attr('alt') != '' && vars.currentImage.attr('alt') != undefined){
	var title = vars.currentImage.attr('alt');

Вот, собственно, и все, задача решена. На этом наш урок завершен. Удачи и до новых встреч!

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

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

Получить

Метки: , ,

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

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

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

  1. Ярослав

    Андрей, спасибо за урок, с удовольствием изучаю wp по Вашим урокам. Момент по дополнительным настройкам интересен. И даже очень. Если Вы запишите по ним видео, то будет здорово.

  2. Олег

    Спасибо за обучение. Учусь по твоим урокам- очень познавательно и хорошо объясняешь.

  3. Ольга

    Добрый день, подскажите может где-то уже указывали, как ниво-слайдер подключить не через functions.php?

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

      Здравствуйте, Ольга. Можно в шаблоне header.php подключить стили и скрипты. Делается это при помощи функции WordPress bloginfo, которая вызывается с параметром template_url. Вызов этой функции вернет путь к активной теме и к этому пути останется дописать путь к файлу стилей или скрипту. Если сами не разберетесь, тогда создайте тему на форуме, показав, как именно пытаетесь сделать и что не получается.
      Кстати, а чем не устраивает стандартное подключение через файл функций?

  4. alex

    Большое спасибо. А как можно сделать вывод галереи в стедующем виде.
    снизу располагаются небольшие превьшки галереи в одну строку с элементами прокрутки по бокам. Количество превью определяется текущей шириной экрана (на разных устройствах разная). Сверху оторажается !фиксированной высоты! (что бы не было прыжков на изображений разной высоты!) выбранное изображение из превью в стиле темы.

    Я сейчас для этого пытаюсь использовать плагин Photospace Gallery но он не перенимает стили от текущей темы (Tempera) и прыгает по высоте!
    Спасибо.

    посмотреть как работает плагин можно здесь
    selftrips.ru/2015/08/14/21876

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

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

      • alex

        Что то форум не очень активный, не то что ответов, просмотров нет!(((

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

          Вполне возможно, что ответа на вопрос и не знают, либо вопрос слишком объемен.

  5. dimarik10

    а как сделать картинки ссылками?

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

      Обернуть в тег ссылки.

      • dimarik10

        обернул и ничего не происходит, а точнее нажал на картинку выводит ошибка сервера а мне нужно при нажатии чтоб попадал в статью где я вставил галерею

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

          Значит где-то ошиблись, поскольку у меня все получилось только что. Смотрите исходный код, поскольку хоть что-то но должно измениться.
          Относительно этого — «при нажатии чтоб попадал в статью где я вставил галерею» — не понял совсем… просматривая галерею, мы уже находимся в статье, к которой галерея принадлежит.
          Если хотите решить проблему, тогда давайте все же перенесем общение на наш форум. Создайте там тему, выложите Ваш код, в который пытаетесь добавить ссылку — я посмотрю.

  6. dimarik10

    я просто не правильно вставил ссылку, затупил.
    я создал страницу Галлерея, по вашему курсу все получилось.

    Потом я решил вывести контент страницы Галлерея на главную страницу. Все отлично отображается
    вот код как я вывел:
    Скриншот : http://pastenow.ru/Upload/Paste/I5AA.jpg

    потом я решил сделать чтоб картинки были ссылками, при клике попадаешь на эту же страницу Галлерея, что то я не так сделал просто добавив ссылку, вот код:
    Скриншот : http://pastenow.ru/Upload/Paste/I5AK.jpg

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

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

      • dimarik10

        хорошо создам тему в форуме, меня заинтересовала как сделать ссылку, или я функцию не знаю или я не правильно вписал код.

      • dimarik10

        Получилось, нужно было обернуть тэг ссылки в цикле:
        Скриншот:http://pastenow.ru/Upload/Paste/IBRR.jpg
        И тогда я попадаю на страницу Галлерея как было задумано
        А в общем урок мне нравится — это то что я искал долгое время, мне хотелось просто ссылки реализовать.
        А чтоб каждая картинка выводила на ту или иную ссылку, проще вывести как слайдер на главной.
        а вот мне интересно как обернуть ссылку в самой функции? то что в уроке писали в файл functions.php? я пока php поверхностно знаю, если сможете подсказать, буду очень признателен!
        Спасибо вам за уроки!

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

          Вот не хотите Вы на форум идти, а обещали ведь :)
          В функции это сделать несложно, достаточно дописать пару строк кода (я их прокомментировал) — скрин.

          • dimarik10

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

  7. роман

    я делаю сайт на wordpress и вот какая проблема сделал слайдер вставил в файл function.php все подключил сам слайдер работает, но когда я пытаюсь сделать картинки ссылками, то 1 слайд показывает, а остальные просто пропадают. Подскажите в чём проблема за ранее благодарю.
    вот сайт rieltorrso.ru

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

      1. Возможно Вы опечатались, но файл должен называться не function.php, а functions.php
      2. Ни одной ссылки в слайдере не увидел.
      3. Чтобы подсказать, где ошибка в коде, — нужно для начала увидеть код.
      4. Чуть выше в комментариях решался аналогичный вопрос с оборачиванием слайдов в ссылки, посмотрите обсуждением там. Если все же не получится, тогда создайте тему на нашем форуме и покажите проблемный код.

  8. Сергей

    Здравствуйте. Подскажите как можно конкретизировать получение шорткода gallery, чтобы на разных страницах сайта использовать разные галереи и jquare слайдеры.

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

Ваш 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