Sponsor

サイトにスライダーを設置するプラグイン「MetaSlider」の使い方

MetaSlider WP プラグイン
MetaSlider
Sponsor

サイト内に簡単にスライドショーを設置 MetaSlider

WordPressのサイトに簡単にスライダー・スライドショーを設置できるプラグインです。

メディアライブラリーから好きな画像を選び、4つの異なるスライドショーから選び設置します。

MetaSlider のインストール

MetaSlider
MetaSlider

https://wordpress.org/plugins/ml-slider/

MetaSlider をインストールし、有効化します。

MetaSlider のインストール後

インストールすると左側の項目に「MetaSlider」という項目ができています。MetaSliderを開くと、「Thanks for using MetaSlider」と表示されますが、どちらを選んでも構いません。

MetaSlider
MetaSlider

MetaSlider の設定手順

3つの手順から選べます。

  • Gutenbergで利用する
  • クイックスタート(画像をドロップする)
  • 空のスライドショーを作成する
MetaSlider
MetaSlider

MetaSlider スライドショーを作成する

「空のスライドショーを作成する」を選択し始めます。

スライドを追加

「スライドを追加」をクリックするとメディアライブラリが開き、画像を選択できます。

  1. 画像を選択
  2. スライドショーを追加をクリック

「画像を選択→スライドショーを追加」を繰り返し、複数の画像を選択できます。

MetaSlider
MetaSlider
MetaSlider
MetaSlider

MetaSlider スライドにURLを貼る

画像を選択すると、次のように表示され各画像に次のことができます。

  • キャプションを付ける(手動でも入力できます)
  • URLをリンクさせる
MetaSlider
MetaSlider

プレビューで確認し、保存(右上のボタン)します。

MetaSliderの4種類のスライダー

スライダーは4種類(右上のタブ)から選べます。

  • FlexSlider (右から左へスライドします)
  • R. Slides
  • Nivo Slider
  • Coin Slider

スライダーレベルとコインスライダーはタイル状に画像が現れるような変わった表示のされ方をします。

FlexSlider

MetaSlider
MetaSlider

R. Slides

MetaSlider
MetaSlider

Nivo Slider

MetaSlider
MetaSlider

Coin Slider

MetaSlider
MetaSlider

MetaSlider スライダーのサイズの調整・スライド切替の効果

スライダーのサイズやスライドの切り替えの効果、ナビゲーションの表示非表示の設定ができます。

MetaSlider
MetaSlider

MetaSlider スライダー・スライドショーを表示する

スライダー・スライドショーを表示するには2つの方法があります。

  • ショートコード
  • PHPコード

スライドショーをテーマファイルに追加する場合は、PHPコードを貼ります。

MetaSlider
MetaSlider

使い方に「Click shortcode」と「Copy all」があるので、テーマファイルに貼る場合は「Copy all」を選択します。

Click shortcodeショートコード(オレンジの部分)がコピーされる
Copy allPHPコードがコピーされる

<?php
echo do_shortcode(‘[metaslider id=”番号”]’);
?>

上の画像の場合、番号は14300です。

Cocoon にスライダーを設置する

MetaSlider テーマファイルにPHPコードを貼る

外観→テーマエディッター→子テーマの表示する部分にPHPコードを貼ります。

  • head-insert.php
  • main-before.php

どちらかにPHPコードを貼ります。

PHPコードを貼る
PHPコードを貼る

「head-insert.php」と「main-before.php」の違いは下記リンクをご参考に。

TOPページ・ホームページのみにスライダーを表示させる

<?php
if( is_home() || is_front_page() ){
echo do_shortcode(‘[metaslider id=”番号”]’);
}
?>

Smart Slider 3

「Smart Slider 3」は画像内に文字を入れたり、文字にリンクを貼ったりできます。