XO Slider (旧名: XO Liteslider) プラグインは、スライダーを簡単に作成できるプラグインです。
機能
- サムネイルナビゲーション、カルーセルおよびコンテンツに対応しています。
- スライダースクリプトに Swiper を使用しています。
- フロント側では jQuery を使用していません。
- ブロックエディターに対応しています。
- 動画 (添付ファイル・YouTube) に対応しています。
- サムネイル付きの動画スライドに対応しています。
- テンプレートファイルを作成することで、Swiper の機能をフルに活用することができます。
インストール
- WordPress 管理画面->[プラグイン]->[新規追加] メニューより、[プラグインを追加] ページを開きます。
- 検索ボックスに、”XO Slider” と入力し検索します。
- XO Slider が見つかったら、[今すぐインストール] をクリックします。
- インストールが完了したら”プラグインを有効化”をクリックします。
WordPress 公式ディレクトリ
スクリーンショット
サンプルイメージ
サムネイル付きの動画スライド
スライダー管理画面
スライダーブロック
説明
プラグインを有効にすると、管理画面に [スライダー] メニューが追加されます。 [スライダー] メニューをクリックするとスライダー一覧ページが表示されます。このページで複数のスライダーを管理することができます。 まずは、スライダーを追加します。追加するには、[新規作成] をクリックします。 スライダー編集ページが表示されます。このページでスライダーを設定します。 タイトルにスライダーの名前 (「トップページ用スライダー」等) を設定します。 スライド ボックスにスライドを設定していきます。スライドを追加するには、ヘッダーの [＋] をクリックします。スライドを削除するには、ヘッダーの [×] をクリックします。スライドの順番を入れ替えるにはヘッダーをドラック＆ドロップして移動させます。 スライドの項目は下記のとおりです。
テンプレート
| テンプレート | 説明 |
|---|---|
| Coverflow | 3D カバーフロー効果のスライダーを表示するテンプレートです。 動画はサポートされていません。 |
| 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"]フック
- xo_slider_html
- xo_slider_script
- xo_slider_script_parameter
カスタム・テンプレート
テンプレートファイルを作成することで、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.0 | YouTube に対応しました。 |
| 3.1.3 | リンクを新しいウィンドウで開くオプションを追加しました。 動画に関連する複数の不具合 (YouTube のコントロールパネルを非表示にできないなど) を修正しました。 |
| 3.2.0 | 設定画面を追加しました。 スタイルシートを微調整しました。 |
| 3.2.1 | WordPress 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.3 | XSS 脆弱性を修正しました。 |
| 3.4.0 | 管理画面にエラーメッセージが表示されることがある不具合を修正しました。 同封の Swiper ファイルを最新バージョン (8.3.1) にアップデートしました。 |
| 3.4.1 | スライダーのコンテンツが表示されない場合がある不具合を修正しました。 |
| 3.4.2 | 同封の Swiper ファイルを最新バージョン (8.4.5) にアップデートしました。 スライド エフェクトを追加しました。 |
| 3.5.0 | 新規のカスタムテンプレートを追加できる機能を追加しました。 |
| 3.6.0 | Swiper のバージョンを選択する設定項目を追加しました。 Swiper 9に対応しました。 |
| 3.6.1 | Swiper 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.0 | Thumbnail テンプレート: 動画に対応しました。 Video テンプレート: 動画ファイルが自動再生されない場合がある問題を修正しました。 WordPress coding standards 3.0.1に準拠するようにリファクタリングしました。 |
| 3.8.1 | Thumbnail テンプレート: HTML 文法エラーを修正しました。 |
| 3.8.2 | すべてのテンプレート: ページネーションが正しく表示されない場合がある不具合を修正しました。 |
| 3.8.3 | 同封の Swiper ファイルを最新バージョン (11.0.6) にアップデートしました。 |
| 3.8.4 | WordPress 6.5 に対応しました。 同封の Swiper ファイルを最新バージョン (11.0.7) にアップデートしました。 |
| 3.8.5 | 同封の Swiper ファイルを最新バージョン (11.1.0) にアップデートしました。 |
| 3.8.6 | バージョン 3.8.5でスライドが機能しない可能性がある不具合を修正しました。 |