WordPressでSEOに強いスライドショーを簡単実装「Meta Slider」

Pocket

Webサイトにスライドショーを挿入するときってjqueryを利用して、色々と工程がありますよね。
WordPressだとプラグインの導入でそれが可能になります。

スポンサーリンク

■使いやすいスライドショー「Meta Slider」

日本語に対応してて、設定しやすいプラグインです。
コードは自分で任意の位置に記述して下さい。

Meta Sliderのスクショ

投稿や固定ページにも貼り付けられるところも良い点の一つ。
細かい設定もわかりやすくて、大体のことはできるんじゃないでしょうか。

■「Meta Slider」の設定

有効化すると、ダッシュボードのメニューに「Meta Slider」の項目が増えています。

  1. まず「最初のスライドショーを作成」を選択
  2. スライドショーに追加する画像を選択
  3. テキストやURLの記述
  4. 「設定」や「高度な設定」で細やかなスライダーの動作設定
  5. 「使い方」にあるコードを任意の場所にコピペ

導入の流れは以上です。
「設定」や「高度な設定」は人によって違うと思いますので概要を記述しておきます。

■設定

  • 「Flex Slider」~ : 使いたい効果やテーマで任意に変更が必要
  • 幅 : 横幅px
  • 高さ : 縦幅px
  • 効果 : フェードなどの効果の指定
  • テーマ : 見た目の変更
  • 矢印 : 前後への矢印の表示
  • ナビゲーション : 画像の下に表示される点

■高度な設定

  • 引き伸ばす : 親コンテナいっぱいに伸縮
  • 中央揃え : スライドショーを中央揃え
  • 自動再生 : 自動トランジション
  • Image Crop : 自動切り抜き
  • カルーセル・モード : 100%幅でスライドショーを表示
  • ランダム : スライドの順番をランダムにする
  • 停止ボタン表示 : ポインタを合わせると一時停止する
  • 逆戻り : アニメーション方向の反転
  • スライドの遅延 : 各画像の表示時間
  • アニメーションの速度 : アニメーションの速度
  • スライドの方向 : スライドの方向を選択
  • イージング : アニメーションイージングの効果
  • 前のテキスト : 「前へ」項目のテキストを設定
  • 次のテキスト : 「次へ」項目のテキストを設定

■開発用オプション

  • CSSクラス : 追加したいカスタムCSSクラスを指定
  • CSSを出力 : 独自CSSを含めたい場合はチェックを外す
  • JSを出力 : 独自JavaScriptを含めたい場合はチェックを外す
  • 競合モードなし : フレックススライダー化を遅延する

設定が終わったら「保存してプレビュー」で動作を確認しましょう。
実際に設置せずに確認することができるので、ありがたい機能ですね。


何か質問、誤情報、誤字などがあればコメントでお願いします。

 
Pocket