Meta Sliderの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。今回は、スライドショーで画像を表示するのに便利なプラグイン、Meta Sliderの使い方を紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

WordPressのプラグインの使い方を初心者向けに紹介する記事です。

今回は、スライドショーで画像を表示するのに便利なプラグイン、Meta Sliderの使い方を紹介します。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター!画像のスライドショーを記事に貼りたいんですけど、WordPressにそういう機能ってないんですか?

田島悠介

標準ではないけどプラグインを使えばできるよ。

大石ゆかり

おすすめってありますか〜?

田島悠介

「Meta Slider」なんてどうかな?

 

Meta Sliderとは

Meta Sliderは、jQueryを用いた4種類のコンテンツスライダーが使えるプラグインです。

スライドのサイズやエフェクトの強弱など細かく設定できるので、一つのスペースに画像や動画をいくつも見せたい人にはおすすめのプラグインでしょう。

また、無料で使えるのも特徴です。

Meta Sliderの使い方

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

 

有効化すると、管理画面の左メニューに「Meta Slider」という項目が追加されているはずです。

metaslider_p_1

Meta Sliderでスライドショーを追加していきます。

「最初のスライドショーを作成」のタブをクリックします。

metaslider_p_2

「新規スライダー」の部分をクリックするとスライドに名前を付けることができます。
スライドに画像を追加するには右の「スライドを追加」をクリックします。

metaslider_p_3

メディアライブラリが開かれるので、スライドに使用したい画像を選択してから右下の「スライダーに追加」をクリックします。
※画像を選ぶ時にCtrlボタンを押しながらクリックすることで複数の画像を選択することができます。

metaslider_p_4

各画像タブの「一般」では画像にタイトルを付けることができます。(設定によってはスライド上で表示されます)
URLを入力すると画像にリンクを貼ることが可能です。

metaslider_p_5

「SEO」タブでは必要に応じてtitle属性とalt属性を入力することができます。この項目は入力していなくてもスライド作成には問題ありません。

metaslider_p_6

「Crop」タブでは、画像のサイズがスライドのサイズより大きい場合にどの部分を表示させるかを設定することができます。

metaslider_p_7

また、この編集画面で各画像の項目をドラッグすることで表示させる順番をいつでも入れ替えることができます。

metaslider_p_8

右メニューではスライドの種類を4種類から選ぶことができます。今回は”Flex Slider”を使用しています。
ここではスライドの大きさやナビゲーションの表示形式などを設定することができます。

metaslider_p_9

メニュー右下に表示されているショートコードはスライドを記事に貼り付ける際に使用するものです。
Meta Sliderはビジュアルエディタからスライドを直接挿入するメニューがあるため、このコードはここで控えておかなくても大丈夫です。

metaslider_p_11

右上メニューの「保存」あるいは「保存してプレビュー」をクリックするとスライドが保存されます。
この際「保存してプレビュー」を選択するとその場でどの様に表示されるか確認することができます。

metaslider_p_12

スライドを保存したらWordPress管理画面から「投稿」「新規追加」を選択します。
記事内のスライドを追加したいところでビジュアルエディタの「スライダーを追加」をクリックします。

metaslider_p_13

作成したスライドショーの一覧が表示されます。ここで表示されるのは最初に「新規スライダー」の部分をクリックして入力した名前です。
貼り付けたいスライドの名前を選択して「Insert slideshow」をクリックします。

metaslider_p_14

記事内に以下のようなショートコードが追加されました。このコードはMeta Sliderの管理画面で表示されていたものと同じものです。
(作成した各スライドにはidが自動で設定されます)

metaslider_p_15

記事を保存・公開するとWordPressのサイト上でスライドショーが表示されます。

metaslider_p_16

このようにスライドショーが表示されれば完了です。

今回の記事は以上となります。

 

大石ゆかり

単にスライドショーっていうだけでなく、効果も選択できるのが良いですね!

田島悠介

そうだね。それにスライドショーを用意しておけばいつでもすぐに挿入できるのも良いね♪

大石ゆかり

はい♪

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。