Webの記録

WordPressプラグイン「Easing Slider」でスライドショー簡単設置

投稿日:

この記事は約 3 分で読めます。

WordPressでカッコいいスライドショーを簡単に実現出来るプラグイン「Easing Slider」があったので、メモしておきます。

有料版もあるようですが、無料版で十分キレイなスライドショーが出来たので、私は無料版のみ試してみました。

本当に設置が簡単でした。固定ページや投稿する記事に設置するのなら、特別HTML、CSS、PHPの知識がなくても出来ると思います。

※Sample表示は、以前はこのブログ内に設置していましたが、ファイル整理して現在は置いてないので「公式サイト」でご確認ください。

特徴

  • とにかく簡単!
  • 設定を選ぶ事で見せ方を変えられる(ただし英語表記。いろいろ試してみると良いかも)
  • 有料版と無料版がある。(有料版は機能が良いようですが、今回試してないです)
  • IETesterで見るとIE6も表示可能(状態によっては表示を保障出来ませんが・・・)

設置方法

先にスライドする画像を用意しておきます。

ダウンロード

プラグインをダウンロードして、有効化します。

設定

スライドさせる画像を設定します。

ダッシュボードのメニューに「Easing Slider」が表示されているので、これを開いて「Custom Images」のタブを開きます(最初に開いています)
ここで、スライドさせる画像のパスを入れるか、アップロードをします。(私はパスを入れて試してみました)
保存する時は「Save Changes」をクリックです。

「Slider Settings」のタブで、スライダー自体の設定をします。
結構項目があるので、いろいろ試してみるのも面白いです。

「Usage Settings」の設定項目。
私はあんまりココはいじっていません。

設置

スライダーを取り付けたい固定ページか投稿記事では以下のようにショートコードを記述

[easingslider]

テンプレートファイルのphpの場合(index.php、home.phpなど)は以下のように記述

<?php if (function_exists('easing_slider')){ easing_slider(); }; ?>

これで設置完了です!設置がほんの1行という、簡単さ♪
「Easing Slider」プラグインって便利です!!

-Webの記録
-, ,

執筆者:


  1. ナオヤ より:

    はじめまして☆
    Easing Sliderの紹介ありがとうございます。

    早速設定してみたのですが、表示されないです・・・
    サイトを確認すると、クルクルとずっと読み込んでおり、画像が出てこないです。

    設定画面では、ちゃんと画像は出ております。

    何か情報ありますでしょうか?
    よろしくお願い致します。

    • Motoshige より:

      ナオヤさん、はじめまして。
      コメントありがとうございます!

      状態を直接見る事が出来ないので、違うかもしれないんですが・・・。

      設定画面で画像が出てくるというのは、「Custom Images」で設定した画像のパスは合っているという事ですね。

      ・・・であれば、「Usage Settings」のタブの中で上から4番目の「Get Images From?」を「Custom Images」になっているか確認してみてください。
      もしかしたら「Custom Fields」などになっているかもしれません。

      これだったら画像が表示されなくてくるくる読み込みをしている状態になるかもしれません。

      他の原因は、今のところ見つけられてないので・・・とりあえず上記の分で確認してみてください。

      これで解決するといいですね~♪

  2. xxppxx より:

    このような記事を書いた場合、実際に動作するかを確認できるsample
    をクリック表示すべきでは?

    • Motoshige より:

      xxppxxさま

      はじめまして。コメントありがとうございます!
      ご指摘、ごもっともです。

      以前は、このブログのトップにサンプルを置いてました。
      しかし、このブログは私にとって実験ブログなのでいろいろファイルをいじってしまい、現在はサンプルを置いていません。
      サンプル表示を止めた時にこの記事を書き直すべきだったのですが、すっかり忘れていました。申し訳ございません。(本日、書き加えました)

      ひとまず、動作は公式サイトでご確認いただけると助かります!
      http://easingslider.com/

comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

この記事は約 2 分で読めます。 Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。 特にWebサイト1ページ全体 …

no image

レスポンシブ対応ナビゲーションを簡単に付けられる「SlickNav」

この記事は約 1 分で読めます。 レスポンシブサイトで、PCとスマホではメニューの見せ方を変えたいもの。 画面の幅が狭くなった時はハンバーガーボタンと言われる三本線のボタンを表示をすることができる、j …

no image

WordPressでオリジナルテーマ作りにチャレンジ【準備編】

この記事は約 1 分で読めます。WordPressに少し慣れてきたので、そろそろオリジナルテーマ作りにチャレンジしようと思います。 今までのテーマは、デフォルトであった「twentyten」や「cor …

no image

Facebook タイムラインのカバー画像を設定してみた♪

この記事は約 1 分で読めます。 Facebookのタイムラインが登場して、少し経ちます。 カッコイイ画像をカバー画像にされている方もお見かけするのですが、私はまだ画像がしっくり決まらずジタバタしてい …

no image

スマホ用にWebクリップアイコンを設置してみた

この記事は約 1 分で読めます。 Webクリップアイコンの設置はとても簡単!アイコン素材をちゃんとアップして、1行link要素を書くだけです。 iPhone、iPad、Androidでホーム画面にショ …