Создаем слайдер через плагин Smooth Slider

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

Скачать исходники для статьи можно ниже

Использование данного плагина Smooth Slider подойдет для обзора новых статей на вашем сайте, причем это будет очень эффектно. Также его можно использовать для презентации ваших новых продуктов, услуг. Или же можете размещать в нем интересные новости или события, которые по вашему мнению покажутся для посетителей интересными, например какая-нибудь полезная халява в интернете, причем ссылки можно делать как на статьи на вашем сайте, так и на любые сайты в интернете.

Пример слайдера, созданного с помощью плагина Smooth Slider:

Демонстрационный пример можно посмотреть по следующей ссылке:

http://www.clickonf5.org/

 

Попробуем создать данный слайдер с помощью бесплатного плагина Smooth Slider.

1. Установка плагина Smooth Slider.

Данный плагин есть на wordpress.org!

Сведения о плагине:

Последнее обновление: 2011-12-16
Количество загрузок: 195,766

Количество оценивших 120 человек и общая поставленная оценка 4.

Отличные показатели!

Установка проста – заходим в панель управления вашим сайтом, далее выбираем в левом меню пункт “Плагины” и подпункт “Добавить новый” и в строчке Найти плагины вводим Smooth Slider.

Жмем на ссылку “Установить сейчас” и “Активировать”.

После чего в левом меню вашей панели управления появиться пункт “Smooth Slider” с двумя подпунктами:

– Sliders

-Settings

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

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

2. Создаем контент (картинки + анонсы) слайдера.

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

Если мы выбираем пост (запись), то входим в нужную нам запись (в панели управления выбираем в левом меню пункт “Записи”, подпункт “Все записи” и выбираем нужную запись).

В редакторе записи появиться новое окошко, оно будет располагаться под окошком “Произвольные поля” (если его не видно, то в правом верхнем углу находим закладку “Настройки экрана” (рядышком с ней находится закладка “Помощь”), нажимаем на нее и ставим галочку напротив Smooth Slider):

Рассмотрим более подробно настройки данного окошка:

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

2. Какой стиль использовать при отображении данного слайдера (можно оставить значение поумолчанию).

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

4. Здесь нужно указать ссылку, по которой перейдет посетитель при нажатии на картинку слайдера (можно оставить пустым).

5. Если поставить галочку, то ссылка будет на данный пост.

Аналогично действия можно производить и со страничками.

А как же дело состоит с изображениями?

Ведь кроме постов (записей), страничек в слайдер можно добавлять просто изображения.

Для этого нам нужно перейти галерею картинок нашего сайта (в панели управления сайтом в левом меню выбираем пункт “Медиафайлы”, подпункт “Библиотека”).

Далее выбираем нужную нам картинку и попадаем в Редактирование медиафайла.

Здесь у нас появились новые подпункты:

 

1. Поставьте галочку, чтобы добавить данное изображение в слайдер.

2. Здесь нужно указать ссылку, по которой перейдет посетитель при нажатии на картинку слайдера (можно оставить пустым).

3. Если поставить галочку, то ссылка будет на данный пост.

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

3. Настройка слайдера (внешний вид, порядок, удаление не нужных пунктов)

Теперь рассмотрим непосредственно пункт “Smooth Slider” (в панели управления в левом меню панели управления) с его двумя подпунктами:

– Sliders

-Settings

3.1. Подпункт Sliders:

Подпункт Sliders состоит из 2-х частей:

В первой части вы можете удалить ненужные слайды (посты, странички, изображения) вашего слайдера – для этого нужно поставить галочки напротив лишних слайдов и нажать на кнопку “Remove Selected”.

Во второй части вы можете поменять порядок сладов (посты, странички, изображения) в слайдере – для этого достаточно нажать левой кнопкой мыши по нужному слайду и перетащить его куда нужно (вверх, вниз) и после нажать на кнопку “Save the order”.

 

3.2. Подпункт Settings:

Здесь вы сможете настроить внешний вид слайдера.

Данный подпункт состоит из 6 частей:

1. Preview – Предварительный просмотр – здесь вы сможете увидеть ваш будущий слайдер, как он будет выглядеть.

2. Slider Box – Настройка бокса слайдера (интервал, скорость слайдов, количество, цвет, ширина, высота, граница, кнопки навигации)

В кнопках навигации поставьте галочку напротив пункта “Show Prev/Next navigation arrows” ( Показать Предыдущий / Следующий стрелками) – так будет более эффектнее.

3. Slider Title – настройка самого названия и его шрифта слайдера.

4. Post Title – настройка самого названия и его шрифта слайдеров (анонсов постов, страничек, изображений).

5. Thumbnail Image – настройка миниатюры (картинки слайдеров).

6. Slider Content – настройка контента слайдера (шрифт, его размер в символах, словах).

7. Miscellaneous – остальные настройки (можно оставить по умолчанию).

 

4. Как вставить слайдер на сайт

Если вы хотите установить слайдер на главной странице вашего сайта – вам необходимо открыть файл index.php (в панели управления в левом меню выбираем пункт “Внешний вид”, далее подпункт “Редактор” и справа в списке шаблонов выбираем файл index.php) и вставляем в его код следующие строчки:

 <?php if ( function_exists( 'get_smooth_slider' ) ) {
     get_smooth_slider(); } ?> 

Также вы можете воспользоваться следующим тегом (шорткодом):

[smoothslider]

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

 

PS: Приведу пример вставки слайдера в шаблон index.php, для отображения его на главной страничке, использовать буду тему Twenty Twelve.

Должно получится следующее:
smoothslider

Код шаблона index.php с кодом слайдера:

<?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.
 * For example, it puts together the home page when no home.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">

<?php if ( function_exists( 'get_smooth_slider' ) ) {
    get_smooth_slider(); } ?>

</br>
</br>

		<?php if ( have_posts() ) : ?>

			<?php /* Start the Loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', get_post_format() ); ?>
			<?php endwhile; ?>

			<?php twentytwelve_content_nav( 'nav-below' ); ?>

		<?php else : ?>
...

Слайдер вставлен с помощью строчек 22-23, строчки 24-25 – это отступ, больше ничего не добавлял в код шаблона index.php.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Создаем слайдер через плагин Smooth Slider: 12 комментариев

  1. franik

    Добрый день! Очень сорри, но мне, чайнику, непонятен вот какой момент: пункт четвёртый вашей статьи-слайдер на главной странице… он должен вставить изображения-слайды в шапку страницы? И эти скопированные строчки

    if ( function_exists( ‘get_smooth_slider’ ) ) {
    get_smooth_slider(); }

    их можно ставить в любое место файла index? Ничего при этом удалять не надо???

  2. Ft-tema

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

  3. Daria

    скажите пожалуйста почему у меня один слайд накладывается на другой? в предпросмотре показывает все корректно а вот на сайте отображается не правильно… :(

  4. Светлана

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

Добавить комментарий для Алевтина Брайнгер Отменить ответ