Как сделать слайдер на wordpress? (Контент слайдер). При создание сайта разработчики часто сталкиваются со слайдерами и их размещением. Существует масса плагинов под WordPress используя которые можно разместить слайдер с картинками, с новостями и прочим материалом, но очень мало slider-плагинов, которые можно скачать и использовать под свой дизайн. В этом уроке я хочу показать как можно легко создать слайдер контента для своего сайта.
Для создания слайдер-контента я буду использовать bxslider скачать его можно с офицального сайта http://bxslider.com/ там же можно посмотреть все возможности, которыми он обладает.
Этапы которые нужно проделать для подключения
- Подключить скрипты и стили в файле header.php
- Вставить код слайдера в свой шаблон.
Первый этап
Подключение не много отличается от того что дано на официальном сайте у меня по их примеру не получилось подключить слайдер.
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="<?php echo get_template_directory_uri(); ?>/css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.slider1').bxSlider({
slideWidth: 150,//ширина слайдера
maxSlides: 5,//максимальное количество слайдов
moveSlides: 1,//количество слайдов для смещения при анимации
auto: true,//Автоматическая смена слайдов
autoStart: true,//автоматический старт
slideMargin: 10//отступ между слайдами
});
});
</script>
Фрагмент кода:
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.min.js"></script>
В этом фрагменте указываем путь до скриптов и стилей, а именно до jquery.bxslider.min.js и jquery.bxslider.css у меня файл jquery.bxslider.min.js лежит в папке js которая находится в папке с шаблоном поэтому я указал js в вашем случае это может быть любая другая папка и соответственно jquery.bxslider.css находится в папке css
Второй этап
Найдите то место в шаблоне где хотели бы выводить свой слайдер и прописываете следующий код
<!--BXSLIDER-->
<div class="slider1">
<?php
$args = array('cat'=>'1,2','showposts' => 10,'order' => 'DESC' );
query_posts($args);
while ( have_posts() ) : the_post();
?>
<div class="slide">
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
<?php endwhile; wp_reset_query(); ?>
<?php $wp_query1 = $temp_query1; ?>
</div>
Здесь все настройки по выводу постов берутся из настроек аргумента это стандартная настройка wordpress. В данном случае ‘showposts’ => 10 означает выводить 10 постов в слайдер, а ‘order’ => ‘DESC’ означает сортировку по убыванию. Сюда же можно добавить и выбор категории и дату вообщем все параметры которые можно использовать в запросе query_posts. К примеру чтобы еще добавить параметр категории можно добавить cat. В следующем коде я буду выбирать все посты из 5,6,7 категории.
$args = array('cat'=>'5,6,7','showposts' => 10,'order' => 'DESC' );
При необходимости можно также выводить заголовки постов для этого надо добавить
<!--BXSLIDER-->
<div class="slider1">
<?php
$args = array('cat'=>'1,2','showposts' => 10,'order' => 'DESC' );
query_posts($args);
while ( have_posts() ) : the_post();
?>
<div class="slide">
<a href="<?php the_permalink() ?>"><?php the_title();?></a>
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
<?php endwhile; wp_reset_query(); ?>
<?php $wp_query1 = $temp_query1; ?>
</div>
Результат
Спасибо большое за урок! Очень помогли! Так как я новичек в wordpress и пытаюсь создать на нем сайт впервые, стараюсь использовать только самые необходимые плагины, чтобы не нагружать движок. Слайдер хотела установить тоже без плагина и благодаря вам — все получилось!
Рад за вас. Оформление слайдера сводится к стилям css. Вы можете оформить его как вам нужно.
css знаю на 5, проблем с этим нет, но с функциями вордпресс не знакома. Вопрос — с функцией «query_posts» можно вывести несколько слайдеров на странице? Спрашиваю потому, как нашла в интернете еще одну функцию «WP_Query» которая не может повторяться на странице, а значит с её помощью можно только один слайдер сделать…
Получилось вывести популярные новости в слайдере вот таким методом:
have_posts()) : $popular->the_post(); ?>
Да можно вывести сколько угодно слайдеров и где угодно по сути wp_query и query_posts по функционалу схожи поэтому можете применять тот вариант, который вы описали выше и попробовать вывести второй слайдер. Вместо переменной $popular нужно будет подставить другую переменную к примеру $most_comment и вывести слайдер самые комментируемые либо любую другую переменную которую пожелаете. Я пользуюсь такой конструкцией допустим запрос 1 на странице я ставлю далее делаю очистку с помощью и закрываю может что-то из этого лишнее, но у меня всегда срабатывает для второго запроса соответственно ставлю остальное все по той же схеме
А где указывать медиа файлы для слайдера то?
Здравствуйте.
Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Нашел одну доску объявлений с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.
Подскажите почему если сайт на bootstrap то выводит не как слайдер , а как фото стоящие вертикально в ряд.
Скорее всего нне хватает jquery, либо конфликт скриптов. Это можно увидеть через консоль