革命スライダーWordPressプラグインのレビューとガイド

Slider Revolutionは、WordPressプラグイン、jQueryプラグイン、Joomlaプラグインとして利用できるプレミアムスライダーです。幅広い機能と使いやすさにより、WordPressコミュニティで非常に人気があります。.


この概要では、主な機能のみを取り上げます。 Slider Revolution WordPressプラグイン, その後、独自のスライダーを最初から作成するのがいかに簡単かをお見せします.

Slider Revolutionを無料で入手! Slider Revolutionプラグインは、Total WordPressテーマの購入時に無料で含まれています。優れたプラグインを入手するだけでなく、TotalテーマとVisual Composerプラグインも無料で含まれます。!

Slider Revolutionを入手する

Slider Revolution:このWordPressプラグインをすばらしいものにする理由

Slider Revolutionには、ウェブサイト用のカスタムスライダーを簡単に作成するための優れた機能が数多く組み込まれています。ここに私たちのお気に入りのいくつかがあります.

レスポンシブレイアウト

プラグインは応答性に優れており、複数のスライダーレイアウトオプションが含まれているため、作業が簡単です。最初に、スライダーのタイプを選択します:標準スライダー、ヒーローシーン(シングルスライド)、またはカルーセルスライダー。次に、レイアウトを選択します:自動、全幅、または全画面.

自動レイアウト オプションを使用すると、正確なピクセルを使用してスライダーのサイズを設定できます。また、さまざまな画面の幅(デスクトップ、ラップトップ、タブレット、電話)でスライダーのサイズを設定する追加オプションがあります。このオプションをデフォルト設定のままにすると、WordPressテーマで定義されているメインコンテナーの幅にスライダーが引き伸ばされます.

全幅レイアウト まさにそれがどのように聞こえるかです–左から右に完全に伸びる全幅スライダーオプション。スライダーの高さを定義する必要があります.

最もユニークなレイアウトオプションは 全画面表示. このオプションを使用すると、ブラウザーやデバイスのサイズに関係なく、文字通り画面全体を埋める素晴らしいスライダーを作成できます(このオプションを使用して、ビデオにフルスクリーンスライダーを追加して、さらに大きな影響を与えることもできます).

複数のコンテンツソース

投稿のスライダーを作成しませんか?またはあなたのWooCommerce製品については?問題ありません-から選択してください 11の異なるコンテンツソース スライダーを作成するとき.

この投稿の執筆時点では、Slider Revolutionは、ブログ投稿、特定の投稿、現在の投稿/ページ(注目のスライダーをブログ投稿またはポートフォリオアイテムに追加する場合に最適)、Flickr、Instagram、WooCommerce、Twitter、Facebookに基づくコンテンツをサポートしています。 、YouTube、Vimeoまたはデフォルトのスライダー(独自の画像/ビデオをアップロード).

簡単なオプション

Slider Revolutionを使用すると、ほぼすべてのオプションを追加して、カスタムスライダーを簡単に作成できます。プラグイン全体のドロップダウンメニューを使用して、スライドの遅延、ナビゲーション矢印、カスタムフォント、視差の背景の追加、スライダーの位置(マージンの追加)、メディアレイヤーの追加、ボタンの挿入、スライドの切り替えなどを選択します.

さらに、ほぼすべてをカスタマイズし、独自のプリセットを保存して、フォントスタイル、スライドの切り替え、レイヤーアニメーションなどを非常に簡単に再利用できます。.

メディアサポート

マウスを数回クリックするだけで、テキスト、リンク、画像、動画を追加できます。これにより、読者やクライアントが識別できる情報豊富なスライドを作成できます。さらに、これらの各メディアタイプは、Slider Revolutionのスーパーオプションを使用して設定した独自のアニメーション、タイミング、スタイルを備えた独自のレイヤーとして追加されます.

Slider Revolutionのインストール

まず、Slider Revolution WordPressプラグインのコピーを入手する必要があります。プラグインを自分で購入したか、プレミアムテーマに含まれていたかによって、プラグインをインストールする方法はいくつかあります.

1. Slider Revolutionのコピーをインストールする

Slider Revolutionプラグインをダウンロード

CodeCanyonからSlider Revolutionの独自のコピーを購入した場合は、Envatoアカウントにログインしてダウンロードページに移動します(ユーザー名にカーソルを合わせると、このページにアクセスできます)。次に、Slider Revolutionのコピーを探し、「インストール可能なWordPressファイルのみ」のダウンロードオプションを選択します。

プラグインZipファイルをアップロードする

