Главная
Вёрстка WordPress
Как создать JQuery слайдер для Cайта на WordPress?

Как создать JQuery слайдер для Cайта на WordPress?

Хорошего настроения, всем читателям — Sozdaiblog.ru!

Сегодня Вы узнаете, как сделать jqueryслайдер для сайта на WordPress , без использования плагинов.

Для начала давайте разберёмся, что такое jquery слайдер и зачем он нужен Вашему ресурсу.

Слайдер на сайте, это своеобразный информационный баннер в котором автоматически прокручивается различного рода рекламная информация.

Красиво оформленный слайдер, оживит Ваш сайт и добавит некую изюминку, которая сделает его более привлекательным для посетителей.

С наглядным примером того, что мы собираемся сделать, можно ознакомиться, кликнув по ссылке .

Перед тем, как начать создание jquery слайдера для сайта, Вам потребуется скачать архив с файлами, которые будут использоваться в этом уроке:

Затем, их нужно распаковать в удобное для Вас место.

Из данного архива, нам потребуется только три файла:

/wp-content/uploads/images/bg_direction_nav.png

flexslider.CSS

Jquery.flexslider-min.js

Это основные файлы, из которых и будет состоять наш jquery слайдер для WordPress.

Шаг 1 Установка файлов.

Первым шагом будет установка файлов слайдера, в активную тему оформления Вашего ресурса. Чтобы не запутаться в большом разнообразии существующих шаблонов, я буду использовать стандартную тему — Twenty Eleven . Данная тема, по умолчанию установлена на всех движках WordPress ( как установить шаблон на WordPress ).

В папке inc , мы создаём новую папку и называем её — Slider . Внутри Slider , нам необходимо создать ещё одну с названием — js .

Теперь, возвращаемся к нашим скачанным файлам. Берём папку images и закидываем в Slider , а Jquery.flexslider-min.js в папку — js . Затем, открываем файл flexslider.CSS и копируем его содержимое. Далее, в Вашей теме оформления находим файл style.css , открываем и в самом низу вставляем ранее скопированные данные. Не забываем сохраняться.

Возвращаемся в папку Slider и создаём внутри неё два новых файла:

slider.php — создаёт шаблон и загружает файлы слайдера для сайта на WordPress.

slider_post_type.php — задаёт тип выводимых сообщений.

В итоге, содержимое папки Slider должно быть следующим:

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

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

Они будут загружать два новых PHP , которые мы создали.

Шаг 2 Типы пользовательских записей для JQuery слайдера.

В этом шаге мы будем создавать тип пользовательской записи, для нашего jquery слайдера.

Откройте файл slider_post_type.php и вставьте следующий код:

<?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. Change to 6 and it's below posts. 11 and it's below media, etc.
            'menu_icon'         => get_template_directory_uri() . '/inc/slider/images/icon.png',
            'taxonomies'        => $taxonomies
        );
        register_post_type('slides',$post_type_args);
    }
    add_action('init', 'register_slides_posttype');

Следом, добавляем ещё один. Он создаст meta_box для URL связи слайда и статьи:

// 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);
            }
        }
    }

Если, Вы всё сделали правильно, то в админке WordPress появиться новый раздел – « Slides ». Кликните по нему и выберете – « Add New Slide »:

Вашему взору откроется созданный пользовательский тип записи:

Шаг 3 Загрузка файлов Slider.

Теперь, мы должны создать сценарий для взаимодействия слайдера со стилями CSS .

Откройте файл slider.php и добавьте следующий код:

<?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' );

Здесь, есть ещё один момент, который нужно учесть. Чтобы на Вашем слайдере отображались стрелки навигации, нужно открыть файл style.css и в ранее скопированных туда стилях отыскать строчку:

background: url(/wp-content/uploads/images/bg_direction_nav.png)

В скобочках укажите путь до картинки, которая находится в папке images .

Шаг 4 Инициализация слайдера для сайта.

Для распознавания < head> jquery слайдера ниже в slider.php , добавляем ещё один код:

// 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' );

В этом коде можно немного поэкспериментировать, заменив fade на slide , а horizontal на vertical . Ваш слайдер будет прокручиваться снизу вверх.

Шаг 5 Создание шаблона jquery слайдера.

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

Всё в том же slider.php , дописываем последний кусок кода:

// 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 Установка и настройка слайдера для WordPress.

Для отображения слайдера в нужном месте Вашего ресурса, мы будем использовать строчку:

<?php echo wptuts_slider_template(); ?>

Например, если Вы захотите вывести слайдер под заголовком на главной странице, то нужно открыть файл index.php и под get_header (); ?> вставить указанную выше строчку.

Если Вам потребуется разместить слайдер непосредственно в одной из статей, то здесь на помощь придёт Short Code .

Откройте файл functions.php Вашей темы оформления и в самом низу добавьте новую функцию:

// Slider Shortcode
    function wptuts_slider_shortcode() {
        ob_start();
        wptuts_slider_template();
        $slider = ob_get_clean();
        return $slider;
    }
    add_shortcode( 'slider', 'wptuts_slider_shortcode' );

Теперь, чтобы добавить jquery слайдер в статье, достаточно использовать короткий номер — [slider] .

Шаг 7 Вставка изображений с слайдер.

Здесь, всё проще пареной репы. Заходите в админку => Slider => Add New Slide ». В пустой строчке, вписываете ссылку на тот материал, куда будут попадать посетители при клике по слайду.

В правом нижнем углу, Выбираете — Задать миниатюру :

Затем, как и в случае со статьями загружаете необходимую картинку и внизу, выбираете – Использовать как миниатюру :

Далее, опубликовываете и всё, изображение в слайдере.

На этом наша миссия выполнена. Мы создали jquery слайдер для сайта и заставили его работать.

Расскажите друзья, а у Вас получилось создать слайдер?

На сегодня это всё.

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

До новых статей…

С уважением, Денис Черников!