【プラグイン】WordPressにスライドショーを追加できる「Meta Slider」の使い方

「運営しているワードプレスのサイトに、スライドショーを入れたい。何か簡単にできる方法はないのかな」

こういった方向けの内容です。

スライドショーを入れるには「Meta Slider」というプラグインが有名で便利です。

というわけで、この記事ではMeta Sliderの設定や使い方についてお伝えしていきます。



Meta Sliderのインストール

まずは「Meta Slider」のインストール方法から解説していきます。
手順は以下の2ステップです。

  • STEP.1
    プラグインを検索

    ワードプレスの管理画面から、「プラグイン」→「新規追加」を選択し、「Meta Slider」を検索します。

  • STEP.2
    インストールして有効化

    検索した「Meta Slider」をインストールします。
    インストールが完了したらそのまま「有効化」をしておきましょう。

これで「Meta Slider」が使用できる状態になりました。

Meta Sliderの使い方

Meta Sliderの使い方に関してですが、以下の2点を抑えておけばOKです。

  • スライドショーの作り方
  • スライドショーの設置方法

それでは1つずつ解説していきます。

スライドショーの作り方

スライドショーの作成するには、スライドショーに組み込む画像が必要となりますので、ここは事前に準備しておきましょう。

スライドショーの作り方は以下の4ステップとなっています。

  • 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.3」の基本の設定がよく分からないという方もいると思うので、ここについて少し解説しておきます。

基本の設定について

以下が基本として設定できる6つの項目と、その内容についてです。

  • スライダーの種類:「FlexSlider/R.Slider/Nivo Slider/Coin Slider」の4種類から選べる
  • 幅:スライドショーの横幅
  • 高さ:スライドショーの高さ
  • 効果:スライド時の効果
  • 矢印:前後の画像への矢印のありなし
  • ナビゲーション:スライドショーの下部に点の表示

上記内容のように、基本となるデザインやサイズを、ある程度カスタマイズできるのがこの設定です。

とはいえ、どれがどうなるのか分かりにくい部分もあるので、プレビューで確認しながら作業を行うことをオススメします。

ちなみにスライダーの種類の中で、「Coin Slider」に関してはレスポンシブ対応していないので、これは避けた方がいいと思います。

高度な設定もある

「高度な設定」を開くことで、基本設定以上のカスタマイズが可能となります。

ここには約15項目ほど設定できる場所があり、カスタマイズ範囲はかなり広いです。
(項目の数はスライダーの種類によって異なります。)

少し項目が多すぎるので、ここではよく使う項目を4つ程度あげておきます。

  • 中央揃え:スライドショーをコンテナの中央に配置
  • 自動再生:スライドショーを自動再生する
  • ランダム:画像の順番をランダムにする
  • 停止ボタン表示:スライドショーにカーソルを合わせると一時停止される

この他にもたくさん項目はありますが、よっぽどのことがなければ、基本デフォルトでOKです。

スライドショーの設置方法

スライドショーの設置方法は主に2つあります。

  • 投稿記事への設置
  • テーマファイルへの設置

ここでは、上記2点の方法について解説していきます。

投稿記事への設置方法

まずは最も一般的な「投稿記事」へのスライドショーの設置方法です。

  • STEP.1
    スライダーを追加する

    スライドショーを入れたい部分にカーソルを合わせ、記事のエディタ画面で「スライダーを追加」のボタンをクリックします。

  • STEP.2
    スライドショーを挿入

    作成したスライドショーのタイトルを選択し、「スライドショーを挿入」のボタンをクリックしましょう。

これで記事内にショートコードが追加され、スライドショーが追加されました。
実際に「プレビュー」で確認してみるとこんな感じです。

ちなみにショートコードを使用する場合は、上記手順なしで、記事に直接ショートコードを追加するだけでOKです。

続いてテーマファイルへの設置に関してお伝えしていきます。

テーマファイルへの設置

テーマファイルに設置する場合は、どこに設置するかでやり方が変わってきます。
ここでは例として、「ヘッダー」にスライドショーを追加する方法で解説していきます。

※この作業を行う場合は、必ずバックアップを取っておくようにしてください。

  • STEP.1
    コードを確認する

    スライドショー作成時に「How to Use」の中に記載されている、phpを含めたコードを使用します。
    コードを確認して「Copy all」で全てコピーしておいたください。

  • STEP.2
    テーマヘッダーへ移動する

    ワードプレス管理画面から、「外観」→「テーマの編集」をクリックし、対象テーマのheader.phpを探します。

  • STEP.3
    コードを挿入

    テーマヘッダー(header.php)の「head」の中に、先ほどのコードを組み込みます。
    挿入が完了したら「変更を保存」をクリックして、内容を保存しておきましょう。

これでテーマファイルへの設置は完了です。
変更後のイメージは以下のような感じとなります。

テーマファイルへの挿入は、初心者には少し難易度が高いかもです。
下手すればサイト自体が白飛びしてしまうこともあるので、無理はしないようにしてください。

というわけで、今回の内容はこれで以上となります。

スライドショーはプラグインを使うことで簡単に設置できるので、手間をかけずに設置したいという方は、ぜひ試してみてください。

人気記事【初心者ブログにおすすめ】ワードプレスの有料テーマ5選+無料テーマ3選

人気記事【初心者向け】ゲームブログを収益化する方法+運営のコツを解説



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA