Приветствую всех постоянных посетителей сайта http://wp.infohub.su , а также всех новичков, которые по стечению обстоятельств оказались на моем сайте.
Сегодня мы поговорим о том как можно изменить внешний вид сайта,а конкретнее о установке слайдера картинок на wordpress.
В данном уроке я покажу 2 момента:
Установка слайдера картинок в шапку шаблона;
Установка слайдера картинок в сайдбар, или в боковую колонку(кому как больше нравится);
Для начала давайте определимся,что же мы возьмем за основу. На днях у меня возникла задача,требовалось установить слайдер картинок в шапку шаблона,пересмотрел я кучу вариантов различных плагинов слайдеров картинок на wordpress, но в конечном итоге, мой выбор остановился на одном.
По моему субъективному мнению, самый лучший плагин слайдер картинок для wordpress – это vSlider, забегая вперед скажу что в конце статьи поделюсь русифицированной версией плагина,так что не торопитесь искать плагин vSlider в интернете.
В чем же преимущества слайдера картинок vSlider перед другими слайдерами картинок для wordpress?
- Есть возможность установки размера слайдера картинок;
- Есть возможность установки на каждый слайд — ссылки на любую статью;
- Поддержка различных эффектов перехода между слайдами;
- Добавление произвольного текста к каждому слайду;
- Русифицированная панель настроек слайдера.
Итак, с выбором плагина слайдера картинок для wordpress мы определились,двигаемся дальше.
Установка плагина слайдера картинок для wordpress.
Итак перед установкой плагина слайдера картинок нужно определиться какую версию лучше всего использовать.
vSlider 3.0 Rus:
Плюсы:
- Русифицированная;
Минусы:
- Поддерживает только один слайдер на сайте;
- Поддерживает только 5 слайдов.
vSlider 4.1.2
Плюсы:
- Поддерживает неограниченное количество слайдеров картинок на сайте;
- Поддерживает до 20 слайдов в одном слайдере картинок.
Минусы:
- На английском языке, но там и так все понятно.
После того как определились с выбором версии плагина слайдера картинок для wordpress, переходим в панель управления сайтом,в раздел плагины->добавить плагин.
Дальше переходим в раздел “Загрузить файл”,нажимаем кнопку “Выберите файл”,находите скачанный плагин vSlider, и жмите Установить сейчас.
После установки плагина не забудьте его активировать.
Код для установки слайдера картинок для wordpress.
Итак для того, что бы установить слайдер картинок для wordpress нам необходимо добавить код в файл шаблона.
Код для добавления русифицированной версии плагина:
<?php if(function_exists(‘vSlider’)) { vSlider(); } ?>
Код для английской версии плагина немного различается и существует 2 варианта для добавления.
Код для вставки в статью или страницу:
[vslider name=”abc”]
Код для вставки в шаблон wordpress:
<?php if (function_exists('vslider')) { vslider('abc'); }?>В чем же различия между вставкой кода в английской версии плагина и русской?Помните я говорил что английская версия поддерживает несколько слайдеров картинок на сайте,так вот,то что указывается в круглых скобках(у меня в примере это abc) это ни что иное как название слайдера.
Давайте перейдем в раздел
vSlider на сайте и создадим слайдер картинок с названием abc, что бы код
который указан выше заработал.
Переходим vSlider->vSlider:
Вписываем название слайдера в поле vSlider Name:
После чего необходимо нажать на кнопку “Add new vSlider”.
Установка слайдера картинок в шапку шаблона wordpress.
Давайте рассмотрим случай когда слайдер картинок нужно установить в шапку шаблона wordpress.
Для начала нам необходимо определить место,куда нужно вставить слайдер.
В Шаг №7 Знакомство с разметкой шаблона WordPress. я рассказывал о общей структуре шаблона на wordpress, за шапку отвечает файл header.php и код слайдера картинок необходимо вставлять именно в этот файл. Для редактирования файла header.php подключитесь по ftp на сайт,перейдите в каталог wp-content/themes/<название вашего шаблона>/ и в этом каталоге найдите файл header.php
На моем сайте можно было бы установить слайдер вместо логотипа.Для этого нужно код слайдера картинок для wordpress установить вместо кода который выводит логотип на сайте.
Открываем файл header.php любым текстовым редактором.Задача – нужно найти место в файле header.php в котором выводится логотип сайта.
Как видно на картинке логотип сайта выводится в блоке “branding”
Значит и в файле нам необходимо искать блок “branding” что бы упростить задачу в текстовом редакторе нажмите комбинацию клавиш ctrl+f и введите слово branding
После чего нажмите на кнопку “Найти далее” и текстовый редактор подсветит место где это слово встречается в коде.
После того как место вывода было найдено можно удалить код,который находится внутри блока branding, выделяйте код мышкой и жмите правой кнопкой вырезать:
а вместо него вставляем код вывода слайдера картинок,который я указывал выше в статье:
После проделанных манипуляций,не забудьте сохранить файл на сервере.
Установка слайдера картинок в сайдбар.
Установка слайдера в сайдбар значительно проще,чем установка в шапку шаблона.
Переходим в пункт “Внешний вид”->“Виджеты” и добавляем новый виджет “Текст”.
Как добавлять виджеты можно прочитать в статье Виджеты wordpress.Добавляем дополнительные блоки информации на сайт.
В основное поле ввода текста вставляем код вывода слайдера картинок:
[vslider name="abc"]
После чего нажимаем кнопку сохранить.
Настройка плагина слайдера картинок vSlider.
Настройка плагина слайдера картинок vSlider достаточно проста и интуитивно понятна:
Выкладываю скриншот русифицированной версии плагина, англоязычную можно настроить по аналогии:
В окне настроек “Главные настройки” для нас самым важным пунктом есть “Ширина слайдера” и “Высота слайдера” в зависимости от того куда Вы решили установить слайдер в шапку или в сайдбар то и значения соответственно будут изменяться.
Окно добавления изображений:
URL Link: адрес изображения.
Также в дополнительные поля можете внести дополнительную информацию.
Не забудьте в конце нажать на кнопку “Сохранить”.
Статья получилась довольно большая,но осилив ее,я думаю Вы теперь научились устанавливать слайдер картинок на сайт, и в дальнейшем это у Вас не вызовет вопросов.
Ну а если вопросы все таки возникли,можете обращаться по адресу admin@wp.infohub.su ко мне за помощью.