OWLカルーセルで最新記事から画像をスライダー表示する

「カルーセルができるJQueryプラグイン OWL Carousel は簡単便利！」という投稿はかなり人気があって、毎日誰かしら参照してくれているようです。

前回は小さい画像をいくつも並べるというパターンでしたが、今日はトップページなどで使える大きな画像を使ってみたいと思います。

構想：トップページに最新記事３記事の画像が自動的にスライダー表示させる

今のテーマだとちょっと合わないかもしれませんが、トップページに最新記事３つぐらいの大きめ画像をスライダーというかぐるぐる回るような感じのものを作ってみたいと思います。

こちらを参考にしました。

OWLカルーセル Auto Height

このblogの場合、一つめの画像をアイキャッチ的に大きな画像で指定してあるので「最新３記事の１つめの画像をトップページに３つ表示させてスライダー表示して見せる」ということにします。

また画像の上にカーソルを載せたときはタイトルを　titletip で表示して、クリックすればその記事にリンクできるようにします。

スタイルシートにOWLカルーセル用のクラスを追加する

子テーマのスタイルシート（style.css）にOWLカルーセル用のクラスを追加します。

OWLカルーセル Auto Height
のCSSタブのソースをこのサイトに合うようにちょっと修正して追加しました。

#owl-demo .owl-item div{
  padding:5px;
}
#owl-demo .owl-item img{
  display: block;
  width: 90%;
  height: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

修正したのは幅が100％だとバランスが悪いので90%にした部分です。

OWLカルーセルを使える環境を設定

カルーセルができるJQueryプラグイン OWL Carousel は簡単便利！の記事でOWLカルーセルを使える環境を設定します。

具体的には子テーマフォルダにowl-carouselフォルダを入れておくこと、です。

＊なんと、この記事を書いていて気づいたのですが、今までサーバーにこのフォルダをアップし忘れていました(><)。せっかく人気記事なのに、今まではWordPressのサンプルサイトがちゃんと動いていなかったようですごめんなさいm( _)m。いまはちゃんと動いています…

最新記事３つの画像をOWLカルーセルを使ってぐるぐるする部分をコーディング

OWLカルーセル Auto Height
のhtmlタブのソースにOWLカルーセルの環境を追記したり、少し変えたりしてみました。

<?php
// owlカルーセルで最新3記事をスライダーのようにぐるぐる表示する

                // OWLカルーセルでトップの３画像を表示する
                if(!$paged){
                    // １ページ目だけ表示する
?>
<?php /***** OWLカルーセルの環境設定 *****/?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="https://usortblog.com//wp-content/themes/twentyfourteen-ryus/owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="https://usortblog.com//wp-content/themes/twentyfourteen-ryus/owl-carousel/owl.theme.css">
 
 
<!-- Include js plugin -->
<script src="https://usortblog.com//wp-content/themes/twentyfourteen-ryus/owl-carousel/owl.carousel.js"></script>
<?php /***** OWLカルーセルの動作設定 *****/?>
<script>
$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
    autoPlay : 3000,
    stopOnHover : true,
    navigation:false,
    paginationSpeed : 1000,
    goToFirstSpeed : 2000,
    singleItem : true,
    autoHeight : true,
    transitionStyle:"fade" 
  });
 
});
</script>
<?php /***** 最新3記事の情報を保存 *****/?>
<?php
                    $count = 0;
                    $owlArray = array();
                    // src
                    while ( have_posts() ) : the_post();
                        if($count > 2){
                            break;
                        }
                        $img = get_the_content_image(); // コンテンツからイメージを取得
                        if ( substr($img,-11) != 'noimage.png') {
                            $url = get_permalink();
                            $title = get_the_title();
                            $owlArray[$count] = array($img, $url, $title);
                            $count++;
                        }
                    endwhile;
?>
<?php /***** 保存した最新3記事のスライダーを表示 *****/?>
<div id="owl-demo" class="owl-carousel owl-theme">
 
  <div class="item"><a href="<?php echo $owlArray[0][1];?>" class="titletip"><img src="<?php echo $owlArray[0][0];?>" alt="<?php echo $owlArray[0][2];?>"><span><?php echo $owlArray[0][2];?></span></a></div>
  <div class="item"><a href="<?php echo $owlArray[1][1];?>" class="titletip"><img src="<?php echo $owlArray[1][0];?>" alt="<?php echo $owlArray[1][2];?>"><span><?php echo $owlArray[1][2];?></span></a></div>
  <div class="item"><a href="<?php echo $owlArray[2][1];?>" class="titletip"><img src="<?php echo $owlArray[2][0];?>" alt="<?php echo $owlArray[2][2];?>"><span><?php echo $owlArray[2][2];?></span></a></div>
 
</div>
<?php
                }

…、長いですね(^_^;。このblogではこのまま動くのですが、既に追加してあるfunctions.phpの関数を使ったり、1つめは大きい画像にしているという私ルールが前提となっています。なので、このソースはこのままは使えないということが多いかと思いますが何かの参考にしていただければと思います。

このソースをphpファイルで保存（ex.owlTop3.php）しておき、home.phpで

         if ( have_posts() ) :
                include('owlTop3.php');

このようにincludeしておくと、トップページならば最新３投稿分の画像をOWLカルーセルでスライダーのように表示します。

解説すると、

/***** OWLカルーセルの環境設定 *****/
OWLカルーセルを利用するためのjsやCSSを指定しています。これは以前blogで書いていますのでわかりにくければ見てみてください。

/***** OWLカルーセルの動作設定 *****/
サンプルページのJavascriptを貼り付けてあります。prev、nextのナビゲーションボタンを表示しないように　navigation:false,　と変更しました。

/***** 最新3記事の情報を保存 *****/
投稿をループ参照して画像がある記事（実際には全ての記事に画像がありますが）の最新３つの情報を保存しています。

/***** 保存した最新3記事のスライダーを表示 *****/
実際にOWLカルーセルによってスライダーを表示しています。

こんな感じになっています。もしかして何かの参考になるかもしれないのでソースを置いておきます。
owlTop3

実際の動作はこちらで確認できます。