XO Slider プラグイン

XO Slider (旧名: XO Liteslider) プラグインは、スライダーを簡単に作成できるプラグインです。

機能

  • サムネイルナビゲーション、カルーセルおよびコンテンツに対応しています。
  • スライダースクリプトに Swiper を使用しています。
  • フロント側では jQuery を使用していません。
  • ブロックエディターに対応しています。
  • 動画 (添付ファイル・YouTube) に対応しています。
  • テンプレートファイルを作成することで、Swiper の機能をフルに活用することができます。

インストール

  1. WordPress 管理画面->[プラグイン]->[新規追加] メニューより、[プラグインを追加] ページを開きます。
  2. 検索ボックスに、”XO Slider” と入力し検索します。
  3. XO Slider が見つかったら、[今すぐインストール] をクリックします。
  4. インストールが完了したら”プラグインを有効化”をクリックします。

WordPress 公式ディレクトリ

スクリーンショット

サンプルイメージ

スライダー管理画面

スライダーブロック

説明

プラグインを有効にすると、管理画面に [スライダー] メニューが追加されます。 [スライダー] メニューをクリックするとスライダー一覧ページが表示されます。このページで複数のスライダーを管理することができます。 まずは、スライダーを追加します。追加するには、[新規作成] をクリックします。 スライダー編集ページが表示されます。このページでスライダーを設定します。 タイトルにスライダーの名前 (「トップページ用スライダー」等) を設定します。 スライド ボックスにスライドを設定していきます。スライドを追加するには、ヘッダーの [+] をクリックします。スライドを削除するには、ヘッダーの [×] をクリックします。スライドの順番を入れ替えるにはヘッダーをドラック&ドロップして移動させます。 スライドの項目は下記のとおりです。

スライド項目

項目説明
メディアを選択ここをクリックして、メディアを選択します。
対応しているメディアは、画像、動画および YouTube (URL からの挿入) です。
画像
タイトル属性画像のタイトル属性です。空の場合は画像のタイトルが使用されます。
Alt タイトル (代替テキスト)画像の Alt タイトル属性です。空の場合は画像の Alt タイトルが使用されます。
リンク(URL)画像のリンクです。
新しいウィンドウで開く画像のリンクを新しいウィンドウで開くかどうかです。
コンテンツ
コンテンツ(HTML)スライドのコンテンツ (HTML)です。
オプション
タイトルコンテンツに表示するタイトル (HTML) です。
サブタイトルコンテンツに表示するサブタイトル (HTML) です。
ボタンのテキストコンテンツに表示するボタンです。
ボタンのリンクコンテンツに表示するボタンのリンクです。
新しいウィンドウで開くボタンのリンクを新しいウィンドウで開くかどうかです。
動画
自動再生自動再生するかどうかです。
Chrome や Safari で自動再生する場合は、ミュートする必要があります。
ループ繰り返し再生するかどうかです。
ミュート (消音)ミュート (消音) 状態で開始するかどうかです。
プレイバックコントロールプライバックコントロールを表示するかどうかです。
※ 添付ファイルの動画のみ有効です。
インラインで再生インラインで再生するかどうかです。
※ 添付ファイルの動画のみ有効です。
先読み動画の読み込み方です。
「なし」 (事前のファイル読み込み禁止)、「メタデータ」 (メタ情報だけを読み込む)、および「自動」 (動画ファイルを事前にダウンロードする) の3種類から選択します。
※ 添付ファイルの動画のみ有効です。

パラメーター ボックスでスライドのパラメーターを設定をします。パラメーターの項目は下記のとおりです。

パラメーター項目

項目説明
基本
幅、高さスライド(画像)のサイズ(幅、高さ) です。
省略可能です。実際の画像より小さく表示したい場合等に設定します。
効果アニメーション効果です。
“Slide”、”Fade”、”Cube”、”Coverflow” および “Flip” の5種類から選択できます。
ナビゲーションナビゲーションを表示する場合はチェックします。
ページネーションページネーションを表示する場合はチェックします。
コンテンツコンテンツを表示する場合はチェックします。
表示順スライドの順番を指定します。
「昇順」、「降順」および「ランダム」の3種類から選択します。
ループスライドのループの有効、無効を指定します。
テンプレート (Parallax など) によっては、常に無効になる場合があります。
効果速度アニメーション効果の速度です。
ミリ秒単位で指定します。空の場合は、デフォルト値 (300)となります。
自動高さ調整画像の高さに合わせて、スライドの高さを調整するかどうかを指定します。
グループ単位一度に切り替わるスライド数を指定します。
表示単位表示領域あたりのスライド数を指定します。
少数値を指定して、中央配置パラメータをチェックすると、左右に見切れたスライドが表示されます。
間のスペーススライド間の幅 (または高さ) を指定します。
中央配置スライドを中央配置する場合はチェックします。
表示単位が1以上の場合に有効です。
※ バージョン3.3.0より
自動再生
自動再生スライドを自動再生するかどうかを指定します。
遅延スライド間の遅延時間を指定します。
ミリ秒単位で指定します。
最後で停止最後のスライドで再生を停止するかどうかを指定します。
操作で停止スワイプやページ送りなどの操作後に、自動再生を停止するかどうかを指定します。
サムネイル
表示単位表示領域あたりのサムネイル数を指定します。
間のスペースサムネイル間の幅 (または高さ) を指定します。

設定が完了したら [公開] ボタンをクリックします。 あとは、画面上部(または使い方 ボックス) に表示されている、ショートコードをコピーして、投稿または固定ページに貼り付けてください。 このプラグインで使用しているスライダー スクリプト Swiper の詳細はこちらをどうぞ。

ショートコード

xo_slider ショートコード

[xo_slider]

スライダーを表示します。

項目説明
idスライダーの ID です。

例:

[xo_slider id="123"]

フィルター・アクションフック

テンプレート

テンプレートファイルを作成することで、Swiper の機能をフルに活用することができます。

テーマディレクトリの下記ディレクトリにテンプレートファイルを作成することでテーマ内のテンプレートが優先されて使用されるようになります。

(テーマディレクトリ)/xo-liteslider/templates/(テンプレートID)

テンプレートファイルの詳細は、プラグインのテンプレートファイル (template.php) のコメント欄を参照してください。

エクスポート・インポート

スライダーデータのエクスポート・インポートは、WordPress 標準のエクスポート・インポートで可能です。エクスポート画面 (管理画面のメニューより、[ツール]->[エクスポート]) を開き、[エクスポートする内容を選択] で「スライダー」を選択してください。

デモ

中央配置

表示単位: 1.4、間のスペース: 10、中央配置: チェック

サムネイル付き

3D カバーフローエフェクト

既知の不具合

  • 同一ページ内に、同一のスライダー (スライダー ID が同じ) を配置すると動作しない。

YouTube のスライダー

  • ブロックエディター内ではサイズが小さく表示される場合があります。
  • スライダーのループ表示に問題があります。YouTube の場合はループをオフにしてください。

更新履歴

v3.3.0

  • スライドの中央配置 (centeredSlides) パラメーターを追加しました。
  • 同封の Swiper ファイルを最新バージョン (6.7.5) にアップデートしました。

v3.2.2

  • 同封の Swiper ファイルを最新バージョン (6.4.5) にアップデートしました。

v3.2.1

  • WordPress 5.5 において、編集画面にエラーメッセージが表示される不具合を修正しました。

v3.2.0

  • 設定画面を追加しました。
  • スタイルシートを微調整しました。

v3.1.3

  • リンクを新しいウィンドウで開くオプションを追加しました。
  • 動画に関連する複数の不具合 (YouTube のコントロールパネルを非表示にできないなど) を修正しました。

v3.1.0

  • YouTube に対応しました。

v3.0.0

  • 動画 (添付ファイル) に対応しました。

v2.1.0

  • スライダーブロックを追加しました。

v2.0.0

  • スライダースクリプトをオリジナルの Liteslider から Swiper へ変更しました。これに伴い、プラグイン名も XO Liteslider から XO Slider に変更しました。
  • WordPress の最低必須バージョンを 4.9 へ変更しました。

v1.0.0

  • 最初のリリース