WordPress не могу настроить слайдер

Как установить слайдер изображений на сайт WordPress

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

Как установить слайдер изображений в WordPress

Создавать слайдер мы будем с помощью плагина Meta Slider, который в свою очередь является одним из самых популярных бесплатных плагинов (более чем 500,000+ активных установок).

Плагин полностью русифицирован, что также является немалым плюсом.

1. Устанавливаем и активируем плагин Meta Slider.

2. После активации плагина с административной панели переходим в «Meta Slider».

3. Нажимаем по «плюсику».

4. Далее нажимаем кнопку «Добавить слайд» и загружаем (или выбираем из уже загруженных) изображения для слайда.

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

5. Теперь производим необходимые настройки плагина, которых кстати достаточно много (что не может не радовать).

Писать обо всех настройках я не вижу смысла, так как все они полностью русифицированы и вопросов по ним возникнуть не должно. Кроме стандартных настроек размера слайдера, эффектов, дизайна и т.п. можно также выбрать один из четырех типов слайдеров (Flex Slider, R. Slides, Nivo Slider, Coin Slider).

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

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

Для вставки слайдера в шаблон, перейдите на вкладку «Вставка в шаблон», скопируйте код и добавьте его в файл шаблона, в котором Вы хотите сделать вывод слайдера.

Добавить слайдер на страницу с помощью кнопки «Добавить слайдер» проще всего. Нажмите по кнопке, выберите созданный слайдер и нажмите «Вставить слайдшоу».

При желании можно добавлять слайдер и на сайдбар. Для этого перейдите в Внешний вид -> Виджеты и воспользуйтесь виджетом «Meta Slider».

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

Как видите, сложного совершенно ничего нету! Добавление слайдера в WordPress достаточно быстрая и простая задача. В случае если у Вас возникли вопросы — смело пишите в комментариях.

Источник

Для начинающих вебмастеров

Блог рекомендаций для начинающих вебмастеров

Как настроить работу слайдера в шаблоне сайта, выполненного на WordPress?

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

Немножко попытаюсь прояснить ситуацию. Сейчас в Интернете достаточно много ресурсов, которые распространяют бесплатные темя для WordPress, среди этих тем какое-то их количество слайдеров не содержит (такие темы достаточно «древние» по возрасту), у какого-то количества тем слайдеры содержатся и зависят от публикуемых на блоге или сайте сообщений напрямую (темы новые, но уже начинают устаревать), и есть, так называемые, премиум-темы, у которых слайдеры относительно постоянные и не зависят от поступающих на блоге сообщений (темы достаточно новые и современные).

Я же в этой публикации подробно опишу процесс формирования и настройки слайдеров в темах, где они зависят напрямую от публикуемого материала в сообщениях сайта или блога и их изображений.

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

И так … Слайдер – это меняющийся рисунок в определенной части сайта или блога (чаще всего где-нибудь в верхней части или шапке), который может иметь заглавие и превю с активной ссылкой на опубликованное сообщение (новость). В нашем примере слайдер выглядит следующим образом.

Главной его особенностью и отличительной чертой является то, что он зависит от содержания текста и наличия изображения миниатюры в сообщениях (публикациях) отнесенных к определенной рубрике. Неудобством такого слайдера и темы в целом является то, что если все публикации выбранной рубрики или хотя бы их часть из последних пяти опубликованных не содержат миниатюр, то слайдер работать не будет.

Как настроить работу такого слайдера? Для этого мы должны зайти в админ-панель нашего сайта (См. публикацию «Как войти в админ-панель (консоль) сайта или блога на WordPress?»). В левом меню админ-панели выбираем раздел «Внешний вид» и в выпадающем от этой опции подменю выбираем подраздел «Настройка темы TopGame» (Это для нашого примера, а в Вашем случае смотрите название темы, которая у Вас установлена).

После нажатия левой кнопкой мыши по названию подраздела «Настройка темы TopGame», перед нами открывается лист настроек данной темы. Нас интересует в этом листе раздел «Рубрика для слайд-шоу», она выглядит примерно вот так (для увеличения изображения кликните по нему левой кнопкой мыши):

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

Далее рассмотрим, как формируется слайд для слайдера непосредственно при опубликовании сообщения в данную выбранную нами рубрику. Для примера я опубликую новое сообщение «Экономическая браузерная mmorpg — Anno Online», которое отнесу к рубрике «Онлайн игры», поставив галочку в разделе рубрики в правом меню редактора.

Далее нам необходимо для слайдера где-нибудь найти изображение размерами не менее чем 610 на 320 пикселей (оптимальный размер слайда в нашем примере, в Вашем — будут другие параметры). Если изображение будет меньше, то слайдер будет работать некрасиво с черными полями, компенсирующими недостающий размер рисунка. Не рекомендую выбирать и слишком большое по размерам изображение, так как в качестве слайда будет использоваться только его фрагмент.

В правом меню редактора в самом его низу найдите раздел «Миниатюра записи» и кликните по опции «Задать миниатюру» левой кнопкой мыши, после чего открывается обычный загрузчик изображений, через который Вы загружаете выбранный нами для слайда рисунок (изображение).

Во время загрузки изображения скопируйте адрес изображения, он будет иметь вот такой вид http://site.com/wp-content/uploads/2014/09/anno.png, где site.com – Ваш сайт, а anno.png – название загруженного Вами изображения.

