WPプラグイン「MetaSlider」でスライドショーを実装する

ぜひ読んでほしい方

・WordPressサイトの見栄えをよくするためにスライドショーを取り入れたい
・コーディングなしで手軽に実装したい

スライドショー用プラグイン「MetaSlider」

 WordPressサイトでスライドショーを実装しようとしたときに、一部のテーマを除いてスライドショー機能がデフォルトでついていないケースがほとんどです。スライドショーをイチからコーディングすることも可能ですが、慣れていないと時間と手間がかかるもの。

 実はなんと、WordPressプラグインである「MetaSlider」を使えば、コーディング一切なしで、サイトの好きなところにスライドショーを設置することができます。

スライドショーに使う画像の設定方法

metaslider

 上の画像で赤く囲んでいる「MetaSlider」という項目をクリックすると、下のような画面が表示されます。

 そうしたら、「スライドを追加」のところをクリックして、使いたい画像をアップロードします。

metaslider

 ちなみにですが、上に表示されている画像から順にスライドショーで表示されるので、画像をドラッグして上下に移動させることで順番を変えることが出来ます。また、上の画像で赤く囲んでいる隣にある、「Preview」を押すとスライドショーのプレビューを確認することができます。

そのほか、細かい設定方法

 次に、スライドショーの細かい設定についてです。

 水色で囲んだ部分の幅、高さの項目がサイト上のスライドショーエリアの幅や高さになります。効果という項目は、スライドショーの画像が入れ替わるときのアニメーション効果のことです。矢印という項目は、よく様々なサイトスライドショーの横の部分に表示される、サイト閲覧者が画像を切り替えられるやつです。ナビゲーションはスライドショーの下にある、任意の画像に遷移することができるものです。

 言葉で上手く説明できないので、ピンと来ない方は実際に動かしてみてください(汗)

metaslider

 また、画面下の方に行くと「高度な設定」という中項目があると思います。

 「スライドの遅延」で1ページ当たりの表示時間でしたり、「アニメーション速度」では画像の切り替えにかかる時間などを変えることができます。

 また、100%幅にチェックを入れると、先ほど設定した幅に関係なく画面の幅いっぱいにアニメーションが表示されるようになります。

 この辺については、自分で実際に動かしてみると楽しいかもしれません。

設定したスライドショーをサイトに表示させる

 いよいよ、ここまで設定したスライドショーをサイトページで表示させてみましょう。

 赤く囲んだ部分にある、ショートコードを使います。

 方法は2つあり、一つはショートコードとよばれる[metaslider id=”○○”]の部分を、ブロックエディターのショートコードのブロックを使って張り付けるものです。こちらの方が簡単ですが、ブロックエディターを使うため、固定ページや投稿ページにしか張り付けることが出来ません。

 もう一つは、<?php echo ・・・・ ?>の部分全体をテーマエディタの該当箇所に貼る方法です。こちらの方法でしたら、少しだけハードルは上がりますが、サイト内の任意の場所にスライドショーを設置できます。

 

WPプラグイン「MetaSlider」でスライドショーを実装する” に対して78件のコメントがあります。

  1. ピンバック: what is tadalafil troche
  2. ピンバック: best websites for essays
  3. ピンバック: essay about the help
  4. ピンバック: professional essay writer
  5. ピンバック: act essay help
  6. ピンバック: essay writers canada
  7. ピンバック: custom essays for cheap
  8. ピンバック: online essay help chat
  9. ピンバック: mba essay help
  10. ピンバック: custom essays service
  11. ピンバック: buy viagra in pharmacy uk
  12. ピンバック: mexican pharmacy wellbutrin
  13. ピンバック: best online pharmacy ativan
  14. ピンバック: order cialis from canada
  15. ピンバック: top sale viagracialis
  16. ピンバック: tadalafil price
  17. ピンバック: sildenafil for sale uk
  18. ピンバック: generic viagra online canada
  19. ピンバック: cialis over the counter
  20. ピンバック: cialis drug class
  21. ピンバック: where to get generic viagra
  22. ピンバック: cialis australia online
  23. ピンバック: best seller cialis
  24. ピンバック: kroger pharmacy simvastatin
  25. ピンバック: pharmacy usa store
  26. ピンバック: xanax pharmacy prices
  27. ピンバック: cialis price south africa
  28. ピンバック: sildenafil discount coupon
  29. ピンバック: sildenafil generic 50 mg
  30. ピンバック: online pharmacy viagra 100mg
  31. ピンバック: viagra singapore
  32. ピンバック: order viagra online nz
  33. ピンバック: cheap cialis generic online
  34. ピンバック: tadalafil generic usa
  35. ピンバック: tadalafil tablets 20 mg
  36. ピンバック: gabapentin swim
  37. ピンバック: metronidazole klebsiella
  38. ピンバック: valtrex toothache
  39. ピンバック: lyrica pain medicine
  40. ピンバック: fake nolvadex
  41. ピンバック: lisinopril bestellen
  42. ピンバック: metformin lipogenesis
  43. ピンバック: iperpotassiemia lasix
  44. ピンバック: rybelsus empty stomach
  45. ピンバック: lowest dose of rybelsus
  46. ピンバック: 911
  47. ピンバック: link
  48. ピンバック: list
  49. ピンバック: a
  50. ピンバック: zoloft not working anymore
  51. ピンバック: metronidazole lactobacillus
  52. ピンバック: keflex for chalazion
  53. ピンバック: 150 mg viagra for sale
  54. ピンバック: cephalexin and accutane
  55. ピンバック: anxiety medication lexapro

コメントは受け付けていません。