icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,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週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」

こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する