Вам нужен слайдер, при наведении на картинки которого посетитель сможет перейти на нужную вам страничку, да к тому же вы хотите, чтобы рядом с картинкой на слайдере отображался короткий анонс, обзор – без проблем все это вам поможет создать отличный бесплатный плагин  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.

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

Код шаблона 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.