wordpressテーマにjQueryプラグイン【Elastic Slideshow】を使ってみた

この記事は約1512秒で読めます。

どうも!!こうすけです。

現在、wordpressのテーマを開発中なんですがそのテーマにElasticSlideshowというjQueryのプラグインを使ってみました。

記事の一覧をただ表示するのもつまらないと思ったので、
何か面白く表示する方法はないかと調べていたところ、
ElasticSlideshowがあったんですよね。

そしていい感じに表示されたので、今日はこのElasticSlideshowを紹介していきたいと思います。

1. テーマに表示してみると

テーマをブログに適用させて表示してみるとこんな感じで表示されました。

実際に表示させているところーmovie

めっちゃおしゃれじゃないですか?
導入方法もそんなに難しくなく比較的簡単に導入することができました。
まだ開発中なんで、所々のデザインができてませんがそれでもいい感じに表示してくれています。

2. 使い方

まずElasticSlideshowをダウンロードする必要があります。
以下のリンクからElasticSlideshowをダウンロードしてください。

ダウンロードしたファイルは適当な場所においてください。
できれば、コードを挿入するファイルと同じ階層がいいと思います。

次にコードを挿入していきます。

以下のコードをプラグインを使用したい場所に挿入してください。

<div class="wrapper">
          <div id="ei-slider" class="ei-slider">
              <ul class="ei-slider-large">
                          <!-- ここにimgタグを使用し、表示させたい画像を指定する。挿入した画像の数だけ、画像が表示されるようになる。
                                 以下は例です。こんな感じで記載してください。 -->
                           <li>
                             <img src="image/NoImage1.png" alt="No Image1">
                           </li>      
                            <!-- パスは正しくなるように指定してくださいね。 
                                 画像を複数表示したい場合は、liタグを追加してその中にimgタグを追加してください。-->
                          
                          <!-- 画像を増やしたい場合は以下のように追加する -->
                          <li>
                              <img src="image/NoImage2.png" alt="No Image2">
                          </li>
                    <?php endwhile; ?>
              </ul><!-- ei-slider-large -->

              <ul class="ei-slider-thumbs">
                  <li class="ei-slider-element">Current</li>
                    <!-- 上で記載したimgタグと同じように記載する。 -->
                    <li>
                           <img src="image/NoImage1.png" alt="No Image1">
                    </li>
                    <li>
                           <img src="image/NoImage2.png" alt="No Image2">
                    </li>
                  <?php endwhile; ?>
              </ul><!-- ei-slider-thumbs -->
            </div><!-- ei-slider -->
      </div><!-- wrapper -->
  </div>
</div>

<!-- 以下のjavascriptのパスも必ず正しくなるように指定してください。
     ダウンロードしたjqueryプラグインのフォルダ内に以下で指定しているファイルがあります。-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="/ElasticSlideshow/js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="/ElasticSlideshow/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(function() {
        $('#ei-slider').eislideshow({
  easing		: 'easeOutExpo',
  titleeasing	: 'easeOutExpo',
  titlespeed	: 1200
        });
    });
</script>

以下のコードはhtmlファイルのheadタグ内に記述してください。

<!-- Elastic Slideshow start -->
<!-- ダウンロードしたプラグインのフォルダ内に以下で指定しているcssファイルがあります。正しいパスになるように修正してください。 -->
<link rel="stylesheet" type="text/css" href="/ElasticSlideshow/css/demo.css" />
<link rel="stylesheet" type="text/css" href="/ElasticSlideshow/css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />
<noscript>
<link rel="stylesheet" type="text/css" href="css/noscript.css" />
</noscript>
<!-- Elastic Slideshow end -->

コードの挿入が完了したらコード内にコメントとして修正する内容を記述しましたので、
それを元にコードを修正してください。

コードの修正が完了したら実際に表示して見てください。
作業に問題なければ表示されていると思います。

3. もしwordpressのテーマに使いたい場合

自分は以下のように使用しました。
もし同じように使用したいのであれば、参考にしてください。

  <div class="wrapper">
          <div id="ei-slider" class="ei-slider">
              <ul class="ei-slider-large">
                <?php // ループ開始
                      //人気記事を取得する
                      query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5&order=DESC'); while(have_posts()) : the_post(); ?>

                          <li>
                            <a href="<?php the_permalink(); ?>">
                              <?php if(has_post_thumbnail()) : ?>
                                <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo the_title(); ?>">
                              <?php else : ?>
                                <img src="<?php echo get_template_directory_uri(); ?>/image/NoImage.png" alt="No Image">
                              <?php endif; ?>
                              <div class="ei-title">
                                  <h2><?php echo get_the_date() ?></h2>
                                  <h3><?php echo the_title(); ?></h3>
                              </div>
                            </a>
                          </li>

                    <?php endwhile; ?>
              </ul><!-- ei-slider-large -->

              <ul class="ei-slider-thumbs">
                  <li class="ei-slider-element">Current</li>
                  <?php $popular_count = 1;
                  // ループ開始
                  query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=7&order=DESC'); while(have_posts()) : the_post(); ?>
                    <li>
                      <?php  ?>
                      <a href="#"><?php echo "Slide $popular_count" ?></a>
                      <?php if(has_post_thumbnail()) : ?>
                        <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo the_title(); ?>">
                      <?php else : ?>
                        <img src="<?php echo get_template_directory_uri(); ?>/image/NoImage.png" alt="No Image">
                      <?php endif; ?>
                      <?php $popular_count++; ?>
                    </li>
                  <?php endwhile; ?>
          </ul><!-- ei-slider-thumbs -->
      </div><!-- ei-slider -->
 </div><!-- wrapper -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/ElasticSlideshow/js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/ElasticSlideshow/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(function() {
        $('#ei-slider').eislideshow({
  easing		: 'easeOutExpo',
  titleeasing	: 'easeOutExpo',
  titlespeed	: 1200
        });
    });
</script>
<!-- Elastic Slideshow start -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/ElasticSlideshow/css/demo.css" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/ElasticSlideshow/css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />
<noscript>
<link rel="stylesheet" type="text/css" href="css/noscript.css" />
</noscript>
<!-- Elastic Slideshow end -->

4. 最後に

どうですか?画像がいい感じに表示されましたか?
jQueryプラグインいいですよね。
こんな簡単におしゃれに画像を表示してくれるんですから、
本当にありがたいです。

当記事を最後まで読んでくださりありがとうございました。
当記事があなた様にweb開発の役に立てば私も嬉しく思います。

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です