Morning&Lunch
配信とインテリアの実話映画
PCとスマホとゲーム
WordPressを簡単に
Morning&Lunch
Morning&Lunch

モーニング&ランチ

配信とインテリアの実話映画
配信とインテリアの実話映画

Style Note

PCとスマホとゲーム
PCとスマホとゲーム

webNote

WordPressを簡単に
WordPressを簡単に

WordPress

previous arrow
next arrow
Shadow

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

MetaSliderWP プラグイン
MetaSlider
WP プラグイン

サイト内に簡単にスライドショーを設置 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」は画像内に文字を入れたり、文字にリンクを貼ったりできます。

タイトルとURLをコピーしました