Skip to content

Подключаем jQuery слайдер к WordPress без плагинов

Привет, друзья! Последнее время занят версткой нового дизайна для моего сайта. Так вот благодаря нему я и смог создать такой скрипт слайдера для WordPress. Дело в том, что я уже сейчас заглядываю на шаг вперед и думаю, как я реализую ту или иную часть сайта под WordPress. Одной такой частью и является слайдер. Мне стало интересно, как подключить слайдер к WordPress. И тут началось самое интересное.

Данный скрипт был обновлен! Новую версию вы можете скачать здесь!

Предпосылки

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

На сайте я нашел ту самую оригинальную статью. Но не будем забывать, что я искал такой скрипт слайдера, чтобы можно было добавлять к слайдам подписи и названия. Других нужных статей поиск по тому сайту не выдал, поэтому я принялся просматривать комментарии к той первой статье. Мне очень повезло, в комментариях к статье была оставлена ссылка на плагин к WordPress, сделанный по тому уроку. Плагин назывался «Captain Slider». В принципе, вроде вот готовое решение задачи, но попытка встроить его в вордпресс потерпела неудачу. Он криво отображался!

Ни Гугл, ни Яндекс в дальнейших поисках не помог. И я принялся копаться в файлах плагина и коде слайдера из урока. Что-то затянулось предисловие, теперь давайте займемся созданием слайдера, как это сделал я.

Подготавливаем файлы

Создадим слайдер мы с помощью скрипта FlexSlider 2. Вы можете скачать исходники с нужными файлами и попробовать создать слайдер с нуля. Нам понадобятся следующие файлы:

  • jquey.min.js – минимизированная библиотека jQuery
  • jquery.flexslider-min.js – минимизированный скрипт FlexSlider’а
  • modernizr.js – для показа одного слайда для пользователей с отключенным JavaScript’ом
  • flexslider.css – стандартная таблица стилей от FlexSlider
  • bg_direction_nav.png – спрайт со стрелками
  • slider-icon.png – иконка для показа в админке. Вы можете сделать свою собственную картинку размером 16*16 пикселей

Копируем в папку с темой наши js-файлы в папу «js», таблицу стилей в папку «css», а изображения в папку «images».

Примечание: если в вашей теме папка с картинками называется, например, «img», то придется поменять пути к файлам картинок в таблице стилей и файле определяющем типа записей Slide (о нем чуточку позже).

В корне папки с темой создайте 2 php-файла:

  • slider.php – для создания функции вывода слайдера
  • slider_post_type.php – задаёт тип выводимых сообщений
Все нужные нам файлы
Все нужные нам файлы

Подключаем слайдер

Прежде всего, для подключения слайдера к теме вставте следующий код в файл functions.php:

// Create Slider Post Type
require( get_template_directory() . '/slider_post_type.php' );
// Create Slider
require( get_template_directory() . '/slider.php' );

Для стилизации слайдера в файл header.php вставим следующий код между тегами head:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/css/flexslider.css" type="text/css" media="screen">
<script src="<?php bloginfo('stylesheet_directory') ?>/js/modernizr.js" type="text/javascript"></script>

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

Да, именно, публиковать. Для этого создадим новый тип записей для WordPress – «Слайды». Для этого приступим к редактированию файла slider_post_type.php:

<?php
function register_slides_posttype()
{
	$labels = array(
		'name' => _x('Ротатор контента', 'post type general name'),
		'singular_name' => _x('Слайд', 'post type singular name'),
		'add_new' => __('Создать слайд', 'ctslider'),
		'add_new_item' => __('Создать слайд'),
		'edit_item' => __('Изменить слайд'),
		'new_item' => __('Новый слайд'),
		'view_item' => __('Просмотр слайда'),
		'search_items' => __('Искать слайды'),
		'not_found' => __('Нет слайдов'),
		'not_found_in_trash' => __('В корзине нет слайдов'),
		'parent_item_colon' => __('Родительский слайд'),
		'menu_name' => __('Слайды')
	);

	$taxonomies = array();

	$supports = array('title', 'thumbnail', 'page-attributes');

	$post_type_args = array(
		'labels' => $labels,
		'singular_label' => __('Slide'),
		'public' => true,
		'show_ui' => true,
		'publicly_queryable' => true,
		'query_var' => true,
		'capability_type' => 'post',
		'has_archive' => false,
		'hierarchical' => false,
		'rewrite' => array('slug' => 'slides', 'with_front' => false),
		'supports' => $supports,
		'menu_position' => 28,
		'menu_icon' => get_template_directory_uri() . '/images/slider-icon.png',
		'taxonomies' => $taxonomies
	);

	register_post_type('slides', $post_type_args);
}

add_action('init', 'register_slides_posttype');

/**
 * Rename Slider Admin Menu Title
 *
 * @access private
 * @return void
 * @since 1.0.0
 */
function edit_admin_menus()
{
	global $menu, $submenu;
	$menu[28][0] = 'Слайдер';
}

add_action('admin_menu', 'edit_admin_menus');

