Cлайдер на весь экран wordpress

Здравствуй, дорогой читатель! В этой статье я расскажу, как сделать слайдер на весь экран на вашем сайте. Вообще слайдеров существует большое количество и их можно реализовывать используя различные инструменты такие как JQuery, JavaScript, CSS, HTML 5, Главное на мой взгляд в реализации слайдера это корректность его работы, кроссбраузерность и конечно адаптивность. Ну хватит разглагольствовать приступим делать наш слайдер!

Шаг 1. Подготавливаем WordPress тему для использования слайдера

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

vibiraem_temu

Для начала необходимо с помощью ftp клиента открыть папку с вашим проектом  у меня она находится в /public_html/wp-content/themes/twentytwelve

Рассмотрим файлы с которыми мы будем работать header.php, index.php, и конечно файл style.css

Нам не понадобиться JavaScript, JQuery.

Теперь можно пробовать установить первый слайдер.

Шаг 2. Вставляем код от CSS3 Multi Animation Slider

Простой слайдер со свайп переходом от одного слайда к другому и смены заголовков поверх слайдера.

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

В корне папки с темой находим в одном из файлов (header.php, index.php) примерно такие строчки:

И ниже под body вставляем следующий код:

В адресе  изображений меняем пути к картинкам на свои!!!

src=»http://mmechta.ru/wp-content/uploads/2017/03/slide4.jpg»

Следующим этапом будет добавление стилей в css файл в моем случае он называется style.css

В этот файл в самом низу добавляем:

Могут быть сбои, если на вашем сайте уже используются стили которые мы добавили в css файл!

Шаг 3. Сохраняем изменения во всех файлах и проверяем работу слайдера!

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

slider_na_ves_ekran

Теперь можно менять, убирать заголовки или производить другие изменения.

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

P.S. Данный слайдер можно использовать и в обычном сайте, без WordPress.