スライドショーを作成したい!WordPressプラグイン「XOスライダー」のご紹介

WPプラグイン
本ページはプロモーションが含まれています

WordPressのXOスライダープラグインは、魅力的なスライドショーを作成するための便利なツールです。以下に、その使い方と主な機能をまとめます。

プラグインのインストールと有効化

WordPressの管理画面にログインし、プラグインメニューから「新規追加」を選択してください。検索バーに「XO Slider」と入力し、プラグインを見つけたら「インストール」ボタンをクリックし、有効化します。
XOスライダー使い方

プラグインを有効化した後、XO SliderメニューがWordPressのサイドバーに表示されます。
ここからスライダー作成画面に進みます。
XOスライダー使い方
 

スライダーの作成

基本のスライダー作成手順を説明します。

(1)「新規作成」をクリックし、新しいスライダーを作成します。
XOスライダー使い方

(2)タイトルを記入

(3)メディアを選択
XOスライダー使い方
ここでメディアを追加できるので、スライダーに設定したい画像をアップロードし、「投稿に挿入」ボタンを押します。

(4)スライド画像の追加。
左にある+ボタンをクリックすると、スライドが追加されます。設定する枚数分追加しましょう。
XOスライダー使い方

※スライドの順番を変更したい場合は、移動したいスライダーにカーソルを持っていき、十字キーがでたら、クリック長押しでつまんで移動できます。
XOスライダー使い方

(5)テンプレート選択
テンプレートの種類は、全部で6種類あります。
それぞれのテンプレートはこの後説明します。
ここでは、「Default」で進めます。
XOスライダー使い方

(6)パラメーターの設定
ここで、画像の切り替わりの効果、画像の幅、速度等を変更します。
この説明では、デフォルトの状態で進めます。
XOスライダー使い方

(7)保存する

(8)スライダーの表示
使用法から、コード、タグをコピーします。
固定ページに記入したいときショートコード
PHPファイルに記入したいときテンプレートタグ
を選んでコピーして、表示させたいところに貼り付けするだけです。
XOスライダー使い方

このように表示されます。

 

XOスライダー機能の説明

(1)スライダーにタイトルやリンクボタンを設定したいとき
オプションに記入します。URLも記入することでリンクボタンも設定できます。新しいウィンドウで開きたいときはチェックを入れましょう。
XOスライダーの機能

下の画像のように、タイトル、サブタイトル、リンクボタンが表示されます。
残念なことに、文字の色など変更するパラメーターは存在しないようなので、写真によっては合わないことが出てきます。
XOスライダーの機能

オプションのところに直接コードを記入することも可能です。
XOスライダーの機能

ですが、この方法だと制限がでてきて自由にカスタマイズできない、、その時は、コンテンツ(HTML)に自由にコードを記入しましょう。

※記入例です。
XOスライダーの機能

※CSSも記入しでこのようにカスタマイズすることも可能です。ご参考までに。

いま子のケーキ屋さん

-ふわふわおいしいケーキ-
ご予約はこちら

(2)スライダーリンクかけたいとき
スライダー画像にリンクかけたいときは、パラメーターの「コンテンツ」のチェックを外しましょう。ここを外さないと画像をクリックしてもページに飛びません。
XOスライダーの機能

XOスライダー作成例

・テンプレート:Coverflow
※スライダー画像は4枚設定したほうが、見栄え良くなります。
XOスライダー作成例

 
・テンプレート:Parallax
※最初の画像だけ表示されます。画像は最初の1枚のみで他は空のスライダーを設定します。
XOスライダー作成例
XOスライダー作成例
 
・テンプレート:Simple 効果:Cards
XOスライダー作成例

 
・テンプレート:Thumbnail
※サムネイルつきのスライダーです。こちらは自動再生OFFにするのをオススメします。
XOスライダー作成例

 
・テンプレート:Video
※XOスライダーでは動画も設定することができます。

以上がXOスライダープラグインの基本的な使い方と機能の概要です。このプラグインを使って、魅力的なスライドショーを作成し、ウェブサイトのビジュアル面を向上させることができます。

タイトルとURLをコピーしました