После удачной загрузки миниатюры, ее превю высветится у Вас в окошке раздела «Миниатюра записи». Например, вот так, как в нашем случае.

В верхней правой части редактора открываем опцию «Настройка экрана».

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

После этого в нижней части редактора откроется форма настройки произвольных полей.

Из всего прочего открывшегося нас с Вамии будет интересовать только опция «Добавить новое поле:»

Где в разделе «Имя» мы выбираем селектор featured или же если его нет, то через опцию «Введите новое» прописываем его вручную (это необходимо для таблицы стилей). В графу «Значение» вставляем скопированный ранее адрес изображения, который будет использоваться в качестве слайдера.

После проведенных манипуляций, публикуем наше сообщение в целом. Как видим, в нашем примере слайд добавился удачно, и слайдер работает нормально.

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

Источник

Установка слайдера на сайт WordPress

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

Рассмотрим на конкретном примере, как без особого труда и довольно быстро установить слайдер в шапку сайта WordPress.

Подготовка шаблона

Рассмотрим реализацию данного проекта на примере шаблона WordPress « Twenty Thirteen», который уже предустановлен по умолчанию в системе.

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

Далее перейдите к редактированию файла «header.php» темы и закомментируйте данный код, заключив его в теги .

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

Установка слайдера на сайт WordPress

Воспользуемся функционалом WordPress Content Slide для установки слайдера в «шапке» темы. Для установки и активации Content Slide используйте стандартную функцию WordPress поиска и установки плагинов или скачайте последнюю версию с его страницы по адресу — wordpress.org/plugins/content-slide/ . ВНИМАНИЕ! В настоящее время архив плагина недоступен для скачивания, автору письмо отправил, но тот пока молчит. На моем сервере он присутствует, скачать плагин WordPress content-slide можно по этой ссылке.

Перед выполнением работ по настройке плагина, необходимо поместить его код вызова в то место, куда хотим установить слайдер. Код находится в файле «README», который в свою очередь «сидит» в папке установленного плагина.

Откройте файл текстовым редактором и из мануала по установке скопируйте сам код.

Чтобы облегчить вам жизнь, привожу этот код ниже:

Установим код слайдера в шапке сайта WordPress перед закомментированным кодом шапки темы.

Теперь можно приступить к настройке Content Slide.

Настройка Content Slide

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

Основные настройки Content Slide

2

3

4

5

6

1	Image width	— ширина изображений (в пикселях)	height	— высота
Border width	— толщина рамки (если поставить нулевое значение, рамки вообще не будет)	Border Color	— цвет рамки
Font family	— шрифт текста описания
Text font size	— размер шрифта текста	Text color	— цвет шрифта текста
Heading font size	— размер шрифта заголовка	Heading color	— цвет шрифта заголовка
Background color	— цвет фона

Эффекты и настройки анимации Content Slide

8

9

10

11

12

13

14

15

7	Squares per width	— пропорции эффектов анимации по ширине	Squares per height	— пропорции эффектов анимации по высоте
Delay between images in ms	— время задержки смены изображений в мил.сек.	Delay beetwen squares in ms	— время задержки панели навигации в мил.сек.
Opacity of title and navigation	– непрозрачность заголовка и элементов навигации
Speed of title appereance in ms	– скорость смены заголовка
Effect	— эффект: random — случайный; swirl — вихрь; rain — дождь; straight — перелистывание; fade — выцветание.
Mouse Over Pause (Stop Animation on mouseover)	— остановить анимацию наведением курсора мыши?
Navigation Previous/Next (Previous/Next buttons on image)	— кнопки навигации (предыдущий/следующий)
Navigation Buttons (Square buttons at bottom)	— кнопки навигации быстрого перехода по слайдам
Navigation Buttons Color (Square buttons at bottom)	— цвет кнопок навигации

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

17

18

19

20

21

22

23

24

16	Display Heading and Text?	— выводить заголовок и описание?	No. of chars	— количество символов в описании
Open Images/Links In New Window?	— по клику открывать ссылку слайдера в новом окне?
Order Images Randomally	— показывать изображения в случайном порядке
Use custom images?	— использовать собственные изображения?	Yes, Custom Images	— да, собственные изображения
Number of custom Images	– число собственных изображений
CustomImage 1	— первое собственное изображение Image 1 SRC — адрес изображения; Image 1 Link — ссылка слайда; Image 1Heading — заголовок; Image 1 Text — описание.
No, Using Posts from a Category	— нет, использовать миниатюры постов из выбранных категорий
Select a Category	— выбрать категорию
No. Of posts/images	— количество постов/изображений

Ну вот и все, с настройками Content Slide покончено, не забудьте сохранить изменения.

И по завершении проделанной работы, моя главная страница выглядит так:

На картинке эффекта анимации, конечно, не увидеть, но можете быть уверены, эффект потрясающий.

Возможности плагина Content Slide, благодаря его богатому функционалу, позволяют создавать слайд-шоу практически любых размеров и в любой части страницы сайта (для установки слайдера на отдельную страницу или в сайдбар сайта при помощи текстового виджета, вам дополнительно понадобится плагин Exec-PHP) .

Установка слайдера на сайт WordPress позволит наглядно продемонстрировать содержание интернет-ресурса, удерживая посетителей как можно дольше на страницах проекта, или привлечь его внимание к своим или партнерским продуктам, увеличивая продажи. Желаю удачи!

Источник