Меню
ГлавнаяИгры

Вставка слайдера в шаблон wordpress. Как в WordPress создать свой слайдер с изображениями. Устанавливаем и настраиваем плагин слайдера и слайд шоу TheThe Image Slider WordPress

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

Установка слайдера на сайт WordPress — плагин M-vSlider

Выбор пал именно на плагин M- vSlider , очень удобен, позволяет настроить слайдер на свой вкус. Об этом поподробнее:

Для начала необходимо скачать последнюю версию плагина с официального сайта WordPress.

На экране появляется таблица, в которой будут отображаться все созданные слайдеры для сайта,код для вставки на сайт,а также их характеристики. Стандартно создан один слайдер.

Для того чтобы отредактировать существующий слайдер достаточно просто нажать на карандаш и перейти в настройки. Либо можно создать новый нажав кнопку «Add New Slider».

В настройках можно отредактировать:

  • ширину,высоту слайдера;
  • используемые эффекты при переходах
  • временные интервалы
  • можно добавить сразу же CSS свойства.
  • количество картинок, которое будет использовано

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

Можно добавить слайдер в любую статью и на любую страницу.

А если хотите добавить непосредственно в сам шаблон в шапку или еще куда, то используйте PHP код. Примерно будет выглядеть вот так

if (function_exists ("rslider")) {

Также плагин слайдера можно вывести с помощью виджета, в котором можно вывести слайд или слайд -шоу.

В целом все, теперь Вы можете с легкостью сделать слайдер для сайта на WordPress.

Благодарю за внимание, надеюсь статья была полезна для Вас.

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

И хотя существует множество плагинов слайдеров (мой текущий фаворит - ), не существует плагина для FlexSlider - слайдера, у которого есть клавиатурные сокращения и который работает со скольжением на тачскринах .

Скачать исходники

Для начала скачайте исходники с кодом, который нам вскоре понадобится.

Вот как будет выглядеть сам слайдер:

Шаг 1. Подготовка

Первое, что нам необходимо сделать, - это установить плагин . Создайте папку /envato-flex-slider/ , и в ней файл под названием ‘envato-flex-slider.php ’. Сюда мы будем добавлять всю необходимую информацию и код для нашего плагина, начиная с блока объявления плагина:

Я также хочу установить несколько констант для информации , которую я буду часто использовать в плагине. Под объявлением блока, но перед закрытием тега php , я добавляю следующую информацию:

Define("EFS_PATH", WP_PLUGIN_URL . "/" . plugin_basename(dirname(__FILE__)) . "/"); define("EFS_NAME", "Envato FlexSlider"); define ("EFS_VERSION", "1.0");

Я создал три константы: путь к плагину , имя плагина и версию плагина , которая необходима для обновлений и для того, чтобы в случае необходимости известить WordPress Plugin Directory об изменениях.

Обратите внимание, я начинаю все мои константы с "EFS ". Я буду делать то же самое с названиями функций, чтобы не создать конфликтов с другими плагинами или ядром WordPress.

Теперь, когда мы закончили с подготовкой, давайте добавим файлы и код FlexSlider.

Шаг 2. Добавление

Теперь пора добавить важную часть: javascript и CSS для FlexSlider. Мы сделаем это, используя wp_enqueue_script и wp_enqueue_style самого WordPress, чтобы избежать конфликтов. Вы можете скачать FlexSlider здесь . Нам понадобятся 2 файла: jquery.flexslider-min.js , и , в папке /theme/ .

Wp_enqueue_script("flexslider", EFS_PATH."jquery.flexslider-min.js", array("jquery")); wp_enqueue_style("flexslider_css", EFS_PATH."flexslider.css");

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

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

Следующее, что мы хотим сделать, это включить собственно JavaScript, который заставит скрипт работать. Мы сделаем это с помощью нашей собственной функции и Action -функции WordPress.

Function efs_script(){ print " "; } add_action("wp_head", "efs_script");

Важная строка здесь – add_action("wp_head", "efs_script"); , которая запустит нашу функцию efs_script() , когда будет вызвана wp_head. Наша функция просто выводит Javascript, необходимый для того, чтобы заставить FlexSlide делать свою работу.

Вы можете заметить, что я использую ‘JQuery ’ вместо традиционного ‘$ ’, который обычно используется в скриптах JQuery. Я делаю это для того, чтобы наш скрипт не конфликтовал с другими библиотеками JavaScript, например, Scriptaculous .

Наконец, просто скопируйте папку /theme/ в вашу папку /envato-flex-slider/ .

Шаг 3. Короткий код и тег шаблона

Дальше мы создадим наш шорткод (shortcode, короткий код) и тег шаблона. Шорткод позволит пользователям вставить слайдер в любую страницу или пост. Вводное руководство по шорткодам вы можете посмотреть здесь .

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

Function efs_get_slider(){ //We"ll fill this in later. } /**add the shortcode for the slider- for use in editor**/ function efs_insert_slider($atts, $content=null){ $slider= efs_get_slider(); return $slider; } add_shortcode("ef_slider", "efs_insert_slider"); /**add template tag- for use in themes**/ function efs_slider(){ print efs_get_slider(); }

Сейчас этот код выглядит достаточно просто. Для шорткода мы вызываем нашу общую функцию efs_get_slider() и возвращаем результат. Для тега шаблона мы выводим результат. Я специально упустил внедрение efs_get_slider() , поскольку мы пока не установили, откуда мы собираемся брать изображения.

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

Шаг 4. Пользовательский тип поста Slider Image

Первое, что мы сделаем, - это создадим новый файл под названием ‘slider-img-type.php ’, где будет весь наш код для пользовательского типа поста. Сначала мы сделаем некоторую подготовку, как мы делали это для плагина.

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

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

Function efs_register() { $args = array("label" => __(CPT_NAME), "singular_label" => __(CPT_SINGLE), "public" => true, "show_ui" => true, "capability_type" => "post", "hierarchical" => false, "rewrite" => true, "supports" => array("title", "editor", "thumbnail")); register_post_type(CPT_TYPE , $args); } add_action("init", "efs_register");

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

Все! Последнее, что нам нужно сделать, это включить наш новый файл, добавив require_once("slider-img-type.php"); в envato-flex-slider.php . Я добавил его прямо над вызовом наших скриптов.

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

Шаг 5. Генерация слайдера

Вернитесь к объявлению efs_get_slider() и замените //We"ll fill this in later на следующее:

    "; $efs_query= "post_type=slider-image"; query_posts($efs_query); if (have_posts()) : while (have_posts()) : the_post(); $img= get_the_post_thumbnail($post->ID, "large"); $slider.="
  • ".$img."
    • "; endwhile; endif; wp_reset_query(); $slider.= "

"; return $slider;

Первые две строки обязательны из-за метода работы . Он возьмет неупорядоченный список, который называется ‘slides ’ внутри слоя ‘’ и применит к нему javascript анимацию . В нашем CSS также определены и ul.slides .

После этого, мы создаем цикл WordPress, собирая все посты типа slider-image (наш пользовательский тип поста) и выводим большую версию картинки.

Несколько замечаний

  • С нашим новым пользовательским типом поста, мы можем добавлять заголовок и картинку, мы также добавили блок редактирования поста. И хотя сейчас мы используем только изображение (и заголовок, для атрибута alt ), мы включили также редактор на случай, если, например, в будущем мы захотим сделать поддержку размещения надписи на слайдере.
  • Добавляя новый пост типа Slider Image , мы должны загрузить изображение Миниатюры, чтобы слайдер работал. Он не может просто взять прикрепленный к посту файл.


Шаг 6. Тестирование

Теперь время тестировать! Как только вы добавили несколько изображений в ваш пользовательский тип поста, создайте новую страницу (я назвал свою просто Slider) и добавьте в нее наш созданный недавно шорткод . Сохраните страницу и просмотрите ее. Вы должны увидеть нечто вроде этого:

Заключение

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

Как было сказано, этот плагин дает вам все необходимое для создания действительно простой, легкой в управлении, легкой для вставки версии для WordPress!

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

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

Также можно создать изображение gif и установить его вместо стандартной картинки в header, но в дальнейшем у нас не будет никакой возможности администрировать такой "слайдер", кроме как создать новое gif изображение.

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

  • Возможность изменения размеров слайдера;
  • Возможность вставки любой гиперссылки в каждый слайд;
  • Возможность добавления текстовой информации к каждому слайду;
  • Множество эффектов перехода между изображениями;
  • Поддержка неограниченного количества слайдеров;
  • Поддержка до 20 слайдов в каждом слайдере.

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

После установки плагина в меню появится новая вкладка

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

Поскольку нас интересует возможность установки слайдера в header сайта, вам необходимо кликнуть по кнопке Edit уже существующего слайдера или вновь созданного вами. В меню Images Source необходимо установить значение Custom, в поле Slides выставить необходимое нам число слайдов в данном слайдере, после чего нужно сохранить настройки.

Затем в меню Custom Image 1, Custom Image 2, Custom Image 3 и т.д в поле ImageURL вставить ссылку на заранее подготовленное и загруженное на сайт изображение, при этом не стоит забывать каждый раз жать на кнопку Save Settings.

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

Для этого нам понадобится код:

Приведенный выше код нужно прописать в файл заголовка вашего сайта header.php , подобрав ему там оптимальное место. Однако, скорее всего, слайдер не встанет именно так, как вы того желаете. Поэтому необходимо прибегнуть к способу, описанному в одной из прошлых статей, по .

Если после прочтения данного материала у вас возникли вопросы по работе плагина или установке слайдера - пишите в комментариях, будем разбираться вместе!

Согласитесь, что наличие слайдера изображений на сайте выглядит довольно красиво. Слайдер на главной странице сайта – это не только стильный внешний вид, но также и хорошая информативность тематики Вашего сайта для посетителей.

Слайдер будем создавать с помощью популярного плагина Meta Slider , а тестировать его работу – на теме Twenty Sixteen .

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

Итак, после установки и активации плагина в админ-панели появится новый пункт меню Meta Slider , при переходе по которому Вы попадете в основное окно слайдера.

Так как не создано ни одного слайда, тут присутствует только одна единственная кнопка с надписью “Создайте Ваше первое слайд-шоу ”. После ее нажатия откроется окно Вашего первого слайдера.

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

Итак, слайдер создан, теперь нужно в него добавить слайды, что можно сделать, нажав кнопку справа Добавить слайд . После добавления всех фото, окно будет иметь следующий вид:

Перед публикацией слайдера на сайте можно ознакомится с параметрами, которые предлагает плагин.

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

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

Кроме того, Вам доступны и дополнительные настройки: растягивание слайдера на всю ширину, выравнивание по центру, автоматическое воспроизведение слайдов, “умная” обрезка фото, показ слайдов в обратном порядке, время переключения слайдов, время показа и пр.

Итак, после добавления всех нужных слайдов и настройки необходимо нажать кнопку Сохранить . Таким образом Вы создали слайдер фотографий.

Вывод слайдера на сайте

Теперь его нужно вывести на сайте. Для этого плагин предлагает два варианта: показать слайдер на отдельной странице или вставить специальный код в шаблон темы.

Чтобы показать на отдельной странице, первым делом необходимо создать страницу (Страницы -> Добавить новую ), в которой вставить специальный шорткод, который Вам предлагает плагин. Его можно увидеть в окне редактирования слайдера (в нашем случае это ).

После публикации страницы Вы сможете на ней увидеть Ваш слайдер.

Для вставки слайдера в тему Вашего сайта (напомним, что мы используем тему Twenty Sixteen ) необходимо сделать изменения в файлах темы. Для этого следует перейти Внешний вид -> Редактор , выбрать тему Twenty Sixteen и в списке доступных файлов темы найти Заголовок header.php .

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