サイト内に簡単にスライドショーを設置 MetaSlider
WordPressのサイトに簡単にスライダー・スライドショーを設置できるプラグインです。
メディアライブラリーから好きな画像を選び、4つの異なるスライドショーから選び設置します。
MetaSlider のインストール
https://wordpress.org/plugins/ml-slider/
MetaSlider をインストールし、有効化します。
MetaSlider のインストール後
インストールすると左側の項目に「MetaSlider」という項目ができています。MetaSliderを開くと、「Thanks for using MetaSlider」と表示されますが、どちらを選んでも構いません。
MetaSlider の設定手順
３つの手順から選べます。
- Gutenbergで利用する
- クイックスタート（画像をドロップする）
- 空のスライドショーを作成する
MetaSlider スライドショーを作成する
「空のスライドショーを作成する」を選択し始めます。
スライドを追加
「スライドを追加」をクリックするとメディアライブラリが開き、画像を選択できます。
- 画像を選択
- スライドショーを追加をクリック
「画像を選択→スライドショーを追加」を繰り返し、複数の画像を選択できます。
MetaSlider スライドにURLを貼る
画像を選択すると、次のように表示され各画像に次のことができます。
- キャプションを付ける（手動でも入力できます）
- URLをリンクさせる
プレビューで確認し、保存（右上のボタン）します。
MetaSliderの4種類のスライダー
スライダーは4種類（右上のタブ）から選べます。
- FlexSlider （右から左へスライドします）
- R. Slides
- Nivo Slider
- Coin Slider
スライダーレベルとコインスライダーはタイル状に画像が現れるような変わった表示のされ方をします。
FlexSlider
R. Slides
Nivo Slider
Coin Slider
MetaSlider スライダーのサイズの調整・スライド切替の効果
スライダーのサイズやスライドの切り替えの効果、ナビゲーションの表示非表示の設定ができます。
MetaSlider スライダー・スライドショーを表示する
スライダー・スライドショーを表示するには2つの方法があります。
- ショートコード
- PHPコード
スライドショーをテーマファイルに追加する場合は、PHPコードを貼ります。
使い方に「Click shortcode」と「Copy all」があるので、テーマファイルに貼る場合は「Copy all」を選択します。
| Click shortcode | ショートコード（オレンジの部分）がコピーされる |
| Copy all | PHPコードがコピーされる |
<?php
echo do_shortcode(‘[metaslider id=”番号”]’);
?>
上の画像の場合、番号は14300です。
Cocoon にスライダーを設置する
MetaSlider テーマファイルにPHPコードを貼る
外観→テーマエディッター→子テーマの表示する部分にPHPコードを貼ります。
- head-insert.php
- main-before.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」は画像内に文字を入れたり、文字にリンクを貼ったりできます。