/**
 * Metabox Functions
 *
 * @package Slider for WP
 * @subpackage Metabox Functions
 * @copyright Copyright (c) 2012, Konstantin Karnauhov - onfire.space
 * @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
 * @since 1.0.0
 */

/**
 * Setup Metabox
 *
 * Creates the array to setup the metabox as well all the metabox fields
 *
 * @since 1.0.0
 */

$slidecaption_1_metabox = array(
	'id' => 'slidecaption',
	'title' => __('Настройки слайда'),
	'page' => array('slides'),
	'context' => 'normal',
	'priority' => 'default',
	'fields' => array(
		array(
			'name' => __('Ссылка со слайда'),
			'desc' => __("Укажите URL-адрес, на который будет вести слайд."),
			'id' => 'slidelink',
			'class' => 'slidelink',
			'type' => 'text',
			'rich_editor' => 0,
			'max' => 0
		),
		array(
			'name' => __('Текст'),
			'desc' => __("Опишите слайд"),
			'id' => 'captiontext',
			'class' => 'captiontext',
			'type' => 'textarea',
			'rich_editor' => 0,
			'max' => 0
		)
	)
);

/**
 * Register all metaboxes for sliders.
 *
 * @access private
 * @return void
 * @since 1.0.0
 */
function add_slidecaption_1_meta_box()
{
	global $slidecaption_1_metabox;
	foreach ($slidecaption_1_metabox['page'] as $page) {
		add_meta_box($slidecaption_1_metabox['id'], $slidecaption_1_metabox['title'], 'show_slidecaption_1_box', $page, 'normal', 'default', $slidecaption_1_metabox);
	}
}

add_action('admin_menu', 'add_slidecaption_1_meta_box');

/**
 * Display the meta boxes
 *
 * @access private
 * @return void
 * @since 1.0.0
 */
function show_slidecaption_1_box()
{
	global $post, $slidecaption_1_metabox, $prefix, $wp_version;
// Use nonce for verification
	echo '<input type="hidden" name="slidecaption_1_meta_box_nonce" value="' . wp_create_nonce(basename(__FILE__)) . '" />';
	echo '<table class="form-table">';
	foreach ($slidecaption_1_metabox['fields'] as $field) {
		$meta = get_post_meta($post->ID, $field['id'], true);
		echo '<tr>',
		'<th style="width:20%"><label for="', $field['id'], '">', stripslashes($field['name']), '</label></th>',
			'<td class="field_type_' . str_replace(' ', '_', $field['type']) . '">';
		switch ($field['type']) {
			case 'text':
				echo '<input type="text" name="', $field['id'], '" id="', $field['id'], '" value="', $meta ? $meta : $field['std'], '" size="30" style="width:97%" />', '', __(stripslashes($field['desc']));
				break;
			case 'textarea':
				if ($field['rich_editor'] == 1) {
					if ($wp_version >= 3.3) {
						echo wp_editor($meta, $field['id'], array('textarea_name' => $field['id']));
					} else {
						$editor = '';
						if (!post_type_supports($post->post_type, 'editor')) {
							$editor = wp_tiny_mce(true, array('editor_selector' => $field['class'], 'remove_linebreaks' => false));
						}
						$field_html = '<div style="width: 97%; border: 1px solid #DFDFDF;"><textarea name="' . $field['id'] . '" class="' . $field['class'] . '" id="' . $field['id'] . '" cols="60" rows="8" style="width:100%">' . $meta . '</textarea></div>' . __(stripslashes($field['desc']));
						echo $editor . $field_html;
					}
				} else {
					echo '<div style="width: 100%;"><textarea name="', $field['id'], '" class="', $field['class'], '" id="', $field['id'], '" cols="60" rows="8" style="width:97%">', $meta ? $meta : $field['std'], '</textarea></div>', '', __(stripslashes($field['desc']));
				}
				break;
		}
		echo '<td>',
		'</tr>';
	}
	echo '</table>';
}

/**
 * Save Meta Box Data
 *
 * @access private
 * @return void
 * @since 1.0.0.
 */
function slidecaption_1_save($post_id)
{
	global $post, $slidecaption_1_metabox;
	if (!wp_verify_nonce($_POST['slidecaption_1_meta_box_nonce'], basename(__FILE__)))
		return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
		return $post_id;
// Check Capabilities
	if ('page' == $_POST['post_type']) {
		if (!current_user_can('edit_page', $post_id)) {
			return $post_id;
		}
	} elseif (!current_user_can('edit_post', $post_id)) {
		return $post_id;
	}
	foreach ($slidecaption_1_metabox['fields'] as $field) {
		$old = get_post_meta($post_id, $field['id'], true);
		$new = $_POST[$field['id']];
		if ($new && $new != $old) {
			if ($field['type'] == 'date') {
				$new = format_date($new);
				update_post_meta($post_id, $field['id'], $new);
			} else {
				if (is_string($new))
					$new = $new;
				update_post_meta($post_id, $field['id'], $new);
			}
		} elseif ('' == $new && $old) {
			delete_post_meta($post_id, $field['id'], $old);
		}
	}
}

add_action('save_post', 'slidecaption_1_save');

/**
 * Rename Post Thumbnail Meta Box
 *
 * @access private
 * @return void
 * @since 1.0.0
 */
