XO Slider (旧名: XO Liteslider) プラグインは、スライダーを簡単に作成できるプラグインです。
目次 [閉じる]
機能
- サムネイルナビゲーション、カルーセルおよびコンテンツに対応しています。
- スライダースクリプトに Swiper を使用しています。
- フロント側では jQuery を使用していません。
- ブロックエディターに対応しています。
- 動画 (添付ファイル・YouTube) に対応しています。
- テンプレートファイルを作成することで、Swiper の機能をフルに活用することができます。
インストール
- WordPress 管理画面->[プラグイン]->[新規追加] メニューより、[プラグインを追加] ページを開きます。
- 検索ボックスに、”XO Slider” と入力し検索します。
- XO Slider が見つかったら、[今すぐインストール] をクリックします。
- インストールが完了したら”プラグインを有効化”をクリックします。
WordPress 公式ディレクトリ
スクリーンショット
サンプルイメージ
スライダー管理画面
スライダーブロック
説明
プラグインを有効にすると、管理画面に [スライダー] メニューが追加されます。 [スライダー] メニューをクリックするとスライダー一覧ページが表示されます。このページで複数のスライダーを管理することができます。 まずは、スライダーを追加します。追加するには、[新規作成] をクリックします。 スライダー編集ページが表示されます。このページでスライダーを設定します。 タイトルにスライダーの名前 (「トップページ用スライダー」等) を設定します。 スライド ボックスにスライドを設定していきます。スライドを追加するには、ヘッダーの [＋] をクリックします。スライドを削除するには、ヘッダーの [×] をクリックします。スライドの順番を入れ替えるにはヘッダーをドラック＆ドロップして移動させます。 スライドの項目は下記のとおりです。
スライド項目
| 項目 | 説明 |
| メディアを選択 | ここをクリックして、メディアを選択します。 対応しているメディアは、画像、動画および 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以上の場合に有効です。 ※ バージョン3.3.0より |
| 自動再生 | |
| 自動再生 | スライドを自動再生するかどうかを指定します。 |
| 遅延 | スライド間の遅延時間を指定します。 ミリ秒単位で指定します。 |
| 最後で停止 | 最後のスライドで再生を停止するかどうかを指定します。 |
| 操作で停止 | スワイプやページ送りなどの操作後に、自動再生を停止するかどうかを指定します。 |
| サムネイル | |
| 表示単位 | 表示領域あたりのサムネイル数を指定します。 |
| 間のスペース | サムネイル間の幅 (または高さ) を指定します。 |
設定が完了したら [公開] ボタンをクリックします。 あとは、画面上部（または使い方 ボックス） に表示されている、ショートコードをコピーして、投稿または固定ページに貼り付けてください。 このプラグインで使用しているスライダー スクリプト 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) のコメント欄を参照してください。
エクスポート・インポート
スライダーデータのエクスポート・インポートは、WordPress 標準のエクスポート・インポートで可能です。エクスポート画面 (管理画面のメニューより、[ツール]->[エクスポート]) を開き、[エクスポートする内容を選択] で「スライダー」を選択してください。
デモ
中央配置
表示単位: 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 カバーフローエフェクト
一定速度
CSS
#xo-slider-1234 .swiper-wrapper {
transition-timing-function: linear;
}
高さ揃え
高さ: （任意の値）、自動高さ調整: オフ
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 );既知の不具合
- 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に上げました。 コードをリファクタリングしました。 |