Статьи

Добавить NivoSlider с настраиваемым типом сообщения в тему WordPress

Примечание: этот пост устарел.

Сегодня я научу вас, как правильно включить jQuery NivoSlider в вашу тему WordPress, выполнив несколько простых шагов копирования / вставки. В рамках этого урока я покажу вам, как создать произвольный тип «слайдов», который мы будем использовать для получения всех «постов» для слайдера, однако вы можете легко изменить цикл, чтобы получать посты из определенного категория, тег… и т. д.

Шаг 1. Получите код от Dev7Studios

Прежде чем что-либо делать, вам, очевидно, придется загрузить последнюю версию Javascript и CSS для NivoSlider. Вы можете получить это у автора (dev7studios), щелкнув изображение ниже:

Шаг 2: добавьте CSS в файл Style.css

Затем вам нужно скопировать весь CSS, который вы только что скачали для Nivoslider, и вставить его в свой основной файл style.css, расположенный в папке вашей темы, куда вы добавляете слайдер изображения. Просто скопируйте и вставьте внизу своей таблицы стилей – после этого вы захотите вернуться назад, чтобы изменить ее стиль, как вы хотите.

Шаг 3. Добавьте Javascript для слайдера

Затем вы должны добавить Javascript, необходимый для работы слайдера. Вам нужно будет вызвать свой nivoslider js, который вы загрузили ранее из файла functions.php, а затем запустить скрипт в файле header.php.

а. Добавить JS в Functions.php

Добавьте в свой functions.php следующий код, который сначала получит основной JS-файл из Google API, а затем вызовет JS-файл nivoslider, который вы загрузили на шаге 1, и который должен быть добавлен в папку вашей темы в подпапке под названием «js».

// include jQuery

б. Запуск сценария

Затем вы захотите запустить скрипт, добавив следующий javascript в файл прямо перед тем, где будет находиться ваш слайдер (взгляните на все потрясающие параметры для слайдера на dev7studios и отредактируйте соответственно).

В качестве альтернативы (и лучший способ сделать это) было бы добавить это либо в начало вашего js-файла nivo, либо в новый js-файл и правильно поставить в очередь.

<script type="text/javascript"> jQuery(function($){ $(window).load(function() { $('#slider').nivoSlider(); }); }); </script>

Шаг 4. Добавьте в слайды пользовательский тип публикации и поддержку миниатюр

Чтобы добавить новый пользовательский тип сообщения под названием «слайды», просто вставьте следующий код в свой файл functions.php:

//Register post type for slider

Если в вашей теме ее еще нет, вы захотите добавить поддержку эскизов WP, сделайте это, вставив следующее в свой файл functions.php.

// activate post-image function add_theme_support( 'post-thumbnails' );

Шаг 5: Создайте и добавьте цикл для вашего слайдера

Теперь, когда у вас есть все js / css и вы создали свой собственный тип публикации для слайдов, вам нужно вызывать свои сообщения в любом месте, где вы хотите показать свой слайдер. Я уже создал для вас весь код, поэтому просто скопируйте и вставьте следующий цикл get_posts туда, где вы хотите, чтобы ваш слайдер появился.

<?php // get custom post type ==> slides global $post; $args = array( 'post_type' =>'slides', 'numberposts' => -1, 'orderby' => 'ASC' ); $slider_posts = get_posts($args); ?> <?php // show slider only if slides exist if($slider_posts) { ?> <div id="slider-wrap"> <div id="slider"> <?php // start the loop foreach($slider_posts as $post): setup_postdata($post); // get image $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'home-slide'); ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo $thumbnail[0]; ?>" width="" height="" title="<?php the_title(); ?>" /></a> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </div><!--/slider nivoSlider--> </div><!--/slider-wrap --><?php } ?>

Шаг 6. Добавьте файл single-slides.php в свою тему.

Как вы видите в цикле, я добавил ссылку на слайды, чтобы они могли перейти на страницу с содержимым, добавленным в редактор для этого слайда. По умолчанию WordPress будет использовать ваш файл single.php для демонстрации содержимого слайдов. Если вы хотите, чтобы страницы слайдов выглядели по-другому, вы можете сделать это, создав новый файл с именем single-slides.php и спроектировав его так, как вы хотите, чтобы страницы слайдов выглядели. Вы также можете полностью удалить ссылки, оставив только слайдер изображений 🙂

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Кнопка «Наверх»

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: