Привет, друзья! Последнее время занят версткой нового дизайна для моего сайта. Так вот благодаря нему я и смог создать такой скрипт слайдера для 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.
