Шаг №30.Как установить слайдер картинок на wordpress.

Приветствую всех постоянных посетителей сайта http://wpcreate.ru , а также всех новичков, которые по стечению обстоятельств оказались на моем сайте.

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

В данном уроке я покажу 2 момента:

Установка слайдера картинок в шапку шаблона;

Установка слайдера картинок в сайдбар, или в боковую колонку(кому как больше нравится);

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

По моему субъективному мнению, самый лучший плагин слайдер картинок для wordpress – это vSlider, забегая вперед скажу что в конце статьи поделюсь русифицированной версией плагина,так что не торопитесь искать плагин vSlider в интернете.

В чем же преимущества слайдера картинок vSlider перед другими слайдерами картинок для wordpress?

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

Итак, с выбором плагина слайдера картинок для wordpress мы определились,двигаемся дальше.

Установка плагина слайдера картинок для wordpress.

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

vSlider 3.0 Rus:

Плюсы:

  • Русифицированная;

Минусы:

  • Поддерживает только один слайдер на сайте;
  • Поддерживает только 5 слайдов.

vSlider 4.1.2

Плюсы:

  • Поддерживает неограниченное количество слайдеров картинок на сайте;
  • Поддерживает до 20 слайдов в одном слайдере картинок.

Минусы:

  • На английском языке, но там и так все понятно.

После того как определились с выбором версии плагина слайдера картинок для wordpress, переходим в панель управления сайтом,в раздел плагины->добавить плагин.

Дальше переходим в раздел “Загрузить файл”,нажимаем кнопку “Выберите файл”,находите скачанный  плагин vSlider, и жмите Установить сейчас.

Установка плагина слайдеар картинок для wordpress

После установки плагина не забудьте его активировать.

Код для установки слайдера картинок для 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 Установка плагина слайдера картинок для wordpress

Вписываем название слайдера в поле vSlider Name:

vSlider Настройка плагина слайдера картинок для wordpress

После чего необходимо нажать на кнопку “Add new vSlider”.

Установка слайдера картинок в шапку шаблона wordpress.

Давайте рассмотрим случай когда слайдер картинок нужно установить в шапку шаблона wordpress.

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

В Шаг №7 Знакомство с разметкой шаблона WordPress. я рассказывал о общей структуре шаблона на wordpress, за шапку отвечает файл header.php  и код слайдера картинок необходимо вставлять именно в этот файл. Для редактирования файла header.php подключитесь по ftp на сайт,перейдите в каталог wp-content/themes/<название вашего шаблона>/ и в этом каталоге найдите файл header.php

На моем сайте можно было бы установить слайдер вместо логотипа.Для этого нужно код слайдера картинок для wordpress установить вместо кода который выводит логотип на сайте.

Слайдер картинок для wordpress

Открываем файл header.php любым текстовым редактором.Задача – нужно найти место в файле header.php в котором выводится логотип сайта.

Как видно на картинке логотип сайта выводится в блоке “branding”

Слайдер картинок для wordpress

Значит и в файле нам необходимо искать блок “branding” что бы упростить задачу в текстовом редакторе нажмите комбинацию клавиш ctrl+f и введите слово branding

Слайдер картинок для wordpress

После чего нажмите на кнопку “Найти далее” и текстовый редактор подсветит место где это слово встречается в коде.

Слайдер картинок для wordpress

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

Установка Слайдера картинок для wordpress

а вместо него вставляем код вывода слайдера картинок,который я указывал выше в статье:

Код Слайдера картинок для wordpress

После проделанных манипуляций,не забудьте сохранить файл на сервере.

Установка слайдера картинок в сайдбар.

Установка слайдера в сайдбар значительно проще,чем установка в шапку шаблона.

Переходим в пункт “Внешний вид”->“Виджеты” и добавляем новый виджет “Текст”.

Как добавлять виджеты можно прочитать в статье Виджеты wordpress.Добавляем дополнительные блоки информации на сайт.

Виджет Слайдера картинок для wordpress

В основное поле ввода текста вставляем код вывода слайдера картинок:

[vslider name="abc"]

После чего нажимаем кнопку сохранить.

Настройка плагина слайдера картинок vSlider.

Настройка плагина слайдера картинок vSlider достаточно проста  и интуитивно понятна:

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

Настройки Слайдера картинок для wordpress

В окне настроек “Главные настройки” для нас самым важным пунктом есть “Ширина слайдера”  и “Высота слайдера” в зависимости от того куда Вы решили установить слайдер в шапку или в сайдбар то и значения соответственно будут изменяться.

Окно добавления изображений:

Настройки Слайдера картинок для wordpress

URL Link: адрес изображения.

Также в дополнительные поля можете внести дополнительную информацию.

Не забудьте в конце нажать на кнопку “Сохранить”.

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

