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

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

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

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

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

 

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

 

大石ゆかり

田島メンター!よく画像のスライドショーってあるじゃないですか。それを記事に入れたいんですけど、できますか〜?

田島悠介

プラグインを使えばできるよ。いくつかプラグインがあるけど。

大石ゆかり

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

田島悠介

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

 

Image Sliderとは

このプラグインは、レスポンシブに対応したスライドショーのプラグインです。

スライドの幅や高さはもちろん、ナビゲーションボタンの設定など自由にカスタマイズすることも可能です。

また、メディアライブラリ内の画像を使用したスライドショーを記事内に入れることができます。

 

Image Sliderの使い方

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

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

 

有効化したら、管理画面の左メニューから「Image Slider」「Add New Slider」を選択します。

image-slider_p_1

一番上にスライドショーの名前を入力します。スライド内に画像を追加するには「Add Images」をクリックします。

image-slider_p_2

メディアライブラリが表示されるので、追加したい画像を選択し右下の「Insert Images」をクリックします。
※この時にCtrlボタンを押しながら項目をクリックすることで複数の画像を選択することができます。

image-slider_p_3

各項目はドラッグすることで表示する順番を入れ替えることが可能です。

また、ここでそれぞれの画像にタイトルをつけることができます。画像をスライドから削除する場合は右上の×ボタンを押します。

image-slider_p_4

各設定項目ではスライドの大きさや自動再生の有無、ナビゲーションボタンやタイトルの表示について設定することができます。
編集が完了したら、右上の「Save Slider」をクリックするとスライドが保存されます。
保存したスライドの一覧とそれぞれのショートコードは「Image Slider」「Sliders」のメニューでいつでも確認可能です。

image-slider_p_6

WordPressの管理画面から「投稿」「新規追加」を選択します。
記事内のスライドショーを挿入したい部分で「Easy Slider Lite」をクリックします。

image-slider_p_7

作成したスライドショーの一覧が表示されるので、使用する項目を選択して「Insert Shortcode」をクリックします。
ここで表示される名前はImage Sliderの設定画面で入力したものになります。

image-slider_p_8

自動でショートコードが入力されました。

image-slider_p_9

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

image-slider_p_10

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

今回の記事は以上です。

 

大石ゆかり

きれいなスライドショーですね!

田島悠介

そうだね。大きさや自動再生とかをマウス操作で設定できるのも良いね!

大石ゆかり

はい、そうですね〜!!!

 

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