フクロウカルーセルを使用して「最近の投稿」カルーセルを作成する方法

ご存知のように、WordPressには「最近の投稿」ウィジェットが付属しており、最新の投稿のタイトルをサイドバーにプルして、投稿全体にリンクします。 これに伴う問題は、最近の投稿ウィジェットが非常に制限されていることです。 もう少しエレガントでもう少し機能的なものが必要な場合はどうなりますか？ たとえば、注目の画像と抜粋をカスタム投稿タイプから取得したい場合はどうでしょうか。 AdvancedRecentPostsやRecentPostsWidgetExtendedなど、これらのことを行うプラグインは間違いなくあります。 実際、投稿を表示するための優れたプラグインはたくさんあり、テーマに合わせてスタイルを設定できるプラグインもあります。

ただし、投稿のクエリは実際には非常に簡単なことであり、DIYルートを使用すると、ほとんどの場合、必要なものを正確に取得し、カルーセルがテーマに完全に一致するようにスタイル設定されることが保証されます。

この記事では、人気のあるOwlCarouselJavaScriptライブラリを使用して「最近の投稿」カルーセルを作成する方法を紹介します。

始めましょう。 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がある場合は、テーマにすでにキューに入れられているはずです。 ただし、少なくとも2つの新しいファイル（ 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 ============ -->


終了すると、投稿の注目の画像、タイトル、抜粋、および完全なブログ投稿にリンクする[その他]ボタンを表示するカルーセルが表示されます。
		



		
		
より多くのデザインのヒントが必要ですか？ レイアウトを購読する
		
週に1回、最新のデザインとWordPressコンテンツを受信トレイに直接送信します。
		

		
		はい、お願いします！