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


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


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

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

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

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

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

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

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

 

Файлы jquery слайдера

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

 

слайдер для сайта

 

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

 

  • 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(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 слайдер

 

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

 

jquery слайдеры

 

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

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

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

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

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

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

 

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




97 комментариевА что думаете Вы?

  1. Александр Красильный

    Недавно я знакомился с библиотекой jQuery, но на практике пока еще не применял. В будущем попробую Ваш метод для создания слайдера на своем сайте. Спасибо за статью Денис!

    Если возвратиться немного к истории, то эту JavaScript библиотеку воплотил в жизнь один талантливый программист по имени Джон Резиг. Тем самым он улучшил взаимодействие между JavaScript и HTML.

    [Ответить]

    Денис Черников ответил:

    Да, Александр, Вы правы! Когда Джон был в юном возрасте, папа подарил ему учебник по HTML, тем самым заложив в нём фундамент благодаря которому появилась любимая нами JQuery.

    [Ответить]

  2. Валерий

    Если шаблон не поддерживает слайды, а хочется ... то интересно...надо будет протестить...с какой версии wp работает?

    [Ответить]

    Денис Черников ответил:

    Это должно работать во всех шаблонах, Вы ведь с ноля всё делаете!

    [Ответить]

    Валерий ответил:

    У меня есть один старый блог на строительную тематику там wp 2.9 (не доходят руки обновиться) да и шаблон там старенький. Слайдер оживил бы блог. Надо заняться.

    [Ответить]

    Денис Черников ответил:

    Не получиться, слайдер работает с 3.0 и дальше!

    [Ответить]

    Константин ответил:

    Но если взять только jQuery-плагин и проявить смекалку, то получиться. Я уже flexslider без этого кода ставил в тему.

    [Ответить]

  3. Сергей

    Интересно, сегодня попробую поставить себе. Надеюсь сильно не повлияет на время загрузки сайта. Спасибо

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Сергей! Попробуйте, Вам понравиться!

    [Ответить]

  4. Людмила

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

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Людмила! Кодом намного удобнее, хотя для новичков будет немного сложновато.

    [Ответить]

  5. Юлия

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

    [Ответить]

    Денис Черников ответил:

    Обновление WordPress не влияет на шаблон!

    [Ответить]

    Юлия ответил:

    Я это знаю, а обновления шаблона повлияют на вставленные коды?

    [Ответить]

    Денис Черников ответил:

    Точно не скажу. Я их не обновлял ни разу!

    [Ответить]

    Виктор ответил:

    Обновления темы повлияют почти наверняка. Я на своем блоге писал недавно как запретить обновления темы как раз для подобных случаев

    [Ответить]

    Виктор ответил:

    Если мы уже вставляли содержимое flexslider.css в основной файл стилей темы, зачем в коде мы его еще раз привязываем?

    wp_enqueue_style ( 'flex-style', get_template_directory_uri () . '/inc/slider/css/flexslider.css' );

    [Ответить]

    Олег ответил:

    Тут как повезет. У меня после обновления нарушился HTML код в блоке подписки под статьями. Не критично, но произошло это именно после обновления. Причем предыдущие обновления проходили нормально.

    [Ответить]

    Денис Черников ответил:

    А как происходило обновление, вручную или на автомате?

    [Ответить]

  6. Ольга

    Хотелось бы слайдер поставить, но пока не рискну. Пользуюсь темой Twenty Ten. Там ведь в шапке как-то можно настроить смену картинок, но я не нашла эту настройку.

    Спасибо за статью, когда побольше освоюсь, попробую слайдер вставить.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Ольга! Там меняются картинки только при переходе по страницам и статьям, а так, они не прокручиваются.

    [Ответить]

  7. Людмила Вялкова

    У многих видела слайдеры, но как их делать не знала. С удовольствием бы и у себя на сайте поставила. Надо будет выбрать время, и разобраться... Спасибо, Денис, что объяснили, как это сделать. Еще вернусь как-нибудь к Вашей статье.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Людмила! Не у всех сделаны слайдеры таким способом.Некоторые просто плагин ставят, но я не сторонник этого. Зачем лишняя нагрузка сайту.

    [Ответить]

  8. Сергей

    Здравствуйте Денис. Поставил на локалке ваш слайдер, почему то нет пункта «задать миниатюру» в админке, всё отображается как и у вас на картинках, кроме этого пункта. Хотел бы у вас поинтересоваться, вы не знаете прочему? Всё сделал по вашей инструкции, не пойму почему так. Подскажите пожалуйста, если знаете, как это исправить?

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Сергей! Да у меня есть решение Вашей проблемы, откройте файл functions.php и установите в конце строчку add_theme_support ('post-thumbnails');

    [Ответить]

  9. Сергей

    Всё заработало, ура! Спасибо большое Денис!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Сергей! По другому и быть не могло, всё проверено и отстрелено. Обращайтесь!

    [Ответить]

  10. Aleksandra

    Для интереса проверила и как не странно получилось сразу. Сразу захотелось установить слайдер и карусель как на http: //themeforest.net/item/local-news-wp-news-theme-with-mobile-version/full_screen_preview/2945886 , но к большому сожалению таких плагинов я не нашла.

    Но все равно Вам большое спасибо!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Александра! В ближайшее время возможно и с каруселью разберёмся! Следите за блогом!

    [Ответить]

  11. Алена

    Денис, Добрый день!

    После того как я произвожу изменения в файле functions.php, вставляя код, при обновлении сайта, у меня получается только вот эта строчка,

    Warning: require (/home/myagk725/domains/detalitruboprovoda.ru/public_html/wp-content/themes/twentyeleven/inc/slider/slider_post_type.php) [function.require]: failed to open stream: No such file or directory in /home/myagk725/domains/detalitruboprovoda.ru/public_html/wp-content/themes/twentyeleven/functions.php on line 617

    Fatal error: require () [function.require]: Failed opening required '/home/myagk725/domains/detalitruboprovoda.ru/public_html/wp-content/themes/twentyeleven/inc/slider/slider_post_type.php' (include_path='.:/usr/local/lib/php') in /home/myagk725/domains/detalitruboprovoda.ru/public_html/wp-content/themes/twentyeleven/functions.php on line 617

    Что я могла сделать не так?

    [Ответить]

    Денис Черников ответил:

    Вы могли сделать всё что угодно! Я не вижу и не знаю что Вы там делаете. Будьте внимательнее! Чётко следуя инструкции всё должно работать хорошо!

    [Ответить]

    Алена ответил:

    Все решила, заработало, проблема была в том, что папка slider была написана с большой буквы...

    [Ответить]

    Денис Черников ответил:

    Вот видите! Я ведь не могу этого увидеть! Рад, что всё у Вас получилось!

    [Ответить]

    Виктор ответил:

    Ну я кстати о том же — исправьте пожалуйста в тексте статьи на маленькую букву — она наверняка не единственная, кто ошибся

    [Ответить]

  12. Алена

    Добрый день!

    Нужно ли подключать библиотеку jQuery предварительно для создания и корректной работы слайдера? Действовала по инструкции, появилось меню слайдера, но прикрепление миниатюры по другому оформлено в админке и слайд не работает...

    [Ответить]

    Денис Черников ответил:

    В любой момент можно подключить! WordPress один единственный в своём роде, не может быть по-другому в админке, Вы или что-то упустили или чего-то не поняли (не доделали).

    [Ответить]

  13. Алена

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

    [Ответить]

    Денис Черников ответил:

    Вы в файле функций видимо или не так вставляете код или кодировку не соблюдаете UTF-8.

    [Ответить]

  14. Алена

    при заполнении файла slider.php, самым первым кодом, есть строчка '/inc/slider/css/flexslider.css' ); у меня нет в корне такой папки css и ее содержимого flexslider.css может ли из за этого не отображаться слайдер на сайте?

    [Ответить]

  15. Алена

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

    [Ответить]

    Денис Черников ответил:

    Нужно скрипт выводящий слайдер прописать выше или ниже переменных отвечающих в Вашей теме за вывод меню!

    [Ответить]

  16. Алена

    А что следует прописать в файле slider.php что б слайдер прокручивался шашечками по диагонали?

    [Ответить]

    Денис Черников ответил:

    Это уже Вам нужно не у меня спрашивать, а изучать HTML и CSS! Или искать готовое решение в Интернете.

    [Ответить]

  17. Елена

    После добавления первого кода в файл functions.php сайт исчезает. Если поместить код после закрывающегося тега, то наверху сайта просто появляется надпись кода. Как быть, почему не получается?

    [Ответить]

    Денис Черников ответил:

    Елена, значит Вы что-то упускаете. Инструкция написана чётко и лично мной проверена. Будьте внимательней!

    [Ответить]

  18. Елена

    Денис, я толком не успеваю что-то сделать, потому, что при добавлении кода в файл functions.php, описано у Вас так:

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

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

    [Ответить]

    Денис Черников ответил:

    Вы добавляете до < ?PHP или после. Может Вы кодировку не соблюдаете? Должно быть UTF-8.

    [Ответить]

    Елена ответил:

    Кодировка UTF-8, Если вставляю до < ?PHP тега или после его закрытия появляется надпись кода над шапкой сайта. Если код вставляю внутри, сайт пропадает, просто белый экран.

    [Ответить]

    Денис Черников ответил:

    Попробуйте после всего прописать код отдельно и заключить его в < ?PHP ?>

    [Ответить]

  19. Максим

    Здравствуйте ,делал всё как описано ,в итоге теперь,когда захожу на сайт появляется белый экран и надпись | Thanks to

    [Ответить]

    Денис Черников ответил:

    Значит Вы не так сделали. У меня этот слайдер стоял несколько месяцев и всё было реализовано именно так, как написано в посте. Проверяйте все свои действия!

    [Ответить]

  20. Елена

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Елена ответил:

    Спасибо.

    [Ответить]

    Денис Черников ответил:

    Не за что!

    [Ответить]

  21. Мария

    Здравствуйте Денис! Спасибо Вам за детальный урок. Вот только я установила все как написано, а картинки не появляются. в коде прописываются на странице но не выводятся. В чем может быть проблема?

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Мария!

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

    [Ответить]

    Мария ответил:

    Денис, это я уловила:)...

    ошибку исправить помог сайт:

    там есть альтернатива.

    Еще раз спасибо большое

    [Ответить]

    Денис Черников ответил:

    Обращайтесь! Я всегда на связи.

    [Ответить]

  22. Evnikian

    Вопрос такой: после создания слайда что нажимать в админке «Сохранить» или «Опубликовать»? Пробовал и то и то, в обоих случаях идет какой то конфликт с WP Warning: Cannot modify header information — headers already sent by (output started at Z:\home\localhost\www\web\wp-content\themes\andreas091\functions.php:1) in Z:\home\localhost\www\web\wp-includes\pluggable.php on line 881

    Десять раз все проверил. Добавление миниатюры тоже выходит с ошибкой.

    [Ответить]

    Денис Черников ответил:

    Я когда делал просто сохранял. Вы на локалке видимо делаете?

    [Ответить]

    Evnikian ответил:

    Да на локалке...Условно вроде бы слайд работает, но из конфликтных ошибок удобство работы сразу резко уменьшается. То есть допустим я создал слайд, нажал сохранить, тут же вылетает белый экран и ошибка, приходится в браузере возвращаться на шаг назад, обновлять страницу. Смотришь-вроде все гуд. Но опять же миниатюры не вставляются в своем исходом размере, из за чего вся картинка размазывается по всему слайду.

    [Ответить]

    Денис Черников ответил:

    Сейчас точно не вспомню, но там были заморочки с размером картинок. Я их под один размер все подгонял. Я делал всё на своём сайте, причём сразу в онлайне.

    [Ответить]

  23. Cliff

    День добрый, Денис!

    Не могли бы помочь советом?

    есть сайт http: //ikeapinsk.by/

    на главной слайдер (стандартно в теме присутствует).

    Я делаю Главную страницу статической (создав страничку). но тогда не отображается слайдер.

    Как вывести его только на Главную статическую страницу?

    заранее спасибо)

    [Ответить]

    Денис Черников ответил:

    Здравствуйте! Попробуйте найти в файлах темы php код отвечающий за вывод слайдера и просто его удалите в ненужных местах оставив лишь для главной странице.

    [Ответить]

  24. Никита

    Обожаю wordpress.

    Мой сайт тоже на этом движке.

    И времени на изучение много не уходит.

    [Ответить]

  25. Владислав

    Здравствуйте! как я понял во втором шаге и первый и второй код надо вставлять в slider_post_type.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' );

    что не так?

    [Ответить]

    Денис Черников ответил:

    Да, Вы всё верно поняли!Во-первых Вы сначала пройдите через все шаги, а во-вторых возможно ВЫ не правильно написали slider_post_type.php

    [Ответить]

    Владислав ответил:

    Все правильно написал, как у вас показано! Мне нет смысла проходить урок до конца, ведь раздела «Slides» в панели администратора нет и пишет — / Create Slider Post Type require ( get_template_directory () . '/inc/slider/slider_post_type.php' ); // Create Slider require ( get_template_directory () . '/inc/slider/slider.php' );

    [Ответить]

    Денис Черников ответил:

    Владислав, я Вам верю и прекрасно Вас понимаю, но у меня этот слайдер 4 месяца стоял и нормально функционировал. Всё было проделано именно так, как я описал в посте. Я не вижу, как и что Вы делаете, но все описанные шаги чёткие и написаны без ошибочно, проверены и отстрелены. Смотрите внимательней! Может кодировку не поменяли, может скопировали криво, а может какие переменные конфликтуют. Я когда первый раз делал, тупил нереально, а потом сам смеялся над собой! То блин запятую забудешь влипить, то кавычки пропустишь!))) Судя по ошибке видимо что-то с directory, как будто, что то не там прописали или не туда вставили. Экспериментируйте!

    [Ответить]

  26. Владислав

    Подскажите это правильный путь к папе «inc» — domains/oshpar.ru/wp-content/themes/zeesynergie/includes ?

    [Ответить]

    Денис Черников ответил:

    Нет, этот путь не верен!Во-первых все уникальные пути к файлам расположенным на реальном сервере начинаются с доменного имени. Пример — http: //sozdaiblog.ru.

    Во-вторых, откуда у Вас в теме оформления папка includes?

    [Ответить]

    Владислав ответил:

    Я нахожусь на хостинге джино и в начальной папке находятся domains,backupslogs tmp.

    Она там и была, в теме есть какойто слайдер, но он мне не подходит!

    Подскажите как правильно?

    [Ответить]

    Денис Черников ответил:

    Папка «inc» создаётся в теме, там, где все основные файлы силей, хэдер сингл и т.д., а потом оттуда и пляшете дальше. У меня тоже джино и domains есть, но путь нужно всегда указывать с доменного имени с http://.

    [Ответить]

    Владислав ответил:

    искал но ненашел, попытался переименовать существующий — Не могу переименовать объект, новое название содержит недопустимые символы. вы можете показать свой путь, т.е. куда вы устанавливали! а то мне теперь ничего непонятно)

    [Ответить]

    Денис Черников ответил:

    Вот так пишется путь — sozdaiblog.ru/wp-content/themes/моя тема/inc

    Владислав ответил:

    А у меня так domains/oshpar.ru/wp-content/themes/zeesynergie, а там папки — Documentation, images, includes, ну и файлов куча. Папки inc нет, может иносторонний слайдер моя тема не поддерживает? или проблема в другом?

    вот адрес моего сайта http: //oshpar.ru/

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

    [Ответить]

    Денис Черников ответил:

    Папку inc нужно самому создавать!!!Вам нужно прописывать вот так — http: //ruoshpar.ru/wp-content/themes/zeesynergie/inc/и сам файл. На счёт полосы вспоминайте, что Вы делали и делайте обратные откаты!

    Владислав ответил:

    Похоже что то не так с темой или я не знаю... После редактирования functions.php у меня вылазеет вышеупомянутая ошибка, и в консоле не появляется раздел «Slides» Может есть другие способы установить слайдер?

    [Ответить]

    Денис Черников ответил:

    Способы другие есть! Нужно просто найти необходимый слайдер и спереть его себе. В видеокурсе за доллар я показываю, как забирать себе элементы чужих сайтов. Конечно со слайдером немного сложнее, но принцип тот же.

  27. Виктор

    Режется код в комментах. Автор, исправь вручную. Посетителям может помочь.

    [Ответить]

  28. Юрий

    Пусто, вообще! В админке ничего, весь код часа 4 уже шерстил и голый Вася! Версия WP 3.5.1, уже незнаю чего смотреть, сначало ошибки вылазили, код заново скопировал,так теперь ошибок нет, но и в админке 0, шоткод тоже пробовал на страницу поставить, так вот только он и появляется в квадратных скобках!)

    [Ответить]

    Денис Черников ответил:

    Значит Вы не правильно делаете. У меня этот слайдер месяца 4 работал. Смотрите внимательнее.

    [Ответить]

  29. Евгений

    Здравствуйте.

    Попытался реализовать описанное выше на WP версия 3.6 (русифицированный, на локальном компьютере). ШАГ 2. дошел до конца. В результате в WP появился пункт Slides а в нем пункты Slides и Add New Slide. Но после этого в консоли поменялась кодировка с русской на вот эту: Статус: Черновик и выдает замечание —

    Warning: call_user_func_array () [function.call-user-func-array]: First argument is expected to be a valid callback, 'wp_add_slidelink_2_meta_box' was given in Z:\home\testsait.ru\www\wp-includes\plugin.php on line 406

    В чем ошибка, прошу вас помочь разобраться.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Евгений!

    Возможно, что Вы не соблюдаете кодировку (utf-8) в редактируемых файлах для слайдера. Заочно я помочь не могу, ведь я не знаю всю правильность Ваших действий. У меня всё работало без проблем.

    [Ответить]

  30. Евгений

    Здравствуйте.

    Какой конкретно путь нужно указать в

    background: url (images/bg_direction_nav.png), чтобы появились стрелочки. Файл bg_direction_nav.png находится в testsait.ru\www\wp_content\themes\twentyeleven\images\bg_direction_nav.png

    Спасибо.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте!

    background: url (/www/wp_content/themes/twentyeleven/images/bg_direction_nav.png ).

    Как я понял Вы на локалке делаете, там другие пути нежели на рабочем сервере. Там перед /www/ может потребоваться точка. Пробуйте разные варианты, слешы и точки или убрать всё до www.

    [Ответить]

  31. Павел

    откуда у вас в имейдже /inc/slider/images/icon.png ??

    Денис, в менюшке нет ничего? вроде все делал чин чином. Только у меня папки inc нет.

    [Ответить]

    Денис Черников ответил:

    Так её нужно создать!У меня такой слайдер 4 месяца стоял и всё было сделано по этому примеру!

    [Ответить]

  32. Дмитрий

    Спасибо за подробную инструкцию, всё работает!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Рад что Вы справились!

    [Ответить]

  33. Андрей

    В данном слайдере есть возможность подписывать картинки и ставить на них ссылки? посмотрел демо версию, слайдер норм, но картинки там не подписаны...

    [Ответить]

    Денис Черников ответил:

    Можно,но нужно верстать!

    [Ответить]

  34. Андрей

    А что у тебя за слайдер стоит? это плагин или код?

    [Ответить]

    Денис Черников ответил:

    Чистый код!

    [Ответить]

  35. Захар

    Добрый день! Спасибо за столь подробное описание, но я застопорился в том месте где должен был появится пункт в админке, переделывал уже несколько раз, все равно безрезультатно...Тема Themify base... WP 4.0

    В чем может быть причина?

    спасибо за помощь!

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Захар! Я не могу Вам заочно дать совет, ведь я не вижу, как и что Вы делаете! Может Вы что-то пропускаете и сами этого не замечаете! В посте всё разложено по полочкам, раньше у меня этот слайдер 3 месяца стоял. Всё должно появляться и работать! Тут дело даже не в теме оформления!

    [Ответить]

Оставить комментарий!

Вверх