画像のスライドショープラグイン『Meta Slider』

クライアント様からの要求に「画像をスライドショーの様に変化させたい」という機能があります。
数年前くらいからの流行りなので要求も増えています。
そこで、今回は画像のスライドショーを実現するWordPressプラグイン『Meta Slider』のご紹介です。(設定項目が多いのでここでは必要最低限のものを説明します)
↑こんなものです。
『Meta Slider』をインストールすると管理画面のサイドバーに下図の様に設定欄が出現します。
設定欄にマウスを持っていくとプルダウン画面が出ます。その中から上図の様に”META Slider”を選択しクリックします。
上図の様な画面になりますので、新規スライドを作成するために”+”マークをクリックします。はじめてスライドを作る場合は”新規スライダ”として画面が既に開いています。
”先ず、画像のサイズを入力します。次にスライドを追加”をクリックします。
新規画像をアップロードする場合は”ファイルをアップロード”、既に存在する画像を選択する場合は”メディアライブラリ”をクリックします。そして、画像を選択したら”スライダーに追加”をクリックしてスライドに追加します。ここではメディアライブラリーから選択しました。
※ Meta SliderにはCropと言ってスライド画像を設定サイズに合わせる機能があります。しかし、画枠がずれたり、解像度が下がったりなどなど見栄えが悪くなります。基本的に設定したサイズと同じサイズのスライド画像をアップロードすると良いでしょう。
スライド画をアップロードすると上図の様な画面になります。リンク先などを設定すれば一枚のスライド画の作業は完了です。これをスライド数回繰り返します。
回数分のスライドのアップロード作業が完了しましたら、重要な設定をします。”スライドの遅延”と”アニメーションの速度”です。”スライドの遅延”はスライドが次のものに切り替わるまでの時間です。”アニメーションの速度”はスライド画像が切り替わる時の時間です。msで設定します。(1000msが1秒です)
”スライドの遅延”と”アニメーションの速度”の設定が終了したら上部にある”保存してプレビュー”ボタンをクリックします。
プレビュー画面で画像のチェックや設定時間等の確認をします。
スライドに名前を付けて完了です。(名前を付けた後、保存をお忘れなく)
次はスライドショーをサイトに埋め込む方法です。固定ページや投稿記事に埋め込む場合には上図の様に「使い方」で”ショートコード”を選択後、コードをコピーして固定ページや投稿記事の編集画面にそのまま貼り付けます。
しかし、実際の使い方で最も多いのはWordPressのヘッダー画像をスライドに変えたいことではないでしょうか。その場合はPHP記述を変更しなければなりませんからショートコードはそのままでは使用出来ません。
Meta Sliderは非常に親切なプラグインなのでちゃんとPHP記述のコードも出力します。上図の様に「使い方」で”テンプレートに含める”を選択するとdo_shortcode(“ショートコード”); の記述を表示します。PHPではこれを使用します。
WordPressのheader.phpやfront-page.php内でショートコードは使用できないのでPHP表記do_shortcode(“ショートコード”);を使って実現します。
具体的には上図の様にWordPressオリジナルのヘッダー画像の表示記述をコメントアウト(無効化)します。そしてPHP表記do_shortcode(“Meta Sliderのショートコード”);を記述すれば完了です。
お試しください。