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」を選択します。
一番上にスライドショーの名前を入力します。スライド内に画像を追加するには「Add Images」をクリックします。
メディアライブラリが表示されるので、追加したい画像を選択し右下の「Insert Images」をクリックします。
※この時にCtrlボタンを押しながら項目をクリックすることで複数の画像を選択することができます。
各項目はドラッグすることで表示する順番を入れ替えることが可能です。
また、ここでそれぞれの画像にタイトルをつけることができます。画像をスライドから削除する場合は右上の×ボタンを押します。
各設定項目ではスライドの大きさや自動再生の有無、ナビゲーションボタンやタイトルの表示について設定することができます。
編集が完了したら、右上の「Save Slider」をクリックするとスライドが保存されます。
保存したスライドの一覧とそれぞれのショートコードは「Image Slider」→「Sliders」のメニューでいつでも確認可能です。
WordPressの管理画面から「投稿」→「新規追加」を選択します。
記事内のスライドショーを挿入したい部分で「Easy Slider Lite」をクリックします。
作成したスライドショーの一覧が表示されるので、使用する項目を選択して「Insert Shortcode」をクリックします。
ここで表示される名前はImage Sliderの設定画面で入力したものになります。
自動でショートコードが入力されました。
記事を保存・公開するとWordPressのサイト上でスライドショーが表示されます。
このようにスライドショーが表示されれば完了です。
今回の記事は以上です。
きれいなスライドショーですね!
そうだね。大きさや自動再生とかをマウス操作で設定できるのも良いね!
はい、そうですね〜!!!
[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。