Как создать карусель «Последние публикации» с помощью Owl Carousel

Как многие из вас знают, WordPress поставляется с виджетом «Последние сообщения», который выводит заголовки ваших последних сообщений на боковую панель и связывает их с полным сообщением. Проблема в том, что виджет «Последние сообщения» очень ограничен. Что, если вам нужно что-то более элегантное и с большей функциональностью? Например, что, если вы хотите получить избранное изображение и отрывок из пользовательского типа сообщения? Определенно есть некоторые плагины, которые будут делать эти вещи, такие как Advanced Recent Posts или Recent Posts Widget Extended. На самом деле, существует множество отличных плагинов для отображения сообщений, а некоторые даже позволяют вам стилизовать их в соответствии с вашей темой.

Тем не менее, запрашивать сообщения на самом деле довольно просто, и выбор пути «сделай сам» почти всегда гарантирует, что вы получите именно то, что хотите, и что ваша карусель будет оформлена в соответствии с вашей темой.

В этой статье я покажу вам, как создать карусель «Последние сообщения», используя популярную библиотеку JavaScript Owl Carousel.

Давайте начнем. Если вы просматриваете примеры на сайте Owl Carousel, первое, что вы заметите, это то, что их примеры написаны для простого HTML-сайта. Чтобы заставить Owl Carousel работать в WordPress, вам придется действовать немного по-другому.

Во-первых, вам нужно скачать файлы с сайта Owl Carousel или разветвить их с Github. Когда у вас есть файлы локально, вы захотите добавить основной файл CSS в каталог /css/ вашей темы. Это файл owl.carousel.min.css. Там есть еще один файл CSS для темы, и это owl.theme.default.min.css . Это необязательный файл, поэтому я не буду использовать его в этом уроке.

После загрузки в вашу тему путь к файлу должен выглядеть примерно так:
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css .

Вам также необходимо включить файлы JS

Если в вашей дочерней теме еще нет папки /js/ , создайте ее прямо сейчас. Затем добавьте owl.carousel.min.js в каталог /js/ вашей темы, чтобы он выглядел примерно так: /wp-content/themes/your-theme/js/owl.carousel.min.js .

Затем вам нужно добавить jQuery, который инициализирует вашу карусель и управляет ею.

Этот код настроит ваши конкретные потребности карусели. Если у вас еще нет JS-файла, управляющего другими конфигурациями скриптов, создайте файл settings.js и поместите его в тот же каталог /js/ , что и выше. Это должно выглядеть примерно так: /wp-content/themes/your-theme/js/settings.js .

Затем вы добавите следующий код в тот же файл JavaScript и сохраните его. Этот код вызывает карусель и сообщает ей, сколько элементов использовать, следует ли зацикливаться, какую навигацию использовать и как реагировать на разные размеры устройств.

(function($) {
"use strict";

$(document).ready(function() {

$('#blog .owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
dots: false,
nav: true,
navText: ['<i class="fa fa-arrow-left fa-2x"></i>','<i class="fa fa-arrow-right fa-2x"></i>'], //Note, if you are not using Font Awesome in your theme, you can change this to Previous & Next
responsive:{
        0:{
            items:1,
            //nav:true
        },
        767:{
            items:2,
            //nav:false
        },
    }
});
})
})(jQuery);


Вам нужно будет зарегистрироваться и поставить в очередь любые новые добавленные файлы. Если у вас уже есть файл settings.js или custom.js , он уже должен стоять в очереди в вашей теме. Однако, поскольку вы добавляете по крайней мере два новых файла ( owl.carousel.min.css и owl.carousel.min.js ), вам нужно будет открыть файл functions.php вашей темы и правильно добавить их в свою тему. Это должно выглядеть примерно так:
		


add_action( 'wp_enqueue_scripts', 'yourtheme_scripts');
function yourtheme_scripts(){
wp_enqueue_script('owl.carousel', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), '1.0.0', true );
wp_enqueue_script('settings', get_template_directory_uri() . '/js/settings.js', array(), '1.0.0', true );
}

function yourtheme_styles() {
wp_register_style('owl-carousel', get_template_directory_uri() .'/css/owl.carousel.css', array(), null, 'all' );
wp_enqueue_style( 'owl-carousel' );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_styles' );


HTML и PHP, которые будут отображать карусель на вашей странице.
Этот раздел может варьироваться в зависимости от того, как настроена ваша тема и где вы хотите разместить карусель. Я собираюсь использовать собственный шаблон, который я создал с помощью Bootstrap. Ваш первый шаг здесь — определить, где вы хотите, чтобы карусель отображалась. Если вы хотите, чтобы он был на вашей домашней странице, ищите home.php или frontpage.php . Название варьируется от темы к теме, поэтому убедитесь, что вы понимаете структуру своей темы и редактируете правильный файл. Как только вы узнаете, какой файл редактировать, вы должны сделать его копию в своей дочерней теме и убедиться, что он находится в той же структуре каталогов. Например, если файл находится в каталоге с именем templates , убедитесь, что вы создали папку с именем templates в том же месте, что и ваша родительская тема.
		


Когда вы будете готовы к работе, вы можете добавить следующее в соответствующее место. В моем файле я добавил это в нижнюю часть моего frontpage.php , чтобы он отображался чуть выше нижнего колонтитула моего сайта.
<!-- ============ BLOG CAROUSEL START ============ -->
<section id="blog">
  <div class="container">
     <div class="row"> <!-- this is the carousel’s header row -->
        <div class="col-sm-12 text-center">
           <h5>Recent posts</h5>
           <h1>Blog</h1>
        </div>
     </div>
     <div class="row"> <!-- this row starts the carousel-->
        <div class="col-sm-12">
           <div class="owl-carousel">
              <!-- query the posts to be displayed -->
              <?php $loop = new WP_Query(array('post_type' => 'post', 'posts_per_page' => -1, 'orderby'=> 'ASC')); //Note, you can change the post_type to a CPT and set the number to pull and order to display them in here. ?>
              <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                 <div class="recent-post"> <!-- I don’t have any unique css here, just needed to make sure every recent post gets wrapped as a block element.  However, you may want to add your own css here... -->
                    <?php
<a href="<?php print get_permalink($post->ID) ?>">
              <?php echo the_post_thumbnail(); ?></a>
              <h4><?php print get_the_title(); ?></h4>
              <?php print get_the_excerpt(); ?><br />
          <p><a class="btn btn-default" href="<?php print get_permalink($post->ID) ?>">More</a></p>
</div> <!-- End the Recent Post div -->
              <?php endwhile; ?>
           </div> <!-- End the Owl Carousel div -->
        </div> <!-- End the recent posts carousel row -->
        <div class="row"> <!-- start of new row for the link to the blog -->
           <div class="col-sm-12 text-center">
              <a href="blog.html" class="btn btn-primary">Read All Posts</a>
           </div>
        </div>
     </div> <!-- End blog button row -->
</section>  <!-- ============ RECENT POSTS CAROUSEL END ============ -->


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



		
		
Хотите больше советов по дизайну? Подпишитесь на макет
		
Раз в неделю мы будем присылать самый свежий дизайн и контент WordPress прямо на ваш почтовый ящик.
		

		
		Да, пожалуйста!