Ну а если вопросы все таки возникли,можете обращаться по адресу admin@wpcreate.ru ко мне за помощью.

  • http://egrishakova1.ru Евгения

    Да, я почерпнула из Вашей статьи интересную информацию. Спасибо.

    • http://wpcreate.ru Артем Петрусенко

      Пожалуйста!Возвращайтесь еще ,информация постоянно обновляется=)

  • http://www.krasita.ru Татьяна

    Артем, а если мне нужно установить слайдер, не в шапку и не в сайтбар, а на главную сайта, там у меня есть окна для картинок и я хочу, чтобы они менялись, как действовать тогда? А код вставлять в шаблон front-page? В какое место именно? А в статье или в странице куда именно добавляется код слайдера?

    • http://wpcreate.ru Артем Петрусенко

      Скорее всего в index.php нужно добавлять,но в зависимости от шаблона может называться home-page.php или как то так.А может этот код в шапку вынесен,но для него стоят правила,если для главной -> тогда отображать.Слайдер сейчас нужно вставить в то место где сейчас большая картинка на главной?

      • http://edim-legko.ru Анна Рублева

        А как же разобраться, если нужно вставить в шапку, но не вместо баннера, а рядом с ним (справа или слева), вот, примерно, как здесь: picantecooking.com

    • http://naryn.info Bek

      Артем, большое тебе спасибо, все подробно описываешь, людьям пользу делаеш, дай Бог тебе здоровье!!!

  • http://www.krasita.ru Татьяна

    В шаблоне, в котором я сама меняла текст под картинками на главной, в него, наверное, и код слайдера вставлять? А куда именно? Артем, а не могли бы Вы конкретно, посмотреть и подсказать мне? Адрес сайта http://www.krasita.ru Как можно связаться с Вами лично? Может через агент поговорим?

  • Николай

    Артем, подскажите пожалуйста. При создании сайта выбрал и установил тему Webfolio, так как в данной теме предустановлен слайдер. Но при установке, слайдер не отображается. Что необходимо сделать для того, чтобы слайдер отобразился на главной странице? Заранее благодарен. С уважением, Николай.

    • http://wpcreate.ru Артем Петрусенко

      Здравствуйте Николай,провел я небольшое расследование и обнаружил что код слайдера находится в файле home.php
      Найдите там такой блок
      div id=»slider» в нем расположен
      Код слайдера.

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

  • http://www.remterem.com/ Виталий

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

  • http://foto.oliwy.net Stiw

    Спасибо огромное очень полезная информация для меня!

  • http://mebel-mir.ru Валентина

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

    • http://wpcreate.ru Артем

      Получились размытые потому что изначально картинки должны быть нужного размера.

  • http://pochemychto.ru Надежда

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

  • Валерий

    Здравствуйте.я прочил вашу статью и наконец то установил слайдер.Но… он некорректно отображается.Я загрузил 4 изображения по 150рх на 150 рх вставил код в index.php выбрал размер слайдера 600 на 150 но у меня отображается только первое изображение в размере 600 на 150.Подскажите что делать?

    • http://wpcreate.ru Артем Петрусенко

      Так изображения то 150 на 150 значит и в настройках слайдера нужно точно такие же размеры установить!

  • http://azov-sky.com.ua Kat

    Здравствуйте, пробую описанный Вами плагин
    при добавлении плагина в любой место (будь то в заголовок или на страницу) плагин не проигрывается, а отображается просто первая картинка даже без навигации (тестовая страница http://azov-sky.com.ua/?page_id=2841), картинки в настройках указаны, настройки тоже выставлены, ориентируясь на Ваши инструкции
    в чем может быть проблема?
    спасибо

    • http://wpcreate.ru Артем Петрусенко

      Картинки загрузили в папку и правильно ли указаны пути к этим картинкам в настройках плагина?

      • http://azov-sky.com.ua Kat

        использую картинки по-умолчанию, пути к ним прописаны правильно
        Auto-Resizing отключен, показывается только первая картинка, остальные не меняются

        • http://wpcreate.ru Артем Петрусенко

          Пришлите мне на почту логин и пароль для доступа к сайту,я посмотрю в чем дело.

          • Виталий

            Подскажите как решили этот вопрос, у меня аналогичная ситуация

        • http://e-stampa.ru/ Наталья

          Аналогичная ситуация. Подскажите, пожалуйста, что не так?

  • Артём

    Добрый день, Артём!
    Подскажи пожалуйста как на сайте, в меню сделать типа виджета чтобы в нём информация автоматически менялась при переходе, ну например каждый раз новый анекдот появлялся или картинка!??

    • http://wpcreate.ru Артем Петрусенко

      По поводу виджетов не знаю,не интересовался,но я бы написал простенький скрипт,который вытягивал бы из базы данных рандомно новый анекдот,или картинку, в базе данных нужно создать новую табличку например anekdot тогда sql запрос будет примерно такого вида SELECT * FROM `anekdot` ORDER BY RAND( ) LIMIT 1 . Если есть желание отображать картинку то в бд можно хранить путь к этой картинке.

  • Артём

    понятно=) спасибо!

  • Сергей

    подскажите пожалуйста — как сделать, чтобы картинки отображались в ряд — несколько штук, в Хедере например, а не одна?

    • http://wpcreate.ru Артем Петрусенко

      То есть простых картинок,не слайдов?

      • Сергей

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

  • Сергей

    Здравстуйте Артем.
    Скачал русифицированный плагин. Хотел вставить в сайдбар парочку меняющихся баннеров.
    Попробовал вставить текстовый виджет по вашей инструкции, не получилось, не совсем понял, что вставлять в сам текст.
    Попробовал вставить в сам виджет vSlider Widget, получилось, но как теперь отцентровать их, сделать посередине блока и сделать, чтобы открывались в новом окне, ведь настроек таких тут нет.
    С уважением Сергей.

    • http://wpcreate.ru Артем Петрусенко

      Сергей,напишите пожалуйста свой сайт,я посмотрю и отвечу.

  • http://egofilin.ru Сергей

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

  • http://dismobi.ru Евгений

    А где можно посмотреть в работе данный плагин?

  • http://calibri-rbk.ru Елена

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

  • http://apalych.ru/wp/?page_id=5 Максим

    Проблема при эффекте fade картинки сменяются слишком быстро, а если поставить медленнее то текст вылезает до смены картинок помогите

  • http://apalych.ru/wp/?page_id=5 Максим

    Помогите пожалуйста на слайдере при эффекте fade текст выводится раньше картинок заранее спасибо

  • http://persona-sait.ru Виктория

    Спасибо большое за урок!!! Все получилось)) теперь у меня интерактивная «шапка»))) Делала все на локалке, вечером выгружу на сайт!)

  • Виктор

    «в конце статьи поделюсь русифицированной версией плагина», а где сам плагин?

  • http://gotovim-appetitno.ru Григорий

    Все просто и понятно. Как раз то что мне было нужно спасибо.

  • http://dengiskofe.ru Людмила Плехова

    Здравствуйте, Артем! По вашему уроку установила слайдер на страницу и он у меня залез на сайтбар. В качестве размера я взяла картинку, которая является подложкой под посты ( она ведь вмещается на блог). размер 520х300. А слайдер мало того, что залазит на сайтбар, он еще слайд показывает обрезанным снизу и сверху. Я уже 2 дня колдую, но размеры так и не приходят в норму. Подскажите пожалуйста. Страницу я так и не опубликовала. Блог у меня новый и я его только оформляю.

    • http://dengiskofe.ru Людмила Плехова

      И еще текст плывет.

      • http:/dengiskofe.ru Людмила Плехова

        Разобралась и пользуюсь слайдбаром. Спасибо за вашу информацию. Сделала и на 4 картинки и даже на 20. Можно посмотреть результат http://dengiskofe.ru/dengi/organo-gold-marketing-plan/

        • http://wpcreate.ru Артем Петрусенко

          Отлично получилось, только теперь нужно картинки по размеру подогнать, а то у меня они не в своем разрешении.

        • http://cheremis-natalia.com/ Наталья

          Ой-ой! Людмила, у Вас что-то не то)))))

  • http://zhilye-moye.ru/ Ольга Шульгина

    У меня до недавнего времени стоял в шапке сайта слайдер-аккордеон, но в одно (совсем не прекрасное) время он почему-то отключился. Пыталась исправить ситуацию, но, к сожалению, не получилось… В надежде найти замену, набрела на Ваш сайт, буду пытаться установить слайдер по Вашей рекомендации. Не знаю, что получится, обязательно отпишусь. Спасибо, Артем, у Вас прекрасный ресурс!

    • http://wpcreate.ru Артем Петрусенко

      И Вам спасибо за теплые слова!

  • http://kyrylov.com Виталий

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

    • http://wpcreate.ru Артем Петрусенко

      Попробуйте еще mvslider!

  • http://zdorovay-eda.ru Людмила

    Артем, а меня заинтерисовала запись ( О авторе блога) с вашей фото, как можно такую запись установить?

    • http://wpcreate.ru Артем Петрусенко

      Для этого нужно открыть файл шаблона и внизу в него добавить еще один

      с фото и описанием.Ничего сложного в этом нет!
      • http://zdorovay-eda.ru Людмила

        Артем, не совсем поняла, что прямо, в шаблон копируем фото? можно подробнее?

  • http://natus-vincere.ru/ nario

    Добрый день, Артем. Плагин установился, работает. Но одна незадача он у меня постоянно отображается по левому краю. Как задать ему параметры чтоб он отображался по центру?

    • http://natus-vincere.ru/ nario

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

      • http://wpcreate.ru Артем Петрусенко

        Я сейчас перешел на плагин mvslider, и Вам советую, мне он кажется удобнее чем тот что я описывал в посте,могу ответить как это сделать в плагине mvslider.

        • http://natus-vincere.ru/ nario

          А можно ссылочку на этот новый плагин? И можно ли его будет вставить подобным образом в пост [vslider name=»abc»] ?

          • http://wpcreate.ru Артем Петрусенко

            Да можно, конструкция правда вот такая [m-vslider id=»1″], если созданный слайдер под ид 1, в настройках выставляется и настраивается практически все что угодно, вот ссылочка http://wordpress.org/extend/plugins/m-vslider/

      • http://mama-legko.ru Евгения

        Если еще кому-то актуально. Для открытия ссылки в новом окне нужно зайти во вкладку «more vSlider settings» (у меня это вверху справа.
        Nario, а как удалось выровнять по центру? У меня смещен вправо.

  • http://natus-vincere.ru/ nario

    Спасибо, думаю что разберусь с ним) Там эффекты такие же приятные?)

    • http://wpcreate.ru Артем Петрусенко

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

      • http://natus-vincere.ru/ nario

        Плавает он у меня как то странно… http://natus-vincere.ru/contakt/

        • http://wpcreate.ru Артем Петрусенко

          Вы уверены что установили именно m — Vslider а не Nivo slider , а то я смотрю в названиях div отображается class=»nivoSlider»?

          • http://natus-vincere.ru/ nario

            nivo стоял давно, видно остались от него какие то куски

  • http://wpcreate.ru Артем Петрусенко

    Я еще раз проверил, и могу утверждать что сейчас это Nivo слайдер выводится.

  • http://www.all-the-bestsoft.ru Элла

    Подскажите, а как изменить размер шрифта в заголовках виджетов? А то я тему установила и мои заголовки просто не вмещаются в сам виджет, слова наплывают на меню и всё это выглядит очень не эстетично(

    • http://wpcreate.ru Артем Петрусенко

      Найдите файл style.css он лежит в папке wp-content/themes/classroom-blog/style.css откройте его текстовым редактором, перейдите к строчке под номером 763, там найдите свойство:

      font: bold 24px/33px "Trebuchet MS", Helvetica, sans-serif;

      и замените к примеру на :

      font: bold 16px "Trebuchet MS", Helvetica, sans-serif;

      потом cможете уже сами подкорректировать размер шрифта;

      • http://Www.All-the-bestsoft.ru Элла

        Вот спасибо, помогло! А подскажите ещё пожалуйста как уменньшить шрифт в самом меню виджета или лучше сделать виджет шире, потому что так же текст обрезаный 🙁 я хотела убрать рамки с виджета, но не знаю как это сделать(( можно ли как-то настроить, что бы в виджетах перенос по словам был? Спасибо за ранее!

  • http://discoveryjournal.ru Виль

    Вставляю этот текст в виджет:

    
    
    [vslider name="books"]
    
    И в виджете показывается только надпись [vslider name="books"]
    
    Что делать?

    • Евгения

      у меня тоже ничего не происходит, просто код в тексте пишется и все!!! А-а-а! Помогите! что делать?

  • Татьяна

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

  • wadim

    подскажите куда вставляется код в теме Twenty Eleven?

  • Майя

    В моей теме CinemaBlog есть галерея изображений. В описании шаблона было сказано, что галерею можно отредактировать в настройках администратора. Пересмотрела всю «админку», но нигде не нашла настроек?

  • http://poddel-ka.ru Alexa Fake

    Самая адекватная статья, спасибо, с меня +

  • Майя

    А как изменить картинки в уже встроеном в тему слайдере, если сайт уже на хостинге?

  • Татьяна

    Здравствуйте. Может Вы, сможете мне помочь. На этом сайте (optimizatorsha.ru), (Обсуждаемые статьи, Популярное в Твиттере, Популярное в Фейсбуке) подскажите, что это вообще за реализация такая? Это слайдер или еще что то? Хотя бы образно, что бы понятно было в каком направлении копать!!!!

    • http://wpcreate.ru Артем Петрусенко

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

      • Татьяна

        Спасибо за помощь! Это уже хоть что то. Буду рыть в этом направлении. Очень штучка эта понравилась!!

  • http://www.kupitedom.com Влад

    Если кому интересно, код слайдера: Коды картинок. Работает, проверено, можно ставить куда угодно и изменять формат.

  • Майя

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

  • Алексей

    Подскажите пожалуйста можно ли в этом плагине увеличить лимит картинок с 20 до 100 к примеру?

    • http://wpcreate.ru Артем Петрусенко

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

  • Саша

    Кто «золотое » место сайта (хедер) слайдеры ставит ?

  • Fierna

    Помогите, пожалуйста. Делаю сайт на основе такой темы: http://morestyle.ru/themejunkie/channelpro-tema-novostnogo-portala-wordpress-ot-themejunkie.html
    Проблема в том, что в ней установлен дурацкий слайдер: нельзя отдельно выбрать страницы и картинки для него, настроить анимацию, не масштабирует изображения.
    Не посоветуете как его заменить на один из предложенных Вами? Все мои попытки ни к чему хорошему не привели.

    • http://wpcreate.ru Артем Петрусенко

      Здравствуйте, сейчас я скачаю себе, вырежу из шаблона слайдер, и скину Вам.

    • http://wpcreate.ru Артем Петрусенко

      Я разобрался, откройте файл index.php и из 6 строчки удалите полностью строку include(TEMPLATEPATH. ‘/includes/home-featured.php’);Вместо этого кода можете вставить код как в уроке.

  • Дамир

    Добрый день. Артем у меня сайт на денвере, поэтому не могу показать. У меня на главной странице выводится слайдер с популярными записями. Хотел бы вставить вместо него Ваш слайдер. Незнаю как его поставить на главную страницу. Плагин установил и активировал, а вот куда вставить код не пойму. Помогите пожалуйста.

    • http://wpcreate.ru Артем Петрусенко

      Здравствуйте, напишите название шаблона.

  • http://lady-ah.ru/ Ирина

    Спасибо за отличную статью! Очень доступно и понятно все написано! Еще раз спасибо!

  • Irina

    Артем, добрый вечер! Так и не смогла решить проблему со слайдером темы Simple Catch. Сам слайдер увеличивается, размер фоток в нем остается прежним. В CSS коде просмотрела все так и не увидела где еще менять размеры. Может Вы подскажите как с этим слайдером справиться?

    • http://wpcreate.ru Артем Петрусенко

      В чем проблема удалить стандартный слайдер, и установить тот что описан в статье?

      • Irina

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

        • http://wpcreate.ru Артем Петрусенко

          Вы на локальном компьютере работаете, или на хостинге сайт висит?

          • Irina

            Да вот собираюсь, если сегодня получится, на хостинг перенести. Внешний вид блога я привела в более менее состояние, кроме слайдера, Мне пока не под силу переписать все коды в шаблоне этой темы, чтобы установить другой слайдер.

          • Irina

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

  • Владимир

    спасибо большое! быстро и легко установил слайдер.

    • http://wpcreate.ru Артем Петрусенко

      Пожалуйста, если нужна будет помощь — обращайтесь!

  • http://net.vawe.net Nursultan

    Извините, а куда ставить код так и не понял?

    • http://net.vawe.net Nursultan

      пользуюсь шаблоном udesign

  • Бенджамин

    Спасибо, действительно удобный слайдер, правда не всегда плавно работают переходы.

  • http://ulibkavpodarok.ru/ Назиля

    Спасибо за статью, а так же за терпение к Новичкам. Сначала ничего не получилось, была задача поставить на Главную, но прочитав чужие комментарии — всё Ок)) Спасибо!!!

  • Андрей

    Здравствуйте! А как заменить слайдер jdGallery в теме MusicStyle?

  • http://big-bigmoney.ru Залина

    Доброго времени суток! Артем, я так и не поняла куда именно вставлять код, в какой в шаблон или в файл и в какое именно место. Хочу вставить слайдер в сандбар, тема моя называется FinanceStock. У нее уже в шапке есть слайдер и хочется еще. Жду с нетерпением Вашего ответа! Спасибо!

    • http://wpcreate.ru Артем Петрусенко

      Добрый день Залина, я Вам предлагаю установить плагин M-vSlider, он очень похож на тот что я описал в статье, с несколькими исключениями.У данного плагина есть возможность разместить слайдер в виджете.
      Установите данный плагин, потом перейдите в админке в виджеты, найдите там виджет M-vSlider — Image Slider, перетяните его в область виджетов, после чего произведите его настройку.

      • http://big-bigmoney.ru Залина

        А коды надо будет куда-либо вставлять или нет?

  • http://big-bigmoney.ru Залина

    Так-с, все хорошо — он появился в виджетах, а где же картинки-то добавлять?

    • http://wpcreate.ru Артем Петрусенко

      В админке m-v-slider setup.

  • http://big-bigmoney.ru Залина

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

    • http://wpcreate.ru Артем Петрусенко

      Пожалуйста, я сейчас кстати тоже пользуюсь именно вторым плагином, а не тем что в статье!

  • http://www.uralsad.com Irina

    Артем, ОГРОМНОЕ спасибо за такую КРАСОТУ )))
    все чудненько работает в статьях и сайт баре

    остался только вопрос «шапке» сайта оба кода высвечиваются текстом
    ссылку на обычный gif баннер я вставляла через админку скрин (http://rghost.ru/44094215)
    без правки кода тут не обойтись?

  • http://hiki.com.ru оксана

    здравствуйте! я тоже новичок, и то же много вопросов : не могу оформить статью под тесты, все разрывается и ничего не понятно , помогите.

  • http://uznaemmirvmeste.ru Brilthor

    Артем, было бы удобней, если бы вы эту статью переделали на тот слайдер, который вы рекомендуете в комментариях, на M-vSlider. Был бы признателен. Да я думаю многие были бы рады. Для вас это сущие пустяки, а нам, новичкам, приятно)

  • bedLaM

    Здравствуйте! Полезная статья! Возник вопрос,я использую тему Graphene. И никак не могу найти файл в котором нужно поменять код, что бы ушел слайдер встроенный в теме, он почему то не хочет работать. Может быть подскажите в какой именно файл лезть и где вообще копать?

    • http://wpcreate.ru Артем Петрусенко

      Здравствуйте. Зайдите в админку — внешний вид — настройки слайдера — отключить слайдер.

      • bedLaM

        Да я так и сделал, но мне кажется код все равно будет в файле разве нет? Как мне теперь вставить слайдер под заголовком?

        • http://wpcreate.ru Артем Петрусенко

          Надо смотреть, в файле index.php после

          get_header(); ?>
          • bedLaM

            Далее у мена в файле index.php написано вот так:

          • bedLaM

            Не получается еще и код нормально вставить вообщем вот такая штука там:

  • bedLaM

    Я так понимаю мне надо вставить из статьи под while ?

    • http://wpcreate.ru Артем Петрусенко

      Вставляйте сразу же после:

      get_header(); ?>
      • bedLaM

        Спасибо! Вроде встаил! Теперь почему то выходит вот такая ошибка «Unable to Add vSlider, can not insert vSlider» при попытке создать слайдер, пробовал и abc, и другие имена забивать ошибка остается.

        • http://wpcreate.ru Артем Петрусенко

          Там весь смысл заключается что нужно создать слайдер с таким же именем, как и то имя что указано в коде. То есть если вставили код с именем abc то и слайдер должен называться точно также.

          • bedLaM

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

        • http://wpcreate.ru Артем Петрусенко

          Хм странно, ну попробуйте еще вот этот слайдер M-vSlider он еще у меня стоял на сайте.

          • bedLaM

            ХМ странно добавить какой то сайт бар с любимы названием у меня не получилось ни в одном, ни в другом плагине, но в первом плагине при установке есть вот такой созданный vslider_options, собственно я его везде прописал, и просто изменил его настройки, и вауаля все работает, правда приедтся теперь возится с оформлением:(

          • bedLaM

            И еще вот такая штука, у меня получилось добавить слайдбар на место верхнего банера, и вместо заголовка, а вот в место под заголовком так и не получается, то есть фактически на место банера встроенного в теме. Код вставляю туда куда Вы мне указали. При этом в настройках темы банер отключен, может быть его включить? И поискать где дописался код что то типо ( $graphene_settings[‘slidebar’] != true) ?

        • http://wpcreate.ru Артем Петрусенко

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

          • bedLaM

            Это я все прекрасно понимаю…А вот по существу можете что нибудь посоветовать? Куда ж мне все таки все это безобразие вставить, что бы слайдер работал вместо встроенного?

        • http://wpcreate.ru Артем Петрусенко

          Ну если вместо встроенного слайдера тогда вот так, я у себя проверил, у меня работает:

          <?php
          /**
           * The main template file.
           *
           * This is the most generic template file in a WordPress theme
           * and one of the two required files for a theme (the other being style.css).
           * It is used to display a page when nothing more specific matches a query. 
           * E.g., it puts together the home page when no home.php file exists.
           * Learn more: http://codex.wordpress.org/Template_Hierarchy
           *
           * @package Graphene
           * @since Graphene 1.0
           */
          global $graphene_settings;
          get_header(); ?>
          <?php if(function_exists('vslider')){ vslider('vslider_options'); } ?>
          	<?php	
          	do_action('graphene_index_pre_loop');
           
              /* Run the loop to output the posts.
          	 * If you want to overload this in a child theme then include a file
          	 * called loop-index.php and that will be used instead.
          	*/	
          	while ( have_posts() ) {
          		the_post(); 
          		get_template_part( 'loop', 'index' );
          	}
           
          	/* Posts navigation. */ 
              graphene_posts_nav();
              ?>
           
          <?php get_footer(); ?>
          • bedLaM

            При этом в самих настройках темы встроенный слайдер отключен или включен? В настройках виджета при этом какая позиция указана? Просто я уже по разному покрутил, и все равно слайдера нет:((( Видать руки кривые….

          • bedLaM

            Скачал «голую» тему все работает что самое интересное, но опять же со стандартным vslider_options, что то я в теме начудил видать….

          • bedLaM

            Фух спасибо за помощь! Все сделал с помощью MetaSlider, плюс код вставлял в header.php :))

  • http://v2.vv.si Rustem

    Привет! у меня проблема удалил слайдер даже деактевировал Vslider eng. а в главной странице слайдер не удаляется! помогиииииииии

    • http://wpcreate.ru Артем Петрусенко

      Может то какой то другой слайдер?

  • Ирина

    Здравствуйте Артем. Большое Вам спасибо за блог. Как начинающий веб-разработчик могу отметить полезность и доступность изложенной информации.
    Сейчас на денвере стараюсь разобраться со слайдером шаблона creativeworld. В Slider.php из тега убрала все и вставила , получилось:
    все делала по Вашей инструкции. Слайдер не отображается. Что не так, не пойму, уже третий день мучаюсь. Помогите, пожалуйста

    • Ирина

      не отобразился кусок html. В Slider.php все убрала, получилось так:

  • Ирина

    да что ж такое :))) В Slider.php убрала все, вставила в тег . слайдер не отображается 🙁

    • http://wpcreate.ru Артем Петрусенко

      Ирина здравствуйте.
      В файле slider.php
      оставьте вот эти строки

      <div id="slaider">
      <?php if(function_exists('vslider')){ vslider('Сюда вставить название слайдера из админки'); } ?>
      </div>

      Например у меня это так:

      <div id="slaider">
      <?php if(function_exists('vslider')){ vslider('vslider_options'); } ?>
      </div>

      а потом в файле style.php измените строчку 194 на margin: 10px auto;

  • Наташа

    Огромное спасибо!!!
    Замечательная статья, все получилось с первого раза!

  • http://saitkyrort.ru http://saitkyrort.ru

    Артём я хочу, чтоб вы объяснили мне другую тему. Почему у меня в рубриках, когда нажимаешь под рубрику записи в них и картинки не отображаются полностью на главной странице а на половину? Может нужен плагин, который отображает запись? подскажите. Если не поняли моего вопроса, то зайдите на мой сайт http://saitkyrort.ru и поймёте.

  • http://tobehip.ru Matthew

    Привет!
    Добавил код слайдера в виджет текст для сайдбара,
    но там отображается только код.
    Что я сделал не так?
    tobehip.ru

  • http://bogotol24.ru/ Ярослав

    Здравствуйте Артем. Сайт работает на WP, не могу разрешить комментарии к записям на слайдере. Может в курсе как это сделать?

  • http://ohrantryda.ru/ саша

    Ув. Артем, подскажите как в слайдере оставить только название статьи, без описания?

  • Андрей

    Подскажите пожалуйста!
    Установил на сайте m-vslider все отлично, но картинки потеряли четкость — это из-за низкого качества картинок или по какой-то другой причине?
    И что с этим можно сделать?

  • Андрей

    А не подскажете как настроить шаблон Helix, чтобы на главной менялись слайды?

  • http://infooriflame.ru/ Лидия

    Спасибо, очень полезно. Но у меня не получается вставить в виджет. Отображается просто текст [vslider NAME=»abc»]

  • Татьяна

    Здравствуйте, Артём!!! Установила слайдер на главной странице, а под слайдером при смене картинки постоянно текст прыгает в зависимости от ее размера …подскажите пожалуйста, как это устранить????

  • http://mobile-school.ru Татьяна

    А можно слайдер поставить внутрь статьи? Хочу сделать рекламную статью, а внутри сделать слайдер

    • http://wpcreate.ru Артем Петрусенко

      Татьяна, конечно можно, для этого используются short коды.

  • Максим В

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

  • http://www.charmpictures.com Анна

    Спасибо большое за информацию! А как сделать этот слайдер адаптивным (т.к. я использую адаптивный шаблон)?

  • http://ppl-omsk.ru/ Антонина

    Здравствуйте, Артем. Поставила этот слайдер по вашей рекомендации. Смотрится красиво, но не перебрасывает на страницу, ссылку на которую указала. Как решить такую проблему?

    • http://ppl-omsk.ru/ Антонина

      Нашла ответ в настройках: нужно выбрать «да» в Show images as links (Показывать ссылки)

  • http://emma-dekor.com Алина

    Доброго времени суток Все загрузила Все поставила Пока на страницу vSlider переключает свои картинки А мои файлы не показывает И размеры выставляла И удаляла И переустанавливала Что делать дальше? ❓

  • http://emma-dekor.com Алина

    Здравствуйте Я все испортила Надо было вставить в шаблон Сидела дня три Вставила наверняка не туда Пропал текст в заголовке И исправить не могу Хотя виджет получился очень хорошо 😳

  • http://noucdo.ru Татьяна

    Артем, здравствуйте! Очень полезная статья! Благодарю вас за проделанную работу! У меня получилось вставить слайдер vSlider в шапку сайта и все прекрасно работает! Но, сам слайдер не по центру, а справа в шапке. Видела в комментариях, что с такой проблемой уже сталкивались и получалось ее решить, а как это сделать пока не дойду! Помогите, пожалуйста?!

    • http://noucdo.ru Татьяна

      Чудом разобралась с расположением! УРААА! Теперь другой вопрос: белое поле за слайдером. Надо поменять фон в шапке?!

      • http://wpcreate.ru Артем Петрусенко

        Татьяна, откройте файл style.css и удалите вот это

        background: #fff;

        в 173 строке.

        • http://noucdo.ru Татьяна

          Убрать нужно только само значение «#fff;» ? Если так, то все осталось по-прежнему

          • http://wpcreate.ru Артем Петрусенко

            Нет, полностью всю строку что я указал выше.И попробуйте очистить кэш. 😉

        • http://noucdo.ru Татьяна

          Блягодарю!!!!!! Все получилось))))

  • Ярослав

    Здравствуйте Артем. Подскажите пожалуйста, как реализовать подобные слайды http://www.devexpress.com/ и по каким тегам искать?

    • http://wpcreate.ru Артем Петрусенко

      Здравствуйте Ярослав, возможно что то из вот этого ВАм поможет http://bxslider.com/examples/carousel-demystified

      • Ярослав

        Спасибо за помощь. А будет ли у вас урок по созданию подобной карусели?

        • http://wpcreate.ru Артем Петрусенко

          Ярослав, как только вернусь из отпуска, сразу подобный урок напишу, а пока отдых!

  • http://avz-clinic.lab.parkcode.com.ua/ Дмитрий

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

    • http://wpcreate.ru Артем Петрусенко

      Дмитрий, картинки необходимо ставить именно того размера, что и слайдер в настройках. Тогда все картинки будут четкими.

  • http://ppl-omsk.ru/ Антонина

    Здравствуйте, Артем! Использую этот слайдер, добавила его в шапку по вашей рекомендации. Однако есть момент, требующий доработки. На компьютере сайт со слайдером смотрится отлично. Но когда просматриваю на смартфоне или планшете, слайдер не вмещается по ширине. Хотя все остальные элементы сайта аккуратно вписываются по размеру монитора. Что нужно сделать, чтобы он так же адаптировался под размер монитора?

  • http://melooking.ru/ Влад

    Куда этот код вставлять? У меня русская версия плагина, устонавливаю в сайдбар.

    • http://wpcreate.ru Артем Петрусенко

      В виджетах должен появиться виджет. Его и нужно разместить в виджетах.

  • http://seokurgan.ru/ Евгений

    А если слайдер уже встроен в тему — как его настроить и активировать?

    • http://wpcreate.ru Артем Петрусенко

      Евгений, существует огромное количество различных тем, с различными слайдерами. Какой именно Вы имеете слайдер — я не знаю.
      Есть вариант удалить из кода шаблона стандартный слайдер, и установить этот к примеру. 😉

      • http://perfectbaby.ru Илья

        Артем, добрый день. Установил тему Catch Evolution. В админке в настройках темы не могу найти как редактировать слайдер, т.е. как заменить существующие фото и добавить новые? Спасибо.

  • http://pokrova.ks.ua Станислав

    Артём! Я создал несколько страниц. На одной из страниц я создаю статью. Потом я хочу снова на этой же странице создать ещё одну статью. И как мне её вписывать? По верх старой? Тогда эти статьи будут идти некрасиво просто одна за другой. Причём не знаю, как делать анонсы разных статей на одной странице и их между собой отделять какой-нибудь линией, что ли?

    • http://wpcreate.ru Артем Петрусенко

      Станислав прочитайте вот эту статью: Страницы, записи — в чем отличия? а вот про анонсы статей на wordpress я писал.

      • http://pokrova.ks.ua Станислав

        Здравствуйте, Артём! Вы мне ответили, спасибо, но пишите: «прочитайте вот эту статью», а ссылки никакой нет.

      • http://pokrova.ks.ua Станислав

        Уже появилась ссылка, спасибо.

      • http://pokrova.ks.ua Станислав

        Артём! Извините, что тревожу снова, но больше спросить не у кого. По поводу главной страницы сайта у меня пока проблем нет: я делаю новую запись, делаю анонс. Полный вариант статьи открывается тут же — на главной, только в расширенном варианте. НО мне нужно, чтобы открывалось на другой странице сайта. Я поменял ссылку на нужную страницу сайта, но на той странице все записи идут подряд. И анонсы статей там не работают.

        • http://wpcreate.ru Артем Петрусенко

          Вы уверены что он открывается на главной?Может это особенности шаблона?

          • http://pokrova.ks.ua Станислав

            Когда анонс статьи с главной страницы открывается, то прописывается: Главная — Новости — «название этой статьи». И это меня полностью устраивает. НО большинство статей мне нужно, чтобы открывались в определённых страницах сайта. Я это сделал, но на той странице теперь идут все статьи подряд, а мне нужно, чтобы открывалась только нужная мне статья. Т.е. не работают анонсы на других страницах, а только на главной.

        • http://wpcreate.ru Артем Петрусенко

          Трудно что то так сказать не видя сайта, нужно воспользоваться категориями(рубриками) Посмотрите как это сделано на моём сайте.

          • http://pokrova.ks.ua Станислав

            Просто у Вас на сайте страницы, кроме главной статические, как бы, а мне нужно, чтобы мои страницы пополнялись раз в неделю свежей информацией. Вот на моём сайте http://www.pokrova.ks.ua на главной есть анонс первой статьи — там ссылка идёт на страницу «Проповеди», но на странице «Проповеди» идут все статьи подряд и никак не отделяются между собой, и анонсы ссылаются на эту же страницу снова по полной. А вот, например, как мне бы хотелось: http://troitza-chertanovo.ru/ Здесь есть страницы, которые обновляются, например, «Записки паломника». И на этой странице есть и анонсы.

          • http://pokrova.ks.ua Станислав

            Артём, извините, я Вас утомил длинными вопросами. Спасибо, что уделили время. 🙂

  • http://ИП-Евгений.рф Евгений

    Здравствуйте.
    Я установил плагин WP Nivo Slider. Активировал.
    Во вкладке плагины он наряду со всеми установленными и активными плагинами отражается.
    Однако в консоли нет ссылки на вход в плагин для редактирования его, я соответственно не могу им работать. Что надо сделать?

  • http://emvcusno.ru/ Ирина

    спасибо за подробную статью! буду пробовать))))

  • http://web2link.ru Nick

    Не могу добавить название слайдера, вот такое сообщение Unable to Add vSlider, can not insert vSlider

  • http://eluym.ru Алексей

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

  • http://www.teapotsem.com/ Stiv

    Привет Артем! Для меня, новичка в этом деле, Ваш сайт явился кладезем практических советов!!! Спасибо за заботу о «чайниках»!!!
    На шаблоне WP Onion, который мне очень нравится своей многофункциональностью, слайдер установлен в хедере, а мне хочется переместить его не в сайтбар, а на главную сайта, на место первого поста. Изменил его размер, чтобы умещался между сайтбарами, а вот для перемещения знаний не хватает… Буду премного благодарен за практический совет..
    С уважением Stiv/

  • http://www.teapotsem.com/ Stiv

    Установил плагин vslider4.1, выложил на хост слады, все вроде настроил верно…
    В сайдбар виджетом текст выложил [vslider NAME=»proba»]? ,но ах и увы… Не пашет 😐 Может папкой слайдов должно сделать proba, а не img?

  • http://vceckidki.ru Юрий

    Артем, здравствуйте!
    Установил на свой сайт по Вашему мануалу плагин M-Vslider. Но он не работает. Видно что что то загружается, но картинки не выводятся. Иногда при первой загрузке сайта выскакивает на секунду картинка и все. Кэш чистил, другие шаманские действия с настройками плагина эффекта не дают. В шаблоне был предустановленный слайдер, но он выводил популярные записи. С файла футеред удалил все, код слайдера с индекс страницы удалил и на его место поставил код M-Vslider. Уже мозг весь вынес. Понимаю, что проблема в чем то пустяшном, но не могу своим замылившимся глазом увидеть. Посмотрите, пожалуйста, vceckidki.ru

  • http://caticat.ru Вера

    Установила сразу, работает четко. Настройки легкие и понятные. Очень удобный плагин. Спасибо!

  • http://www.mvm-tour.ru Виктория

    Артем! Спасибо за Ваши статьи.
    очень доступно, даже для новичка — как я=)
    поставила, все нравится..
    вопрос только 1: я подогнала раземр сла

  • http://www.mvm-tour.ru Виктория

    Артем! Спасибо за Ваши статьи.
    очень доступно, даже для новичка — как я=)
    поставила, все нравится..
    вопрос только 1: я подогнала размер под слайд бар
    но картинки выводятся — как бы часть картинки
    как задать размер изображения? чтобы в слайдере картинка показывалась целиком?

    Спасибо!

  • http://www.e-learning.org.ua/ Наталия

    Спасибо большое за статью.
    Установила слайдер в шапку сайта, но фотографии не появляются плавно (как бы нет плавного перехода между ними), а эффект fade получается работает только для названия и описания слайда.
    Возможно ли сделать наоборот, чтобы описание и название слайда появлялись одновременно со слайдом без всяких плавностей, а сам переход между картинками был плавным?

  • http://royalhouse.org.ua Матвей

    Все детально расписано, но я не понял ))) Есть проще плагины?

  • Алекс

    Ихто из добрых людей подскажетЬ —
    Как избавитсИ от поднадоевшей надписи,
    что проявляетсИ на слайдах карусели шаблона
    исполненного на ВордПресс?

  • Maria Moreyno

    Привет! Я недавно присоединилась к пользователям WordPress и что-то не понимаю.
    Моя панель управления сайтом выглядит вот так: https://uploads.disquscdn.com/images/cc11c8e2512ed300def6a249907b6cf9e12428822dd8c4e3771221390c12fccc.jpg
    И я не вижу, где я могу загрузить файл с плагином. Подскажите, пожалуйста.