ザ・ボディショップは、人権擁護・環境保護・動物実験反対の先駆けエシカルトレードを行っています。




WordPressプラグイン「ImageSlider」スライドショーの簡単設定でセンスいいサイトに!

WordPressプラグイン

スライドショー「Image Slider」でサイトを彩る

イメージを伝えたい時に「動き」があるとちょっと感じがいいかな…とスライドショーを導入したくなります。

使用したことがある「Easing Slider」は「お使いのWordPressのバージョンと互換性がありません」と表示されているので、今回「Image Slider」を使用するので、忘備録として綴っていきます。

プラグイン導入前の注意

WordPressもバージョンアップしていくと、使用できなくなるプラグインが発生します。

インストールする画面の説明文で「お使いのWordPressのバージョンと互換性がありません」「使いのWordPressではテストされていません」と表示される場合、プラグインが正常に動作しない場合があるで、私は使用しないようにしています。

WordPressのバージョンアップの時に、プラグインが何らかの理由でいたずらして、トップ画面や文字の大きさなどが正常に表示されないことがあり、本当に苦労しました。
上記注意記述があっても使用したい方…インストールはご自身の責任でお願いします。

Image Sliderについて

このプラグインは、様々な種類の機器(パソコン・スマートフォン・タブレット端末など)や画面サイズに単一のファイルで対応できる「レスポンシブデザインに対応したスライドショー」のプラグインです。

スライドの幅や高さ、ナビゲーションボタンの設定などデザインが自由にカスタマイズできます。

スライドショーを記事内に入れることも簡単にできるので、デザインの理想を高めることができます。

他のスライドのプラグインでも同じ機能を持っている物が多くありますが、WordPressのバージョンによって作動しない場合がありますし、他のプラグインのバージョンアップや新規導入によってスライドされないなどのトラブルがあります。

Image Sliderを設定してみよう!

まずすべてのプラグイン新規導入方法と同じです

管理画面 > プラグイン > 新規追加 > Image Slider検索 >インストール >有効化
左メニュー > Image Slider > Add New Slider を選択

WordPressプラグイン「Image Slider」

①スライドショーの名前を入力
②スライド内に画像を指定するために「Add Images」をクリック!

メディアライブラリが表示される
WordPressプラグインImage Slider

指定したい画像を選択してメディアライブラリ画面右下「Insert Images」をクリックします。
WordPressプラグイン-Image Slider

③画像のタイトルのままでもいいのですが、それぞれの画像にタイトルを設定することができるので、私はスライドさせる順番に書き替えました。
プラグイン「Image Slider」WordPress
④画像をドラッグすることで表示する順番を入れ替えます。

 

下段は設定画面になっています。
各設定項目でスライドのサイズ変更や自動再生の有無などの表示について設定することができます。
スライドの幅は特別ではない限り「オート」にしておくと便利です。

英文になっているため、右クリックの「日本語に翻訳」に変更することで、私のように英文が苦手でも簡単に理解できます。

編集が完了

スライドを保存するため右上の「Save Slider」をクリック

保存したスライドの一覧とそれぞれのショートコードは 管理画面 >Image Slider > Sliders  のメニューでいつでも確認可能です。
どんな感じにできているか確認してみよう♪

投稿>新規追加でテストページを制作

WordPressの管理画面から「投稿」→「新規追加」を選択します。
「Easy Slider Lite」をクリックして保存したスライドタイトル名をクリックする。
選択することで、自動にショートコードが入力されます。
pr252
若しくは、テキスト画面で「Shortcode (click to copy)」を直接入力することも可能です。
IDの確認方法
左メニュー > Image Slider > Sliders で確認できます。
Shortcode ( click to copy )に記載されている[espro-slider id=◯]をコピーして貼り付けます。
◯がIDになっています。

実際に作動するかを確認して、スライドショーが表示されれば完了です。

他にも簡単なプラグインがありますので、合わせてお読みいただくとお役に立てるかもしれません。







サブコンテンツ