function change_image_box()
{
	remove_meta_box('postimagediv', 'slides', 'side');
	add_meta_box('postimagediv', __('Картинка слайда'), 'post_thumbnail_meta_box', 'slides', 'normal', 'high');
}

add_action('do_meta_boxes', 'change_image_box');
?>

Это весь код файла slider_post_type.php. Интерфейс создания слайдов на русском языке для Вашего удобства.

Теперь что все обозначает:

  1. Функция register_slides_posttype() (строка 3) создаст новый тип записей «Слайды»
  2. В массиве $post_type_args на 36-й строке мы добавляем нашу иконку слайдера.
    Примечание: если в вашей теме папка с картинками называется «img» и вы скопировали иконку в эту папку, то замените в данной строчке /images/ на /img/, т.е. исправьте путь до картинки.
  3. Функцией edit_admin_menus() мы добавили в административное меню пункт «Слайдер», к нему и добавляется иконка слайдера, с которой мы помучались 🙂
  4. С 59-й строки и до конца добавляются и сохраняются метабоксы.

После всего этого вот как преобразуется наше административное меню:

Административное меню с пунктом слайдер
Административное меню с пунктом слайдер

Создаем функцию вывода слайдера

Наконец, пришло время создания самого шаблона слайдера для WordPress.

Откроем на редактирование файл slider.php и вставляем в него следующий код:

<?php
// Create Slider
function slider_template() {
	// Query Arguments
	$args = array(
		'post_type' => 'slides',
		'posts_per_page' => 5
	);
	// The Query
	$the_query = new WP_Query( $args );
	// Check if the Query returns any posts
	if ( $the_query->have_posts() ) {
	// Start the Slider ?>

		<div id="main" role="main">
			<section class="slider">
				<div class="flexslider">
					<ul class="slides">

						<?php
						// The Loop
						while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

							<li>

								<?php
								// The Slide Image
								echo the_post_thumbnail(); ?>
								<div class="slide-text">
									<h2>
										<?php if ( get_post_meta( get_the_id(), 'slidelink', true) != '' ) { ?>
										<a href="<?php echo esc_url( get_post_meta( get_the_id(), 'slidelink', true) ); ?>">
											<?php }

											//Title
											the_title();

											if ( get_post_meta( get_the_id(), 'slidelink', true) != '' ) { ?>
										</a>
									<?php } ?>

									</h2>

									<?php
									// Slide Text
									if ( get_post_meta( get_the_id(), 'captiontext', true) != '' ) { ?>
										<p><?php echo get_post_meta( get_the_id(), 'captiontext', true ); ?></p>
									<?php } ?>
								</div>

							</li>
						<?php endwhile; ?>

					</ul>
				</div>
			</section>
		</div>

		<!-- FlexSlider -->
		<script defer src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.flexslider-min.js"></script>
		<!-- jQuery -->
		<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js"></script>
		<script type="text/javascript">
			$(window).load(function(){
				$('.flexslider').flexslider({
					animation: "slide",
					start: function(slider){
						$('body').removeClass('loading');
					}
				});
			});
		</script>

	<?php }
	// Reset Post Data
	wp_reset_postdata();
}
?>

Опять-таки это весь код файла slider.php.

Так мы в самом начале создаем функцию slider_template(). На 7-й строке напротив ‘posts_per_page’ стоит цифра 5. Это кол-во выводимых слайдов. В вашем случае Вы можете поставить другое число.

После, на 15-й строке, вставляем то, что идет до самих слайдов, т.е. их родители в DOM-дереве.

  1. С 20-й по 52-строку мы запускаем цикл вывода слайдов, это почти тот же цикл, как в выводе записей.
  2. Итак, в цикле на 24-строке открываем слайд тегом li, а на 51-й закрываем.
  3. Внутри, на 28-й строке мы выводим миниатюру, т.е. картинку слайда.
  4. Ссылку со слайда и подпись к слайду мы добавляем из метабоксов, которые заполняются при создании слайда.
  5. Так как слайд теперь – это новый тип записей, мы выводим заголовок с помощью the_title().
  6. После цикла закрываем родительские теги (строки 54-57). После этого запускаем сам слайдер. Если Вы знаете технологии jQuery, то Вы сможете запустить слайдер в отдельном js-файле.

Так Вы можете подключить почти любой jQuery слайдер. Кроме тех, в которых слайды загружаются из стороннего файла (например, через файл .json)

Наглядно все показано на картинке

Иллюстрированное представление создания слайдера
Иллюстрированное представление создания слайдера

Подключаем слайдер к сайту

Подключим наш слайдер. Для этого выполним нашу функцию slider_template(). Вставьте следующий код например в файл header.php вашей темы в нужное место.

<?php slider_template(); ?>

Вот и все! Осталось только создать то количество слайдов, которое вы написали в файле slider.php и наслаждаться его работой на Вашем сайте.

Заключение

Данный скрипт был мной опробован на 3-х jQuery слайдерах. А именно представленный скрипт был мной испытан в теме Twenty Twelve.

Данный скрипт был обновлен! Новую версию вы можете скачать здесь!