次に、WordPressサイトにログインして、 プラグイン>新規追加 画面の左上にある「プラグインのアップロード」ボタンをクリックします.

ここから、「ファイルを選択」ボタンを使用して、CodeCanyonからダウンロードしたプラグインファイルを選択し、「今すぐインストール」ボタンをクリックします。その後、プラグインをアクティブ化するだけで、スライダーを作成する準備が整います。!

FTP経由でアップロードするプラグインフォルダーの解凍

注意: サーバーにログインし、抽出した(解凍された)プラグインをwp-content / pluginsにあるフォルダーにアップロードして、FTP経由でプラグインをインストールすることもできます.

2. Premiumテーマに含まれるSlider Revolutionをインストールする

多くのプレミアムテーマには、テーマのダウンロード付きのプレミアムプラグインのコピーが含まれています。この方法でSlider Revolutionのコピーをインストールする場合は、テーマのドキュメントを参照する必要があります。しかし、ほとんどの開発者はこのプロセスを簡単にするために最善を尽くしています.

推奨される合計プラグイン

たとえば、Total WordPressテーマを使用している場合、Slider Revolution(およびテーマに含まれている他のプラグイン)のインストールを推奨する画面上のプロンプトが表示されます。リンクをクリックするだけ インストールを開始 プラグインをアクティブにします.

TotalでSlider Revolutionをインストールする

Totalには、サンプルデータをインポートするときにSlider Revolutionをインストールしてアクティブにするためのデモインポーターのカスタムオプションも含まれています。 Slider Revolutionを使用してインポートするデモを作成した場合は、上記のようにプラグインをインストールするように求められます。.

TotalでSlider Revolutionスライダーをインポートする

次に、「スライダーのインポート」のオプションが選択されていることを確認してください。テーマは、デモからカスタムスライダーを自動的にインポートします。かんたん!

スライダー革命ガイド

プラグインをインストールすると、メインのWordPressダッシュボードにメニュー項目が追加されます。これをクリックして、メインのSlider Revolutionスライダー管理ページに移動します.

メインスライダー回転の設定

ここから、スライダーを作成または編集し、プラグインの独自のコピーを購入した場合はライセンスをアクティブ化し(スライダーがテーマに含まれている場合は、このセクションは無視できます)、プラグインのコピーが最新かどうかを確認します.

Slider Revolutionのグローバル設定

構築を始める前に、 全体設定 オプション(Slider Revolutionの下のサブメニュー項目).

スライダー革命のグローバル設定

デフォルトのレスポンシブグリッド設定(新しいスライダーの作成時に適用されます)、カスタムフォントの読み込みURL、プラグイン用のデータベース作成など、ここには多くの重要なオプションがあります。しかし、2つのオプションを調整することをお勧めします.

編集を検討すべき最初のオプションは プラグインの権限を表示 プラグインアクセスを管理者のみに制限するために使用できます。これは、Webデザイナーや他の管理者だけがサイトでスライダーを作成する唯一の方法であることを確認する簡単な方法です(特に、ブログにゲストの作成者がいる場合に役立ちます)。.

無効にする2番目のオプションは、 通知を有効にします オプション。プレミアムテーマに含まれているSlider Revolutionのコピーを使用している場合、必要がないときに「アップグレード」または「ライセンスを入力してください」という通知が表示されることがあります。通知を非表示にするには、このオプションを無効にするだけです。次に、設定を保存します.

これで、スライダーの作成を開始できます! 3つのオプションがあります。最初から開始するか、Slider Revolutionの「使用例」から無料のエクスポートファイルを入手するか、テーマに含まれているサンプルスライダーをインポートします。.

サンプルスライダーをインポートする

Slider Revolutionサンプルスライダー

Slider Revolutionのサンプルスライダーをインポートする場合 使用例 最初に彼らのサイトからスライダーファイルをダウンロードし、次にあなたのWordPressに戻ってクリックしてください スライダーをインポート オプション。ここから、ダウンロードしたサンプルファイルを参照してクリックします アップロードする. これにより、サンプルスライダーとそのすべての設定が追加され、新しいスライダーのベースとして使用できるようになります.

新しいスライダーを作成する

スライダーを最初から作成する場合は、 新しいスライダー オプション。上から始めましょう

Slider Revolutionのコンテンツソース

コンテンツソースを選択する:スライダーにコンテンツを追加する方法を選択します。 11のコンテンツソースから選択できますが、ほとんどの場合、 デフォルト オプション.

Slider Revolutionのタイトルとショートコード

