Уроки по программированию

Как сделать слайдер на wordpress? (Контент слайдер)

Как сделать слайдер на wordpress? (Контент слайдер). При создание сайта разработчики часто сталкиваются со слайдерами и их размещением. Существует масса плагинов под WordPress используя которые можно разместить слайдер с картинками, с новостями и прочим материалом, но очень мало slider-плагинов, которые можно скачать и использовать под свой дизайн. В этом уроке я хочу показать как можно легко создать слайдер контента для своего сайта.

Для создания слайдер-контента я буду использовать bxslider скачать его можно с офицального сайта http://bxslider.com/ там же можно посмотреть все возможности, которыми он обладает.

Этапы которые нужно проделать для подключения

  1. Подключить скрипты и стили в файле header.php
  2. Вставить код слайдера в свой шаблон.

Первый этап

Подключение не много отличается от того что дано на официальном сайте у меня по их примеру не получилось подключить слайдер.

<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

Комментарии к статье

  • Аватарка 16.10.2013
    Ответить Черятьева Наталья

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

    • Аватарка 17.10.2013

      Рад за вас. Оформление слайдера сводится к стилям css. Вы можете оформить его как вам нужно.

  • Аватарка 17.10.2013
    Ответить Черятьева Наталья

    css знаю на 5, проблем с этим нет, но с функциями вордпресс не знакома. Вопрос — с функцией «query_posts» можно вывести несколько слайдеров на странице? Спрашиваю потому, как нашла в интернете еще одну функцию «WP_Query» которая не может повторяться на странице, а значит с её помощью можно только один слайдер сделать…
    Получилось вывести популярные новости в слайдере вот таким методом:

      have_posts()) : $popular->the_post(); ?>

    • Аватарка 17.10.2013

      Да можно вывести сколько угодно слайдеров и где угодно по сути wp_query и query_posts по функционалу схожи поэтому можете применять тот вариант, который вы описали выше и попробовать вывести второй слайдер. Вместо переменной $popular нужно будет подставить другую переменную к примеру $most_comment и вывести слайдер самые комментируемые либо любую другую переменную которую пожелаете. Я пользуюсь такой конструкцией допустим запрос 1 на странице я ставлю далее делаю очистку с помощью и закрываю может что-то из этого лишнее, но у меня всегда срабатывает для второго запроса соответственно ставлю остальное все по той же схеме

  • Аватарка 15.06.2014
    Ответить Игорь Войтенко

    А где указывать медиа файлы для слайдера то?

  • Аватарка 21.09.2015
    Ответить Дмитрий В

    Здравствуйте.
    Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Нашел одну доску объявлений с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.

  • Аватарка 14.03.2022
    Ответить Сергей

    Подскажите почему если сайт на bootstrap то выводит не как слайдер , а как фото стоящие вертикально в ряд.

    • Аватарка 14.03.2022

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *