XO Slider プラグイン

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

機能

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

インストール

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

WordPress 公式ディレクトリ

スクリーンショット

サンプルイメージ

スライダー管理画面

スライダーブロック

説明

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

テンプレート

テンプレート説明
Coverflow3D カバーフロー効果のスライダーを表示するテンプレートです。
動画はサポートされていません。
Defaultコンテンツ (タイトル、サブタイトル、コンテンツおよびボタン) を表示するシンプルなテンプレートです。
Parallaxパララックス効果のスライダーを表示するテンプレートです。
最初の画像を使用します。アニメーション効果は「スライド」のみです。
動画はサポートされていません。
Simpleシンプルなテンプレートです。
カスタマイズに最適です。
Thumbnailサムネイル付きのスライダーを表示するテンプレートです。
動画に対応 (バージョン3.8.0より) しています。
スライド時に動画を自動停止しスライド後に自動再生します(添付ファイルのみ)。
※ 同一ページに同じスライドを重複して配置できません。
Video動画に適したテンプレートです。
スライド時に動画を自動停止しスライド後に自動再生します(添付ファイルのみ)。

スライド項目

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

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

パラメーター項目

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

設定が完了したら [公開] ボタンをクリックします。 あとは、XO Slider ブロックを追加して、スライドを選択してください。クラシック エディターの場合は、使い方ボックス(画面右下部に表示)に表示されている、ショートコードを貼り付けてください。

このプラグインで使用しているスライダー スクリプト Swiper の詳細はこちらをどうぞ。

ショートコード

xo_slider ショートコード

[xo_slider]

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

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

例:

[xo_slider id="123"]

フック

カスタム・テンプレート

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

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

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

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

デモ

中央配置

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

サムネイル付き

サムネイル ページネーション

サムネイルの幅: 280、サムネイルの高さ: 30、サムネイルの上マージン:-38

CSS

#xo-slider-1234 .gallery-thumbs .swiper-slide {
	cursor: pointer;
	opacity: 1;
	box-sizing: border-box;
	border: 1px solid #aaa;
}
#xo-slider-1234 .gallery-thumbs .swiper-slide-thumb-active {
	border: 1px solid #fff;
}

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

ズームしながらフェイド切り替え

効果: Fade

CSS

@keyframes xo-slide-zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}
#xo-slider-1234 .swiper-slide-active img,
#xo-slider-1234 .swiper-slide-duplicate-active img,
#xo-slider-1234 .swiper-slide-prev img {
  animation: xo-slide-zoom 5s linear 0s normal both;
}

一定速度

効果: Slide

CSS

#xo-slider-1234 .swiper-wrapper {
	transition-timing-function: linear;
}

高さ揃え

高さ: (任意の値)、自動高さ調整: オフ

垂直方向

テンプレート: Simple、高さ: (必須)

CSS

#xo-slider-1234 .swiper-button-prev,
#xo-slider-1234 .swiper-button-next {
	left: 50%;
	transform: rotate(90deg);
	transform-origin: left center;
}
#xo-slider-1234 .swiper-button-prev {
	top: 10px;
}
#xo-slider-1234 .swiper-button-next {
	top: auto;
	bottom: 10px;
}

functions.php

function my_xo_slider_script_parameter( $params, $slide, $key ) {
	if ( 1234 == $slide->id ) {
		$params['direction'] = 'vertical';
	}
	return $params;
}
add_filter( 'xo_slider_script_parameter', 'my_xo_slider_script_parameter', 10, 3 );

Creative エフェクト (その1)

functions.php

function my_xo_slider_script_parameter( $params, $slide, $key ) {
	if ( 1234 == $slide->id ) {
		$params['grabCursor'] = true;
		$params['creativeEffect'] = [
			'prev' => [
				'shadow' => true,
				'translate' => [0, 0, -400],
			],
			'next' => [
				'translate' => ["100%", 0, 0],
			],
		];
	}
	return $params;
}
add_filter( 'xo_slider_script_parameter', 'my_xo_slider_script_parameter', 10, 3 );

Creative エフェクト (その2)

functions.php

function my_xo_slider_script_parameter( $params, $slide, $key ) {
	if ( 1234 == $slide->id ) {
		$params['grabCursor'] = true;
		$params['creativeEffect'] = [
			'prev' => [
				'shadow' => true,
				'translate' => ["-125%", 0, -800],
				'rotate' => [0, 0, -90],
			],
			'next' => [
				'shadow' => true,
				'translate' => ["125%", 0, -800],
				'rotate' => [0, 0, 90],
			],
		];
	}
	return $params;
}
add_filter( 'xo_slider_script_parameter', 'my_xo_slider_script_parameter', 10, 3 );

Creative エフェクト (その3)

functions.php

function my_xo_slider_script_parameter( $params, $slide, $key ) {
	if ( 1234 == $slide->id ) {
		$params['grabCursor'] = true;
		$params['creativeEffect'] = [
			'prev' => [
				'shadow' => true,
				'origin' => "left center",
				'translate' => ["-5%", 0, -200],
				'rotate' => [0, 100, 0],
			],
			'next' => [
				'origin' => "right center",
				'translate' => ["5%", 0, -200],
				'rotate' => [0, -100, 0],
			],
		];
	}
	return $params;
}
add_filter( 'xo_slider_script_parameter', 'my_xo_slider_script_parameter', 10, 3 );