スライダーのタイトルとショートコードを追加する:スライダーの名前を選択して、スライダーの内容や使用しているページを覚えやすくします。スライダーを投稿やページに挿入するための簡単なショートコードもここにあります.

スライダー回転タイプ

スライダーのタイプを選択します:スライダーのタイプを選択し、プラグインに含まれるプリセットをロードするプリセットを選択します.

スライダー革命のレイアウト

スライドレイアウトを選択:スライダーのレイアウトとグリッド(ピクセル単位)を選択します。画面のサイズに基づいてカスタムグリッドサイズを設定できますが、全画面がブラウザー画面全体に表示されます。選択するオプションに関係なく、レイヤーコンテナーのサイズを決定するグリッドの幅と高さを追加する必要があります.

次に、画面の上部までスクロールして戻り、スライダーの一般設定の編集を開始します。.

スライダー設定

右側に一連のスライダーオプションが表示されます.

一般設定:スライドショーオプションの設定、デフォルトのスライド時間の設定(スライドが表示される時間の長さ)、デフォルトのトランジション/アニメーションと背景の編集、進行状況バーの有効化(および位置とスタイルの編集)、最初のスライド設定の編集、次のスライドの有効化焦点を合わせてぼかしを無効にする.

レイアウトとビジュアル:シャドウ、オーバーレイ、メインスライダーの背景を編集し、ローダースピナーを有効にし、モバイル(または特定の幅の下)でスライダーを無効にし、ページ上のスライダーの位置を選択します.

ナビゲーション:サイド矢印、箇条書き、タブ、サムネイルのオプションと設定をカスタマイズします。タッチナビゲーション、スワイプ、キーボードナビゲーション、マウススクロールも有効にする.

視差と3D:視差や3Dサポートを有効にし、マウスの感度と視差深度レベルを編集します.

パフォーマンスとSEO:遅延読み込みを有効にし、スライダーのパフォーマンスを監視する.

問題処理:フォールバックを有効にして、スライダーエラーをトラブルシューティングします.

Googleフォント:スライダー専用のカスタムGoogleフォントファミリーをロードします(必要なフォントを追加するか、Webサイトの他の部分と一致するテキストレイヤーをスライドに追加する必要があるフォントを追加します).

インポート/エクスポート/置換:カスタムテンプレートをインポートし、現在のスライダーをエクスポートして別のWebサイトで再利用し、オプションを使用してスライダーのURLを置き換えます.

API関数:APIメソッドとイベントを編集します(上級開発者でない限り、このタブは無視することをお勧めします).

Slider Revolutionのクイックリンク

選択が終了したら、 グリーンファイル 画面の上部にある変更を保存します。その後をクリックしてください 青鉛筆 スライドの編集を開始するには!

スライドを追加または編集する

スライダー革命スライドの追加または編集

これで、スライドの追加を開始できます。最初から始めるか、サンプルスライダーを使用するかに応じて、2つまたは3つのスライドオプションがあります。 静的/グローバルレイヤー, 作成済みのスライドと スライドを追加.

静的/グローバルレイヤー 作成したスライドの上にオーバーレイとして表示されます。これは、ロゴや透かしを追加したり、製品の[今すぐ購入]ボタンを追加したり、ニュースレターを購読するためのリンクを追加したりするのに最適な方法です.

を選択します スライドを終了しています 以前に作成した、またはサンプルスライダーの一部としてインポートしたスライドに変更を加える。サンプルスライダーは、さまざまなプラグイン機能を適切に使用して印象的なスライダーを作成する方法を示しているため、プラグインを初めて使用する場合にSlider Revolutionを使い始める最も簡単な方法の1つです。.

クリック スライドを追加 最初からスライドの作成を開始するには.

Slider Revolution:スライドの背景を設定する

まず、 主な背景 スライドの背景を選択するオプション:画像、外部URL、透明(注–一般的なスライダー設定でメインスライダーの背景を設定すると、表示されます)、無地またはビデオ。次に、スライドをさらにカスタマイズする場合は、メディアソース設定、フィルター、視差レベル(%)、およびKen Burns(パンとズームのアニメーション効果)のオプションを使用します.

Slider Revolution:スライドの一般設定を行う

次に移動します 一般設定. スライダーが読み込まれてすぐにアニメーション化したくない場合は、ここでスライドの遅延を設定したり、スライドのループオプションを編集したり、有効期限を追加したりできます(休日やプロモーション用のスライダーを作成する場合に最適です)。このタブのもう1つの便利な機能は、 スライドの状態未発表 –このようにして、新しいスライドをWebサイトの訪問者に表示せずに、引き続きスライドを編集してWebサイトのバックエンドでプレビューできます。.

