画像のスライドショープラグイン『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のショートコード”);を記述すれば完了です。

お試しください。