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

Image

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

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

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

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

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

OWLカルーセル Auto Height

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

解説すると、

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

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

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

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

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

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

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る