スライダーにサムネイルナビゲーションを使用している場合、 サムネイル タブには、カスタムスライド画像とサイズを選択するオプションがあります。ただし、このナビゲーションスタイルを使用しないことを選択した場合は、このタブをスキップできます.

Slider Revolution:スライドアニメーションの設定

これで、に切り替えることができます スライドアニメーション スライダー遷移アニメーションをカスタマイズするタブ。回転、継続時間、イージングのプラスオプションから選択できる80以上のアニメーションがあります.

Revolution Sliderには、 リンクとSEO 設定, スライド情報 (カスタムパラメータと説明)および ナビゲーションの上書き スライドにカスタムナビゲーション矢印、箇条書き、またはサムネイルを追加するには.

今こそそれをクリックする絶好の機会です グリーンファイル 画面の上部にあるアイコンをクリックして、スライドにレイヤーやスタイルを追加する前に設定を保存します.

スライドレイヤーを追加する

スライダー革命:スライダーレイヤーの追加

スライドを追加または編集する場合、Slider Revolutionにはオプションが満載されており、それらは引き続き表示されます。 8種類から選べます レイヤーを追加 オプション:

  • テキスト/ HTML レイヤーは、見出し、説明、さらにはリンクを追加するのに最適です。スライドで言いたいことをすべて追加します.
  • 画像 ロゴの挿入、視差スライドの奥行きの追加、セットの前/後の挿入などに最適です.
  • オーディオ& ビデオ レイヤーはかなり単純です。挿入するメディアを選択し、メディアライブラリからファイルを選択するか、リンク(YouTube、SoundCloudなど)を挿入します。次に、ループ、自動再生、次のスライドオンエンド、ベースボリューム、セグメントの開始/終了、およびプリロードを有効にする設定を追加します。これは、スライダーに紹介文、紹介ビデオ、またはチュートリアルを追加する簡単な方法です。.
  • ボタン レイヤーのオプションには、色、背景、境界線の色、アイコン、フォント、ホバー状態、テキストを編集できる21のサイズと境界線の半径のコンボが含まれます。さらに、ソーシャルリンクのアニメーション化されたマウススクロールアイコン、ハンバーガーメニュー、または再生/一時停止の便利なプリセットがいくつかあります。.
  • 形 効果を追加したり(ボタンの背後にある色を点滅させたり、放射したり)、テキストレイヤーの一部を定義したり(図形を使用して1つの単語または語句だけを強調表示したり)、視覚的な興味を加えたりできます。背景、境界線の色/サイズ、図形の境界の半径(正方形の場合は0、円の場合は100)、ピクセル単位の図形サイズとパディングを選択します.
  • オブジェクト レイヤーを使用して、無料のリソースのThemePunchのライブラリからpng、jpg、svg、またはアイコンを挿入できます.
  • インポート ライブラリの別のスライダーからレイヤーまたはスライドをコピーします。すばやく簡単!

青い[レイヤを追加]ボタンをクリックして開始し、オプションを使用して実際にカスタマイズまたはレイヤ化します.

レイヤーオプション

メインスライダーのプレビューセクションのすぐ北を見ると、レイヤーを追加するときにレイヤーを編集およびカスタマイズするために使用できるオプションのロードを含む白いバーが表示されます。.

スライダー革命レイヤースタイル

使用 スタイル フォント、色、レイヤーの場所を編集するオプション。これには、カスタムのGoogleフォント、フォントサイズ、行の高さ、テキストの色、レイヤーの背景、パディング/マージン、遠近法、ホバー、トグルなどが含まれます.

スライダー革命レイヤーアニメーション

アニメーション タブはあなたが期待するとおりです–それはあなたのレイヤーの入口と出口のアニメーションを追加してカスタマイズするためのオプションを保持しています。プリセットアニメーションテンプレートを選択し、イージングを追加して、アニメーションの継続時間を編集します.

スライダー革命レイヤーループ

ループ 設定は簡単です:レイヤーを無効にしたままにして、レイヤーをすでに選択したアニメーションでロードするか、タイプを選択してループを有効にします。振り子、回転、サイドループ、パルス、ウェーブから選択して、レイヤーに一定のループアニメーションを与えます.

スライダー革命レイヤーの可視性

モバイル設定は以下にあります 可視性. ここから、レイヤーを特定のデバイスで表示するか、設定した幅の下に非表示にするか、ホバーにのみ表示するかを指定できます.

スライダー回転レイヤーの動作