FAQ

スライド画像のリンクが効かない

スライド画像のリンクは、コンテンツが有効の場合は効きません(クリックできない)。これは下記のような CSS で回避することができます。

.xo-slider .slide-content {
  pointer-events: none;
}

動画ファイルのサムネイルに「NO IMAGE」と表示される

動画ファイルのサムネイルは、動画ファイルのアイキャッチ画像が使用されます。Thumbnail テンプレートで動画ファイルを使用する場合、動画ファイルのアイキャッチ画像を指定する必要があります。

既知の不具合

  • YouTubu を含むスライドをループ表示できません。ループをオフにしてください。

更新履歴

バージョン説明
1.0.0最初のリリース。
2.0.0スライダースクリプトをオリジナルの Liteslider から Swiper へ変更しました。これに伴い、プラグイン名も XO Liteslider から XO Slider に変更しました。
WordPress の最低必須バージョンを 4.9 へ変更しました。
2.1.0スライダーブロックを追加しました。
3.0.0動画 (添付ファイル) に対応しました。
3.1.0YouTube に対応しました。
3.1.3リンクを新しいウィンドウで開くオプションを追加しました。
動画に関連する複数の不具合 (YouTube のコントロールパネルを非表示にできないなど) を修正しました。
3.2.0設定画面を追加しました。
スタイルシートを微調整しました。
3.2.1WordPress 5.5 において、編集画面にエラーメッセージが表示される不具合を修正しました。
3.2.2同封の Swiper ファイルを最新バージョン (6.4.5) にアップデートしました。
3.3.0スライドの中央配置 (centeredSlides) パラメーターを追加しました。
同封の Swiper ファイルを最新バージョン (6.7.5) にアップデートしました。
3.3.1一部のプラグインの影響でスライドが動作しない不具合を修正しました。
3.3.2バージョン3.3.1の更新時にエラーメッセージが表示される問題を修正しました。
3.3.3XSS 脆弱性を修正しました。
3.4.0管理画面にエラーメッセージが表示されることがある不具合を修正しました。
同封の Swiper ファイルを最新バージョン (8.3.1) にアップデートしました。
3.4.1スライダーのコンテンツが表示されない場合がある不具合を修正しました。
3.4.2同封の Swiper ファイルを最新バージョン (8.4.5) にアップデートしました。
スライド エフェクトを追加しました。
3.5.0新規のカスタムテンプレートを追加できる機能を追加しました。
3.6.0Swiper のバージョンを選択する設定項目を追加しました。
Swiper 9に対応しました。
3.6.1Swiper 9で正常に動作しない場合がある不具合を修正しました。
軽微な不具合を修正しました。
コードをリファクタリングしました。
3.6.2スライドが正しく動作しない場合がある不具合を修正しました。
3.6.3同封の Swiper ファイルを最新バージョン (9.1.0) にアップデートしました。
スライド エフェクトを追加しました。
3.7.0同封の Swiper ファイルを最新バージョン (9.1.1) にアップデートしました。
WordPress 6.2 に対応しました。
最小 PHP バージョンを7.0に上げました。
コードをリファクタリングしました。
3.7.1スライダーの一部のパラメータが保存されない不具合を修正しました。
Video テンプレート: スライド時にビデオを自動停止しスライド後に自動再生するように変更しました(YouTubo は未対応)。
3.7.2同封の Swiper ファイルを最新バージョン (9.3.1) にアップデートしました。
3.7.3同封の Swiper ファイルを最新バージョン (10.0.4) にアップデートしました。
WordPress 6.3 に対応しました。
3.7.4同封の Swiper ファイルを最新バージョン (10.2.0) にアップデートしました。
3.7.5同封の Swiper ファイルを最新バージョン (11.0.3) にアップデートしました。
WordPress 6.4 に対応しました。
Coverflow テンプレート: 表示単位を2の固定値からパラメータの値に変更しました。
3.7.6同封の Swiper ファイルを最新バージョン (11.0.5) にアップデートしました。
Video テンプレート: 複数のスライダーを配置した場合にスライドのビデオが再生されない問題を修正しました。
Video テンプレート: ビデオコントロールのダウンロード項目を無効化しました。
3.8.0Thumbnail テンプレート: 動画に対応しました。
Video テンプレート: 動画ファイルが自動再生されない場合がある問題を修正しました。
WordPress coding standards 3.0.1に準拠するようにリファクタリングしました。
3.8.1Thumbnail テンプレート: HTML 文法エラーを修正しました。
3.8.2すべてのテンプレート: ページネーションが正しく表示されない場合がある不具合を修正しました。
3.8.3同封の Swiper ファイルを最新バージョン (11.0.6) にアップデートしました。
3.8.4WordPress 6.5 に対応しました。
同封の Swiper ファイルを最新バージョン (11.0.7) にアップデートしました。