Согласитесь, что наличие слайдера изображений на сайте выглядит довольно красиво. Слайдер на главной странице сайта — это не только стильный внешний вид, но также и хорошая информативность тематики Вашего сайта для посетителей.
Слайдер будем создавать с помощью популярного плагина Meta Slider , а тестировать его работу — на теме Twenty Sixteen .
Создание слайдераИтак, после установки и активации плагина в админ-панели появится новый пункт меню Meta Slider , при переходе по которому Вы попадете в основное окно слайдера.
Так как не создано ни одного слайда, тут присутствует только одна единственная кнопка с надписью “Создайте Ваше первое слайд-шоу ”. После ее нажатия откроется окно Вашего первого слайдера.
Итак, Вы создали пустой слайдер, который по умолчанию имеет название Новый слайдер . Если нужно его нужно переименовать, то это можно сделать, щелкнув по вкладке слева вверху и ввести новое имя.
Итак, слайдер создан, теперь нужно в него добавить слайды, что можно сделать, нажав кнопку справа Добавить слайд . После добавления всех фото, окно будет иметь следующий вид:
Перед публикацией слайдера на сайте можно ознакомится с параметрами, которые предлагает плагин.
Первое, о чем следует сказать, — это удаление какого-либо слайда. Для этого потребуется навести курсор на картинку слайда, где появится красный значок корзины, и нажать на нее.
На странице редактора слайдера также можно указать его размер, эффект переключения, внешний вид.
Кроме того, Вам доступны и дополнительные настройки: растягивание слайдера на всю ширину, выравнивание по центру, автоматическое воспроизведение слайдов, “умная” обрезка фото, показ слайдов в обратном порядке, время переключения слайдов, время показа и пр.
Итак, после добавления всех нужных слайдов и настройки необходимо нажать кнопку Сохранить . Таким образом Вы создали слайдер фотографий.
Вывод слайдера на сайтеТеперь его нужно вывести на сайте. Для этого плагин предлагает два варианта: показать слайдер на отдельной странице или вставить специальный код в шаблон темы.
Чтобы показать на отдельной странице, первым делом необходимо создать страницу (Страницы -> Добавить новую ), в которой вставить специальный шорткод, который Вам предлагает плагин. Его можно увидеть в окне редактирования слайдера (в нашем случае это ).
После публикации страницы Вы сможете на ней увидеть Ваш слайдер.
Для вставки слайдера в тему Вашего сайта (напомним, что мы используем тему Twenty Sixteen ) необходимо сделать изменения в файлах темы. Для этого следует перейти Внешний вид -> Редактор , выбрать тему Twenty Sixteen и в списке доступных файлов темы найти Заголовок header.php .
Теперь в коде найти строчку
Не перепутайте – не на странцу сайта, которую вы создаёте обычным путём в админпанели, а именно в файл шаблона страницы. Лучше всего это сделать перед выводом контента страницы. У меня такой код выглядит вот так:
Ключевое слово здесь — content . По аналогии вы найдёте у себя в шаблоне похожие строки. Но выводить слайдер на всех страницах сайта будет не слишком хорошо – не на всех страницах он нужен. Например, на странице «Контакты» или «Ссылки» он будет явно лишним. Обычно слайдер включают только на главной странице, а для этого лучше применить такой код:
if(is_front_page()) { if(function_exists("wp_content_slider")) { wp_content_slider(); } } ?>
При помощи условных тегов слайдер можно отображать только на одной, нужной вам странице. Как это сделать, я расскажу ниже. Единственный недостаток плагина — он не настраивается для вывода нескольких слайдеров с разными изображениями. Впрочем, я мало встречал таких необходимостей. Хотя, думаю, вам будет достаточно и одного слайдера. Вот так выглядит слайдер на странице моего тестового блога, так сказать, «полигона» для обкатки разных разностей:
Теперь об условных тегах. Их в WordPress много, я приведу только те, которые вам могут пригодиться для вывода слайдера.
Для того, чтобы слайдер отобразился там, где вы хотите, в строке кода поменяйте строку if(is_front_page()) на нужную вам:
Вот и всё, теперь вы можете вставлять свой слайдер практически на любую страницу сайта.
Привет читателям блога SEOBID! Наверняка каждый из вас видел в интернете сайты со слайдерами и хотел себе такой же. Ну, не такой, немного другой, но чтобы работал и не грузил сайт. Но, как известно, плагин, если он работает как слайдер wordpress , нагружает блог или сайт запросами, поэтому не все веб-мастера хотят устанавливать слайдер именно в исполнении плагина.
Популярны становятся слайдеры-карусели, реализованные при помощи php-кода, так называемые скрипты. Однако разобраться с многострочным кодом тоже не всем под силу, и слайдеры-скрипты тоже остаются в большинстве своем невостребованными.
Промежуточное звено — слайдер для wordpress комбинированного типа. То есть, есть плагин, который работает встраиванием кода в шаблон сайта. Таким образом, нагрузка на сайт и БД становится меньше, скрипт плагина вызывается быстрее, а результат – тот же. Сам плагин должен при этом загружаться не в директорию с плагинами /plugins, а в директорию того шаблона, который сейчас работает на сайте. Такое размещение также уменьшает количество запросов к базе данных.
Так что это за конструкция такая — комбинированный слайдер для вордпресс ? Например, распространенный плагин bxslider, который вы не найдете в репозитарии WordPress, но который можно и нужно скачать с официального сайта плагина — http://bxslider.com/. Естественно, плагин содержит все необходимое для организации и работы слайдера на любой странице (страницах) вашего блога, но его нужно закачать на сайт, подключить и настроить. Вот этим мы сегодня и займемся.
Весит слайдер вордпресс bxslider всего 157 кБ, и это уже большой плюс. Работает он на Jquery, а это означает, что нам необходимо будет подключить внешнюю библиотеку Jquery. Таким образом, запросы именно к вашему серверу сокращаются на глазах. Недостаток у этого плагина один – благодаря своей универсальности для каждого шаблона темы WordPress нужно будет подправлять кое-какие настройки в файле css и в основных настройках кода, который мы сейчас научимся вставлять в файлы шаблона сайта.
Всего вам придется вставить три фрагмента кода php. Первый и второй фрагменты – в файл header.php, в любое место между тэгами и . Первым фрагментом кода мы подключаем внешнюю библиотеку Jquery – без нее картинки будут стоять на месте, хотя отображаться все будет правильно.
Вот первый фрагмент:
