about

sogo  
fukidasi

  social

Count per Day

  • 2576現在の記事:
  • 437今日の閲覧数:
  • 4現在オンライン中の人数:

jQueryで関連記事をスライドしサムネイル表示させるRelated Posts Sliderを使ってみる

Wordpressで関連記事を記事下に導入しているサイトを多く見かけますが、ちょっと一味違った方法で表示するjQueryを利用したプラグインをご紹介したいと思います。



上のように、サムネイル画像を表示させると同時にタイトルをスライド表示させることができ、タイトルを選択すると画像も切り替わるという仕組みです。

 

DEMO


当サイトでは設置しておりませんので、同時運営しているこちらこちらのサイト内個別記事下で確認していただけます。

 
以前からこのプラグインの存在は知っていたのですが、意外にも導入しているサイトが少なく、また、説明しているサイトもあまり見かけませんので今回記事にしてみました。

 
プラグインとしてはRelated Posts Sliderというもので導入も簡単です。

Related Posts Slider (バージョン1.3)ダウンロード先
(当方のWPバージョン3.0.5で動作確認済み)

※ダウンロード方法はいまさらですので割愛させていただきます。

*注)このプラグインを有効にする為には事前にWordPress Related Postsプラグインを導入しておく必要があります


プラグインの有効化


1. 事前に導入しておいたWordPress Related Postsを有効化しておきます。

2. 新たに導入したRelated Posts Sliderを管理画面から開きます。

 

設定




1. Related Posts Plugin to use
  ここは、事前で入れておいたWordPress Related Postsをプルダウンで選択します。

2. Related Slider Format
  ここは、Defaultを選択します(Horizontal~を選択するとサムネイルのみの表示です)

3. Select the style for your Slider
  ここは、スキンのフォーマットを選択しますが、それぞれスタイルが変わりますので、自分
  の好きなスキンを指定すればよいと思います。
  
  ちなみに私は、Defaultを選択し、プラグイン内PHPを編集してフォントや、カラーを指定
  してます。

4. No. of Posts in one group of List Section/Visible Posts
  表示させる記事数

5. Slider Height
  高さの指定

6~以下は、カラー指定ですので、Defaultを選択した場合のみ選択が可能です。

その他、Thumbnail Image、List Section、Preview Section、Manual/Automatic Insertionの設定箇所もございますが、私もいまいち理解していない部分も多い為、直感的に設定してみて下さい。

 
*尚、jQueryで動かしていますが、Wordpressプラグインですので、特にphpを書いたり、難しいjQuery知識も必要なく簡単に導入できると思います。

 
人と違う関連記事スタイルを表示したい場合や、動画、フォト等、読ませるサイトではなく「見せるサイト」にはこういうスタイルもありかなと私個人的には思います。


Pocket

Trackback URL


この記事を共有していただければ嬉しく思います。コメントもお待ちしておりますのでお気軽にどうぞ!
※ドメインを移行しましたら共有数が0にリセットされてしまいましたので、ご協力お願い致します。