- 2014-7-26
- Update 2018-5-7
- Wordpress
WordPressで簡単スライドショー
みなさんこんにちは!ミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です!WordPressで作ったサイトに簡単にスライドショーを設置できるプラグイン「Meteor Slides」のご紹介です。
私がWordPressを始める前は、Flashでスライドショーを作っていて、embedタグやらなんやら設定がかなり面倒だったのですが、流石WordPress!プラグインでこんなに簡単に設置できるなんて・・・。と感動したものです。
という事で、今やサイト作成に欠かせないスライドショーを設置してみましょう。
Meteor Slidesの導入と設定
導入方法
- プラグイン新規追加
- 「Meteor Slides」検索
- インストール
- 有効化
- 設定>スライド
日本語化する方法
このプラグインは英語になっていますが、FTPでlanguagesフォルダを少し触るだけで日本語化できます。英語でもそれ程難しくはないと思いますが、FTPを触れる方は日本語化しておいた方が良いかもしれませんね。
手順
- wp-content>plugin>smeteor-slides>languages
- meteor-slides-ja_JA.moをmeteor-slides-ja.moに名前を変更します。
右クリック>名前の変更で[ _JA ]を削除するだけでOKです。
これで日本語になっているはずです。万が一の為ファイルのバックアップをしてから実施するようにしましょう。FTPがわからなければ無理して日本語化する必要はありません。設定項目自体は変わりませんのでそのまま先に進めていきましょう。
設定
スライド>設定
まず初めに、新規スライドのカテゴリを作成します。後で複数のスライドを作る場合に迷わないように、スライドショーに適した名前を付けてあげておいた方がいいでしょう。
名前とスラッグを入力したらスライドショーを追加をクリックして下さい。
- マウスオーバー時に表示されるようになります。
- 画像を挿入して下さい。
- 画像にリンクを貼る場合はここにURLを入力してください。
- 登録するスライドショーにチェックを入れて下さい。
現在は先ほど作ったテストスライドというスライドショーしかありませんが、複数のスライドがある場合はここに表示されるようになります。
表示させたい画像の数だけ画像を追加し、全て完了したら公開をクリックします。これでいつでもサイトに表示できる準備が整いました。
スライド>設定でスライドのアニメーション等を設定できます。
スライド数
表示させるスライド画像の数を設定します。
スライドの高さ
スライド画像サイズの高さを入力します。
スライドの幅
スライド画像サイズの幅を入力します。
効果スタイル
スライドのアニメーションを設定します。
効果スピード
スライド切り替え時の時間を設定します。
スライド表示時間
スライドするまでの時間を設定します。
スライドナビゲーション
画像にページ送りを表示するようにします。
表示させてみる
サイトに表示させるには、ショートコード入力とPHPへの入力方法があります。作成したスライドの数によりコードが変わってきますので、以下に記載しておきます。
スライドが1つしかない場合
以下のショートコードを投稿ページや固定ページに記載します。
[meteor_slideshow]
任意の場所に表示させたい場合はPHPに以下のコードを入力します。
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
スライドが複数の場合
スライド>スライドショーで作成したスラッグをコードに追加し、表示させたいスライドを選択できます。
ショートコード
[meteor_slideshow slideshow=“スラッグ”]
PHP挿入コード
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow( "スラッグ", "" ); } ?>
まとめ
サイトを開いたときに目を引く事が出来るスライドショーの完成です。実際にはスライドショーのクリック率ってあまりよくないみたいですが、訪問者に与えるインパクトは小さくありません。簡単に設置できますので是非利用してみて下さい。
最近では当サイトのTCD Gorgeousのように標準装備されているものも多くなったようです。プラグインを増やしたくないという方はそういったテーマを利用してみてもいいかもしれませんね。