動作 には、レイヤー設定をカスタマイズするための便利なトグルがいくつか含まれています。 1つ目は、レイヤーの自動応答と子要素の応答を有効にする設定です。デフォルトでは、スライドウィンドウはブラウザーウィンドウが縮小するにつれて縮小します。レイヤーのサイズを維持するには、これらの設定を無効にします。ここからレイヤーの配置とレスポンシブオフセットを編集することもできます.

スライダー革命レイヤーアクション

使用 行動 タブをクリックして、クリック、マウスエンター、マウスリーブのカスタムレイヤー設定を追加します。アクションには、スクロール、トグル、メディア再生、一時停止、フルスクリーン入力、ミュートなどがあります。.

スライダー回転レイヤー属性

上級ユーザーまたは開発者の場合、 の属性 セクションを使用して、独自のID、クラス、およびラッパーを追加し、カスタムコードでターゲットにすることができます.

Slider Revolution Layer Parallax / 3D

そして最後に、 視差/ 3D には、レイヤーに追加する視差効果の「レベル」を選択するためのドロップダウンセレクターが用意されています。パーセンテージが高いほど、レイヤーが移動します.

レイヤーフレームタイム

次に進むと、スライダーのプレビューの下にタイムテーブルが表示されます。ここから、レイヤーがスライド上でアニメーションするタイミングの遅延を編集できます。スライドの全体的な時間の長さと比較して、レイヤーのタイミングを示す視覚的なタイムテーブルも確認できます。ブロックされたセクションはレイヤーのアニメーション時間であり、明るい色のバーはレイヤーが表示される時間の長さ全体です.

スライダー革命レイヤーのタイミング

スライド全体の所要時間を編集するには、表の右上にある青いタグをクリックしてドラッグします.

複数のレイヤーを追加したら、このセクションを使用して、位置番号、入口時間を編集するか、レイヤーを順番にドラッグアンドドロップして、レイヤーを再編成することもできます。さらに、このセクションを使用してスライドを再生し、編集時にタイミングをプレビューできます.

スライドを保存

最も重要なステップは、スライドを保存することです!変更を加えたら、必ずスライドを保存または更新してください。スライドから別のスライドに移動すると(別のスライドに移動した場合でも)、ハードな作業がすべて失われる可能性があります。必ず保存、保存、保存してください!

保存後、他のスライドやスライダーに移動して作業できます.

スライダーを使う

投稿やページにすばらしいスライダーを追加するには、以前に作成したSlider Revolutionショートコードを使用します。このショートコードは、ダッシュボードのSlider Revolutionメニュー項目をクリックすると見つかります。ショートコードは次のようになります [rev_sliderエイリアス] 最初にスライダーを作成したときにスライダーに付けたエイリアスに基づく.

ショートコードを投稿またはページのコンテンツに貼り付けるだけです。または、テーマが追加のスライダー位置をサポートしている場合は、そこにもショートコードを追加できます。一部のWordPressテーマには、スライダー用の特別なモジュールさえ含まれています。たとえば、Total多目的WordPressテーマにはSlider Revolutionが含まれており、組み込みのページビルダーを使用すると、Slider Revolutionモジュールを挿入するだけで、投稿やページにスライダーを追加できます。必要なのは、モジュールを追加し、ドロップダウンからスライダーを選択して(作成済みのすべてのスライダーのリストが表示されます)、スライダーを挿入して所定の位置にドラッグアンドドロップするだけです。簡単です?

まとめ

Slider Revolutionは、特に多数の無料のテンプレート(プラグインの独自のライセンスを購入した場合はさらに多くのプレミアムテンプレート)、使いやすいビジュアルエディター、およびトンを提供するため、使用する最も簡単なプレミアムスライダープラグインの1つであると信じていますスライドのスタイルを設定するためにCSSを知る必要がないように、組み込みの機能(ボタン、フォント、色などが既に用意されています)。 5つ星になり、より良いスライダープラグインを見つけるのに苦労するでしょう。.

うまくいけば、私たちのガイドが開始のプロセスを順を追って説明しましたが、詳細を学ぶ(または自分のコピーを取得する)には、ThemePunchのメインのSlider Revolutionページにアクセスしてください。彼らは彼らのスライダーの素晴らしい例を示しているだけでなく、あなたはスライダー革命が何ができるかを見ることができるライブデモにリンクしています.

スライダー革命の詳細

しかし、私たちはあなたから聞いてみたいです。以下のコメントでSlider Revolutionについてのご意見をお聞かせください。また、ご不明な点がございましたら、お気軽にお問い合わせください。お手伝いさせていただきます!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me