プラグイン「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の設定画面から修正して下さい。
最後に
無料版はいくつか機能が制限されていますが、それでも十分なカスタマイズが可能です。
また、設定項目が多く複雑に見えますが、スライドの追加と基本設定だけで問題なく機能するので、スライダーを表示させたい時には便利なプラグインです。
最近のコメント