「スライダー機能ってプラグインで追加できるのかな？」
「超初心者でも1人でスライダー機能を実装できるだろうか？」
そんな人におすすめなのが、今回紹介するXO Sliderです。
日本人が開発したXO Sliderは、シンプルな操作性ではじめての人でも違和感なくスライダーを設定できる使いやすさがあります。完全無料で使えるのも魅力です。
本記事では、XO Sliderでスライダーを作成・設置する方法について解説します。
XO Sliderとは
XO Sliderは、WordPressにスライダー機能を実装できる無料のプラグインです。
専門知識が全くない人でも使えるシンプルな操作性で、手軽にスライダー機能を追加できます。
ヘッダーやフッターだけでなく、記事内やサイドバーなど、場所を選ばず設置できるのもプラグインならではの自由さです。「スライダー機能がほしいけど、テーマを変えるのはちょっと……」という方はXO Sliderを試してみることをおすすめします。
XO Sliderの特徴
XO Sliderは、日本人プログラマーである石鷹さんが開発したプラグインです。
完全な国産プラグインなので、設定メニューの一部が英語だったり、不自然な日本語だったりすることはありません。
スッキリした管理画面
スライダープラグインは設定画面が複雑になりがちなのですが、XO Sliderはスッキリしています。複雑すぎて使いたくなくなるプラグインもありますが、XO Sliderならはじめての人でも問題ないでしょう。
6種類のスライダーテンプレートから選べる
XO Sliderは、6種類のスライドテンプレートが用意されています。
Default
Parallax
Simple
Coverflow
Thumbnail
Video
これだけ使えれば十分ではないでしょうか。
画像だけでなく、動画のスライドにも対応しているので、YouTubeを使って滞在時間をアップさせるなんてこともできそうですね。
テキストやリンクボタンの設置にも対応
XO Sliderは、スライドに文字入れやボタンを設置することも可能です。
自由度は低いですが、それでも必要十分な機能になっているかなと。おすすめ記事やキャンペーン情報などをアピールしたいときに使えます。
カスタマイズ性が低い分、余計なことを考えずにスライダーを完成させられる点は、人によってメリットに感じるでしょう。
丁寧なサポート
XO Sliderの開発者である石鷹 (ishitaka)さんは、利用者の問い合わせに対して丁寧にサポートしてくれます。
過去のトラブルシューティングを見ても、的確な回答によって迅速に問題が解決していました。
開発者本人が対応してくれるので安心です。
また、プラグインの仕様自体がシンプルなので、他のプラグインやテーマと干渉しにくいのもよい点かなと感じました。
XO Sliderのインストール方法
XO Sliderのインストールは、WordPressのプラグイン追加ページで「XO Slider」と検索してインストールできます。
または、下のダウンロードボタンから直接ダウンロードした後、プラグインファイルをwp-content/pluginsディレクトリにアップすることも可能です。
プラグインのインストール方法については、下記記事で詳しく解説しています。
WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインストール方法は、下記の2つになります。基本的には、...
XO Sliderの使い方：スライダーの作り方
インストールが完了したら、早速XO Sliderでスライダーを作っていきましょう。
はじめにスライダーの新規作成方法を紹介した後で、詳しい設定項目の解説を行います。
スライダーの新規作成方法
はじめにWordPressの管理画面から「スライダー」→「新規作成」の順にクリックしてください。
スライダーの新規作成画面が表示されます。
スライドのタイトルを入力して「メディアを選択」をクリックしましょう。
WordPressのメディア画面が表示されます。
アップロードした画像を選択しましょう。
画像を追加する際は「＋」をクリックしてください。
画像の順番を入れ替えたいときは、スライドメニューの上部を押し続けるとドラッグ&ドロップできます。
スライドしたい画像のセットが完了したら右上の「保存」をクリックしてください。
これで、スライダーの新規作成が完了しました。
作成したスライドは「スライド一覧」に追加されています。
スライダーの設置方法
XO Sliderで作成したスライダーをWordPressに設置していきましょう。
はじめに管理画面から「スライダー」→「スライド一覧」の順で進み、設置したいスライドのタイトルをクリックしてください。
スライドの編集画面が表示されます。下にスクロールすると右下に「使用法」という項目があるので、中にあるショートコードをコピーしましょう。
コピーしたコードを任意の場所に貼り付ければ、スライドが表示される仕組みです。
例えば、サイドバーにテキストウィジェットを追加して、ショートコードを貼り付けてみます。
サイドバーにスライドが追加されていることがわかります。
ちなみにブロックエディタの場合は、投稿画面からスライドを選択できます。
ブロックの追加ボタンを押して、「xo」と検索してプラグイン名をクリックしましょう。
ブロックが追加されたら、リストから挿入したいスライドを選択して「スライダーを使用」をクリックします。
これで記事内にスライダーを設置できました。
現在のバージョンでは、デフォルトでレスポンシブに対応しているので、スマホで表示した際もピッタリサイズになってくれます。
XO Sliderの設定項目
ここでは、XO Sliderの各種設定項目について解説します。
- スライドの設定項目
- テンプレートの設定項目
- パラメーターの設定項目
スライドの設定項目
スライドの設定の使い方を見ていきましょう。
画像の設定
タイトルとAlt属性に何も入力しない場合、指定した画像に設定されているものが使われます。別のものを指定したいときのみ追加しましょう。
リンクを設定したい場合は「リンク (URL):」にURLを入力すればOKです。任意で「新しいウィンドウで開く:」も使えます。
ちなみにAlt属性はSEO的な効果もあるので、設定しておくとよいでしょう。
ブログ記事を書いていると内容を補足するためや、リンク先のイメージを示すために画像を挿入することがあると思います。 画像を挿入時には、alt属性を正しく活用していますか？意外と見落としているケースも少なくありません。 実は読者にも検索エンジンにも有効で、SEO的にも効果を望めます。というわ...
コンテンツの設定
コンテンツは、任意でHTMLを使って記述ができます。
専門知識のない方は、ノータッチで問題ありません。
オプションの設定
オプションでは、文字入れやボタンの設置ができます。
特別難しい設定はありません。必要事項を入力すれば、下画像のようにスライドにテキストやボタンを設置できます。
サブタイトルで改行や空行を入れたい場合は以下のタグを入力してください。
<br>1つで改行、2つで空行を作れます。
スライドに文字が詰まっていると読みづらいので、適宜バランスを取ってみてください。
動画の設定
動画の設定項目は以下の通りです。
- 自動再生：オンにする自動でスライドします
- ループ：オンにするとエンドレスでスライドします
- ミュート：動画の音声をミュートします。
- プレイバックコントロール：コントロールを表示する
- インラインで再生：スライド内で再生できるようにする
- 先読み：動画の読み込み方を指定できる
動画はプレイバックコントロールから下の項目は、添付した動画のみ対応しています。YouTube動画は非対応です。
ちなみにYouTube動画をスライドに指定するには「メディアを選択」→「URLから挿入」と進み、YouTubeのURLを入力すれば設定できます。
複数の動画をスライドさせる際は、自動再生をオフにしておくのがおすすめです。
テンプレートの設定項目
テンプレートでは、全部で6種類のスライダーデザインから選択できます。
- Default
- Parallax
- Simple
- Coverflow
- Thumbnail
- Video
気になる項目を選択すると、下にプレビューが表示されます。
設置場所や目的に合わせて、最適なテンプレートを選択しましょう。
パラメーターの設定項目
パラメーターの設定項目を紹介します。
基本の設定
基本設定は、各スライダー機能の調整ができます。
デフォルトの状態でスタンダードなスライダーとして動作するようになっているので、そのままでも問題ありません。
「効果」ではスライドの演出効果を変更できます。
スライド画像にリンクを設置する際は「コンテンツ」をオフにしてください。オンにしたままだとリンクをクリックできない点を覚えておきましょう。
自動再生の設定
自動再生をオンにすると、スライダーが常時動作します。
「遅延」では、次のスライドに移るまでの時間を設定できます。デフォルトは3秒です。「最後で停止」をオンにすると、最後のスライドが表示された時点で、自動再生が止まります。
「操作で停止」をオンにすると、ユーザーがスライドに触れた際に自動再生をオフにできます。
サムネイルの設定
スライダーテンプレートで「Thumbnail」を選んだ際に表示されるサムネイル画像のデザインを指定できます。
「サムネイルは表示したいけど、デフォルトだと画像が大きすぎる」といったときに、適宜調整するとよいでしょう。
好みに合わせてカスタマイズを行ってみてください。もちろんデフォルトのままでも問題ありません。
まとめ
XO Sliderは、完全日本語で使える国産のスライダープラグインです。
「スライダー機能を使ってみたいけど、自分で設定できる自信がない」と思っている方は、ぜひとも試してみてください。管理画面がシンプルなので、専門知識がない人でも説明書なしで使えるでしょう。
スライダー自体も6種類のテンプレートから選ぶだけなので、難しい設定は一切ありません。
ヘッダーやフッターに設置するのはもちろん、サイドバーや記事内など、さまざまな場所で活用できます。便利なXO Sliderを使って、あなたのサイトの快適性をアップさせてみてはいかがでしょうか。
コメント