プラグイン「Meta Slider」を追加すると、コンテンツスライダーを作成することができます。
無料版ではいくつか機能が制限されていますが(この手のプラグインは無料版だと大抵機能が制限されています)、無料版でも十分カスタマイズできますし、設定もそれほど難しくありません。また、スライダーはショートコード及びPHPで好きな場所に設置することができます。
Contents
使い方
Meta Sliderを追加&有効化し、ダッシュボードの「Meta Slider」から各種設定を行います。
スライドショーを作成
Meta Sliderの設定画面から、「New」ボタンをクリックして最初のスライドショーを作成します。

スライドショーを作成
設定はいつでも変更できます。とりあえず作成して、細かい調整は後から行って下さい。
スライダーの名前を変更
スライダーを複数作る場合は、名前を変更しておくと識別しやすくなります。

スライダーの名前を変更
画像スライドの設定
「スライドを追加」ボタンをクリックして、スライドさせたい画像を追加します。

スライドを追加
既にアップロード済みの画像から選択及び新規に画像をアップロードして使います(無料版では画像以外の項目は制限されています)。この際、画像は挿入するスライダーと同じ幅と高さに統一することをおすすめします。スライダーを挿入するスペースの幅と高さは事前に調べておきましょう。

画像スライドを選択
画像スライドが追加できたら、それぞれの画像に設定を入力します(任意)。

画像スライドの設定
キャプション | 画像の上に重ねて表示させるテキスト文字 |
---|---|
URL | 画像にリンクを貼りたい時はURLを入力 |
画像タイトルテキスト | 画像のtitle属性「title=””」 |
画像の代替文字列 | 画像のalt属性「alt=””」 |
切り抜きの位置 | 画像がスライダーのサイズよりも大きい時に表示する位置 |
※画像はドラッグ&ドロップで順番の入れ替え可能です。
基本設定
デザインや機能の異なる4つのスライダーが用意されています。
無料版では、一番カスタマイズの選択肢が豊富な「Nivo Slider」がお勧めです。「Coin Slider」は「width=”100%”」が設定できないだけでなく、レスポンシブに対応していないのでお勧めしません。
幅と高さはスライダーを挿入するスペースのサイズを入力します(「Coin Slider」以外は自動でコンテンツの幅に縮小される)。他はお好みで設定して下さい。

基本設定
幅 | スライドショーの横幅 |
---|---|
高さ | スライドショーの高さ |
効果 | スライド遷移エフェクト |
テーマ | スライドショーのテーマ(デザイン) |
矢印 | 前後への矢印を表示する |
ナビゲーション | スライダーの下部にナビゲーション用の点を表示 |
設定できたら、「保存」ボタンをクリックします。
高度な設定
画面右下の「高度な設定」を開くと、更に細かい設定ができます。
但し、選択したデザインによって設定できる項目は異なります。また、スライダーによっては機能しない設定もあるので、特に変更する必要はありません。分からない方はデフォルト推奨です。

高度な設定
引き伸ばす | 親コンテナいっぱい伸縮(非推奨) |
---|---|
中央揃え | スライドショーを中央揃え(任意) |
自動再生 | 自動トラジション(任意) |
画像の切り抜き | 画像の切り抜き方法(スマート切り抜き) |
ランダム | スライドの順番をランダムにする(任意) |
停止ボタン表示 | スライダーにカーソルを載せた時にスライドショーを一時停止させる(推奨) |
スライドの遅延 | 各画像の表示時間(ミリ秒) |
アニメーションの速度 | アニメーションの速度(ミリ秒) |
スライスの数 | スライスの数(効果をスライスに設定している場合) |
スクエアの数 (幅) | スクエアの横の数(効果を角切りに設定している場合) |
スクエアの数 (高さ) | スクエアの縦の数(効果を角切りに設定している場合) |
前のテキスト | 「前へ」項目のテキストを設定(任意) |
次のテキスト | 「次へ」項目のテキストを設定(任意) |
全ての設定が終わったら、「保存」をクリックして完了です。
スライダーの挿入
記事に挿入
記事に挿入する時は、編集画面の「スライダーを追加」ボタンをクリックします。

「スライダーを追加」ボタンをクリック
スライダーを選択して、「スライドショーを挿入」をクリックします。

スライダーを選択して「スライドショーを挿入」をクリック
ショートコードが挿入されれば完了です。

Meta Sliderのショートコード
実際にスライダーが綺麗に表示されているか確認して下さい。

Meta Sliderを記事に挿入
おかしなところがあれば、Meta Sliderの設定画面から修正して下さい。
テーマファイルに挿入
テーマファイルに挿入する時は、Meta Slider編集画面の右下に表示されているコードをコピーして、表示させたい場所に貼り付けます。

テーマファイルに挿入する時のコード
1 |
<?php echo do_shortcode('[metaslider id="スライダーIDorタイトル"]'); ?> |
挿入できたら、スライダーが綺麗に表示されているか確認して下さい。

Meta Sliderをテーマファイルに挿入
先ほど同様、おかしなところがあれば、Meta Sliderの設定画面から修正して下さい。
最後に
無料版はいくつか機能が制限されていますが、それでも十分なカスタマイズが可能です。
また、設定項目が多く複雑に見えますが、スライドの追加と基本設定だけで問題なく機能するので、スライダーを表示させたい時には便利なプラグインです。
最近のコメント