Сегодня я расскажу вам о том, как интегрировать адаптивный слайдер jQuery в вашу тему или сайт WordPress. Это не новаторский учебник, но он редко делается правильно, поэтому я хотел бы попытаться это исправить. В этом уроке мы рассмотрим каждый шаг: от создания настраиваемого типа записи для размещения слайдов до фактического использования слайдера на нашем сайте.
Мы собираемся использовать прекрасный FlexSlider 2 от WooThemes, поскольку это очень хорошо закодированный адаптивный слайдер, который лицензирован по лицензии GPLv2. Если вам интересно, вы можете взглянуть на код для FlexSlider в его репозитории GitHub .
Прежде чем что-то сделать, мы собираемся сделать шаг назад и подумать о:
- Какие файлы требует слайдер
- Какие файлы нам нужны
Первое, что мы собираемся сделать, это скачать FlexSlider .
После того, как вы это сделали, распакуйте его.
Там есть несколько файлов, которые нас интересуют, в основном:
- flexslider.css
- Изображения / bg_direction_nav.png
- jquery.flexslider-min.js
Это все, что нам действительно нужно от загрузки FlexSlider.
Шаг 1 Настройка файлов
Давайте переместим эти 3 файла из вышеперечисленного в каталог нашей темы. В зависимости от вашей темы или настройки вы можете размещать файлы в любом месте, просто отметьте, где эти файлы получены / ссылаются, и измените код в соответствии с их новым местоположением.
Для этого урока мы будем использовать тему Twenty Eleven по умолчанию. В каталоге inc / создайте новую папку с именем slider . Там, давайте создадим несколько папок:
- CSS
- картинки
- JS
Давайте поместим flexslider.css в папку css , bg_direction_nav.png в папку images и jquery.flexslider-min.js в, как вы уже догадались, папку js .
Примечание. Обычно я помещаю их в папки css / images / js по всему каталогу темы вместе с другими файлами, но для того, чтобы сделать это руководство «универсальным», мы организуем наши файлы таким образом. Если у вас есть опыт разработки тем WordPress, вы можете организовать файлы вручную.
Теперь мы собираемся создать еще 2 файла в папке слайдера:
- slider.php — создает шаблон слайдера и загружает файлы слайдера
- slider_post_type.php — создает тип записи слайдера
Теперь у вас должна быть папка слайдера, которая выглядит примерно так:
Прежде чем мы продолжим, откройте ваш файл functions.php и добавьте следующие две строки, которые загрузят два файла .php, которые мы только что создали:
|
1
2
3
4
|
// Create Slider Post Type
require( get_template_directory() . ‘/inc/slider/slider_post_type.php’ );
// Create Slider
require( get_template_directory() . ‘/inc/slider/slider.php’ );
|
Теперь … давайте начнем кодировать!
Шаг 2 Тип сообщения ползунка
Первое, что мы собираемся сделать, это создать собственный тип записи, который будет содержать все наши слайды. Пользовательские типы постов были введены в WordPress 3.0 и, вероятно, являются самой крутой вещью, которая когда-либо случалась с миром (слишком далеко? Я просто люблю их)
Откройте файл slider_post_type.php и добавьте следующий код для создания пользовательского типа записи слайда:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<?php
// Create Custom Post Type
function register_slides_posttype() {
$labels = array(
‘name’ => _x( ‘Slides’, ‘post type general name’ ),
‘singular_name’ => _x( ‘Slide’, ‘post type singular name’ ),
‘add_new’ => __( ‘Add New Slide’ ),
‘add_new_item’ => __( ‘Add New Slide’ ),
‘edit_item’ => __( ‘Edit Slide’ ),
‘new_item’ => __( ‘New Slide’ ),
‘view_item’ => __( ‘View Slide’ ),
‘search_items’ => __( ‘Search Slides’ ),
‘not_found’ => __( ‘Slide’ ),
‘not_found_in_trash’=> __( ‘Slide’ ),
‘parent_item_colon’ => __( ‘Slide’ ),
‘menu_name’ => __( ‘Slides’ )
);
$taxonomies = array();
$supports = array(‘title’,’thumbnail’);
$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’ => 27, // Where it is in the menu.
‘menu_icon’ => get_template_directory_uri() .
‘taxonomies’ => $taxonomies
);
register_post_type(‘slides’,$post_type_args);
}
add_action(‘init’, ‘register_slides_posttype’);
|
Пользовательский тип сообщения добавлен! Ниже мы добавим метабокс, в котором есть поле для URL, на который должен ссылаться слайд. Теперь мы собираемся скопировать следующую большую стенку кода:
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
|
// Meta Box for Slider URL
$slidelink_2_metabox = array(
‘id’ => ‘slidelink’,
‘title’ => ‘Slide Link’,
‘page’ => array(‘slides’),
‘context’ => ‘normal’,
‘priority’ => ‘default’,
‘fields’ => array(
array(
‘name’ => ‘Slide URL’,
‘desc’ => »,
‘id’ => ‘wptuts_slideurl’,
‘class’ => ‘wptuts_slideurl’,
‘type’ => ‘text’,
‘rich_editor’ => 0,
‘max’ => 0
),
)
);
add_action(‘admin_menu’, ‘wptuts_add_slidelink_2_meta_box’);
function wptuts_add_slidelink_2_meta_box() {
global $slidelink_2_metabox;
foreach($slidelink_2_metabox[‘page’] as $page) {
add_meta_box($slidelink_2_metabox[‘id’], $slidelink_2_metabox[‘title’], ‘wptuts_show_slidelink_2_box’, $page, ‘normal’, ‘default’, $slidelink_2_metabox);
}
}
// function to show meta boxes
function wptuts_show_slidelink_2_box() {
global $post;
global $slidelink_2_metabox;
global $wptuts_prefix;
global $wp_version;
// Use nonce for verification
echo ‘<input type=»hidden» name=»wptuts_slidelink_2_meta_box_nonce» value=»‘, wp_create_nonce(basename(__FILE__)), ‘» />’;
echo ‘<table class=»form-table»>’;
foreach ($slidelink_2_metabox[‘fields’] as $field) {
// get current post meta data
$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=»wptuts_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%» /><br/>’, », stripslashes($field[‘desc’]);
break;
}
echo ‘<td>’,
‘</tr>’;
}
echo ‘</table>’;
}
// Save data from meta box
add_action(‘save_post’, ‘wptuts_slidelink_2_save’);
function wptuts_slidelink_2_save($post_id) {
global $post;
global $slidelink_2_metabox;
// verify nonce
if (!wp_verify_nonce($_POST[‘wptuts_slidelink_2_meta_box_nonce’], basename(__FILE__))) {
return $post_id;
}
// check autosave
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) {
return $post_id;
}
// check permissions
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 ($slidelink_2_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 = wptuts_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);
}
}
}
|
Уф. Это конец. Перейдите на панель инструментов, и вы увидите новый блестящий пользовательский тип поста «Слайды».
Шаг 3 Загрузите файлы слайдера
Откройте файл slider.php . Теперь мы собираемся поставить в очередь jQuery, сценарий FlexSlider jQuery и таблицу стилей FlexSlider. В качестве альтернативы вы можете скопировать код из flexslider.css в ваш файл style.css, если хотите .
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<?php
// Enqueue Flexslider Files
function wptuts_slider_scripts() {
wp_enqueue_script( ‘jquery’ );
wp_enqueue_style( ‘flex-style’, get_template_directory_uri() . ‘/inc/slider/css/flexslider.css’ );
wp_enqueue_script( ‘flex-script’, get_template_directory_uri() . ‘/inc/slider/js/jquery.flexslider-min.js’, array( ‘jquery’ ), false, true );
}
add_action( ‘wp_enqueue_scripts’, ‘wptuts_slider_scripts’ );
|
Пока мы это делаем, вам нужно кое-что сделать. Из-за нашей файловой структуры, flexslider.css нуждается в некотором редактировании, чтобы он знал, где найти изображение стрелки. Откройте его и выполните поиск и замените:
-
imagesс../images
Шаг 4 Инициализировать ползунок
Теперь нам нужно добавить jQuery в наш <head> для инициализации слайдера. Давайте добавим следующие строки к slider.php под только что добавленным кодом!
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
// Initialize Slider
function wptuts_slider_initialize() { ?>
<script type=»text/javascript» charset=»utf-8″>
jQuery(window).load(function() {
jQuery(‘.flexslider’).flexslider({
animation: «fade»,
direction: «horizontal»,
slideshowSpeed: 7000,
animationSpeed: 600
});
});
</script>
<?php }
add_action( ‘wp_head’, ‘wptuts_slider_initialize’ );
|
Одна из причин, по которой я решил использовать FlexSlider, заключается в его гибкости. Есть немало параметров, с которыми вы можете повозиться, но я только что упомянул четыре важных. Попробуйте изменить slide на fade или с horizontal на vertical Вы можете посмотреть все параметры здесь .
Примечание: имейте в виду, что другой способ сделать это — использовать функцию wp_localize_script ( см. Кодекс ), но это немного продвинуто для этого урока. Тем не менее, Пиппин Уильямсон (другой автор Wptuts +) только что написал отличное руководство по этому вопросу, если вам интересно.
Шаг 5 Создать слайдер
Теперь мы собираемся создать шаблон для слайдера. Сначала мы сделаем WP_Query для извлечения «постов» из пользовательского типа постов Slides. Далее мы проверим слайды и, если так, запустим слайдер. Затем мы начнем цикл. Затем каждый «слайд» проверит, был ли задан URL-адрес слайда, и, если это так, создаст для него ссылку. Изображение слайда будет отображаться, и цикл будет закрыт.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
// Create Slider
function wptuts_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 class=»flexslider»>
<ul class=»slides»>
<?php
// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();
<li>
<?php // Check if there’s a Slide URL given and if so let’s a link to it
if ( get_post_meta( get_the_id(), ‘wptuts_slideurl’, true) != » ) { ?>
<a href=»<?php echo esc_url( get_post_meta( get_the_id(), ‘wptuts_slideurl’, true) ); ?>»>
<?php }
// The Slide’s Image
echo the_post_thumbnail();
// Close off the Slide’s Link if there is one
if ( get_post_meta( get_the_id(), ‘wptuts_slideurl’, true) != » ) { ?>
</a>
<?php } ?>
</li>
<?php endwhile;
</ul><!— .slides —>
</div><!— .flexslider —>
<?php }
// Reset Post Data
wp_reset_postdata();
}
|
Шаг 6 Использование ползунка
Ну, мы наконец-то сделали слайдер! Теперь пришло время фактически использовать это. Вы можете открыть любой файл шаблона, например index.php , и wptuts_slider_template функцию wptuts_slider_template для отображения слайдера.
Поэтому, если бы мы хотели показать слайдер в Twenty Eleven сразу после заголовка на домашней странице, мы бы открыли index.php и чуть ниже get_header(); ?> get_header(); ?> , добавьте следующее:
|
1
|
<?php echo wptuts_slider_template();
|
Но что, если вы делаете это для клиента или того, кто просто не хочет трогать файлы шаблонов и PHP? Вероятно, нам следует создать для них шорткод , чтобы они могли просто использовать слайдер с шорткодом [slider] .
Добавьте это внизу slider.php :
|
1
2
3
4
5
6
7
8
9
|
// Slider Shortcode
function wptuts_slider_shortcode() {
ob_start();
wptuts_slider_template();
$slider = ob_get_clean();
return $slider;
}
add_shortcode( ‘slider’, ‘wptuts_slider_shortcode’ );
|
Слайдер теперь можно использовать в сообщениях, на страницах или в любом другом месте, которое принимает шорткод!
Скачать
Если вы хотите, вы можете скачать папку слайдера , которая содержит все, что мы прошли в этом руководстве. Вам просто нужно поместить его в папку inc вашей темы (или в другом месте, но не забудьте изменить приведенный ниже код) и добавить следующее в файл functions.php :
|
1
2
3
4
|
// Create Slider Post Type
require( get_template_directory() . ‘/inc/slider/slider_post_type.php’ );
// Create Slider
require( get_template_directory() . ‘/inc/slider/slider.php’ );
|
Примечание. В этом руководстве использовались wptuts пространства имен / текстового домена. Вы должны выполнить поиск и замену по всему коду, если вы просто копируете / вставляете его и заменяете:
-
wptuts_сyourname_ -
'wptuts'с'yourname'
Если вам понравился этот урок, дайте мне знать, и я продолжу урок по настройке нашего слайдера! Затем мы рассмотрим использование миниатюр для навигации, интеграции слайдов видео и добавления подписей.