「運営しているワードプレスのサイトに、スライドショーを入れたい。何か簡単にできる方法はないのかな」
こういった方向けの内容です。
スライドショーを入れるには「Meta Slider」というプラグインが有名で便利です。
というわけで、この記事ではMeta Sliderの設定や使い方についてお伝えしていきます。
スポンサーリンク
Meta Sliderのインストール
まずは「Meta Slider」のインストール方法から解説していきます。
手順は以下の２ステップです。
- STEP.1プラグインを検索
ワードプレスの管理画面から、「プラグイン」→「新規追加」を選択し、「Meta Slider」を検索します。
- STEP.2インストールして有効化
検索した「Meta Slider」をインストールします。
インストールが完了したらそのまま「有効化」をしておきましょう。
これで「Meta Slider」が使用できる状態になりました。
Meta Sliderの使い方
Meta Sliderの使い方に関してですが、以下の２点を抑えておけばOKです。
- スライドショーの作り方
- スライドショーの設置方法
それでは１つずつ解説していきます。
スライドショーの作り方
スライドショーの作成するには、スライドショーに組み込む画像が必要となりますので、ここは事前に準備しておきましょう。
スライドショーの作り方は以下の４ステップとなっています。
- STEP.1新規作成
ワードプレスの管理画面から「Meta Slider」をクリックし、「Create blank slideshow」を選択します。
（上記画像は初期状態での方法です。すでに作成したスライドショーがある場合は「Meta Slider」から上のメニューの「New」を選択しましょう。） - STEP.2画像の選択
上部にある「スライドを追加」のボタンをクリックして、画像を選択します。
画像は「メディアライブラリ」からすでにあるものを使ってもいいですし、「ファイルをアップロード」からその場で新しい画像を追加することもできます。
画像を選び終わったら、右下の「Add to slideshow」をクリックしましょう。
- STEP.3設定を行う
画面右側にある設定項目から、スライドショーの基本の設定を行います。
（設定に関しては下記で詳しくお伝えします。）設定が完了したら、右上の「保存」をクリックして内容を保存しておきましょう。
- STEP.4ショートコードのコピー
保存が完了したら、「How to Use」内に生成されているコードをコピーしておくと便利です。
ショートコードのみであれば「Click shortcode to copy」、phpを含めた全てをコピーする場合は「Copy all」をクリックしてください。なお、記事内に設置する場合は、ショートコードのみでOKです。
これでスライドショーを設置するための準備が整いました。
続いて設置方法へといきたいところですが、「STEP.３」の基本の設定がよく分からないという方もいると思うので、ここについて少し解説しておきます。
基本の設定について
以下が基本として設定できる６つの項目と、その内容についてです。
- スライダーの種類：「FlexSlider／R.Slider／Nivo Slider／Coin Slider」の４種類から選べる
- 幅：スライドショーの横幅
- 高さ：スライドショーの高さ
- 効果：スライド時の効果
- 矢印：前後の画像への矢印のありなし
- ナビゲーション：スライドショーの下部に点の表示
上記内容のように、基本となるデザインやサイズを、ある程度カスタマイズできるのがこの設定です。
とはいえ、どれがどうなるのか分かりにくい部分もあるので、プレビューで確認しながら作業を行うことをオススメします。
ちなみにスライダーの種類の中で、「Coin Slider」に関してはレスポンシブ対応していないので、これは避けた方がいいと思います。
高度な設定もある
「高度な設定」を開くことで、基本設定以上のカスタマイズが可能となります。
ここには約１５項目ほど設定できる場所があり、カスタマイズ範囲はかなり広いです。
（項目の数はスライダーの種類によって異なります。）
少し項目が多すぎるので、ここではよく使う項目を４つ程度あげておきます。
- 中央揃え：スライドショーをコンテナの中央に配置
- 自動再生：スライドショーを自動再生する
- ランダム：画像の順番をランダムにする
- 停止ボタン表示：スライドショーにカーソルを合わせると一時停止される
この他にもたくさん項目はありますが、よっぽどのことがなければ、基本デフォルトでOKです。
スライドショーの設置方法
スライドショーの設置方法は主に２つあります。
- 投稿記事への設置
- テーマファイルへの設置
ここでは、上記２点の方法について解説していきます。
投稿記事への設置方法
まずは最も一般的な「投稿記事」へのスライドショーの設置方法です。
- STEP.1スライダーを追加する
スライドショーを入れたい部分にカーソルを合わせ、記事のエディタ画面で「スライダーを追加」のボタンをクリックします。
- STEP.2スライドショーを挿入
作成したスライドショーのタイトルを選択し、「スライドショーを挿入」のボタンをクリックしましょう。
これで記事内にショートコードが追加され、スライドショーが追加されました。
実際に「プレビュー」で確認してみるとこんな感じです。
ちなみにショートコードを使用する場合は、上記手順なしで、記事に直接ショートコードを追加するだけでOKです。
続いてテーマファイルへの設置に関してお伝えしていきます。
テーマファイルへの設置
テーマファイルに設置する場合は、どこに設置するかでやり方が変わってきます。
ここでは例として、「ヘッダー」にスライドショーを追加する方法で解説していきます。
※この作業を行う場合は、必ずバックアップを取っておくようにしてください。
- STEP.1コードを確認する
スライドショー作成時に「How to Use」の中に記載されている、phpを含めたコードを使用します。
コードを確認して「Copy all」で全てコピーしておいたください。 - STEP.2テーマヘッダーへ移動する
ワードプレス管理画面から、「外観」→「テーマの編集」をクリックし、対象テーマのheader.phpを探します。
- STEP.3コードを挿入
テーマヘッダー（header.php）の「head」の中に、先ほどのコードを組み込みます。
挿入が完了したら「変更を保存」をクリックして、内容を保存しておきましょう。
これでテーマファイルへの設置は完了です。
変更後のイメージは以下のような感じとなります。
テーマファイルへの挿入は、初心者には少し難易度が高いかもです。
下手すればサイト自体が白飛びしてしまうこともあるので、無理はしないようにしてください。
というわけで、今回の内容はこれで以上となります。
スライドショーはプラグインを使うことで簡単に設置できるので、手間をかけずに設置したいという方は、ぜひ試してみてください。
コメントを残す