Привет, друзья! Последнее время занят версткой нового дизайна для моего сайта. Так вот благодаря нему я и смог создать такой скрипт слайдера для 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. Интерфейс создания слайдов на русском языке для Вашего удобства.
Теперь что все обозначает:
- Функция register_slides_posttype() (строка 3) создаст новый тип записей «Слайды»
- В массиве $post_type_args на 36-й строке мы добавляем нашу иконку слайдера.
Примечание: если в вашей теме папка с картинками называется «img» и вы скопировали иконку в эту папку, то замените в данной строчке /images/ на /img/, т.е. исправьте путь до картинки. - Функцией edit_admin_menus() мы добавили в административное меню пункт «Слайдер», к нему и добавляется иконка слайдера, с которой мы помучались 🙂
- С 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-дереве.
- С 20-й по 52-строку мы запускаем цикл вывода слайдов, это почти тот же цикл, как в выводе записей.
- Итак, в цикле на 24-строке открываем слайд тегом li, а на 51-й закрываем.
- Внутри, на 28-й строке мы выводим миниатюру, т.е. картинку слайда.
- Ссылку со слайда и подпись к слайду мы добавляем из метабоксов, которые заполняются при создании слайда.
- Так как слайд теперь – это новый тип записей, мы выводим заголовок с помощью the_title().
- После цикла закрываем родительские теги (строки 54-57). После этого запускаем сам слайдер. Если Вы знаете технологии jQuery, то Вы сможете запустить слайдер в отдельном js-файле.
Так Вы можете подключить почти любой jQuery слайдер. Кроме тех, в которых слайды загружаются из стороннего файла (например, через файл .json)
Наглядно все показано на картинке

Подключаем слайдер к сайту
Подключим наш слайдер. Для этого выполним нашу функцию slider_template(). Вставьте следующий код например в файл header.php вашей темы в нужное место.
<?php slider_template(); ?>
Вот и все! Осталось только создать то количество слайдов, которое вы написали в файле slider.php и наслаждаться его работой на Вашем сайте.
Заключение
Данный скрипт был мной опробован на 3-х jQuery слайдерах. А именно представленный скрипт был мной испытан в теме Twenty Twelve.