レスポンシブなスライダーを作成することができ、あらゆる端末に適応しています。また画像だけではなく、アニメーションはYouTube動画をスライダーにすることができます。
スライダーの設置位置は。コンテンツの上でもでも、メニューの上でも下でも簡単に設置できます。
スライダー設置した時のPCでの見え方です。
①メニューの上に設置②メニューの下に設置・影なし③メニューの下に設置・影あり
スライダー設置した時のスマートフォンでの見え方です。
Smart Slider 3をインストールし、有効化します。インストールすると左側の項目に「Smart Slider」という項目ができています。
左側の項目から「Smart Slider」→「Dashboard」を開きます。チュートリアルの動画があります。
NEW PROJECTをクリックすると次の2つから選べます。
利用したいテンプレートをクリックします。
Slide1をクリックすると次のように「Slide Backgroud」と表示されます。
Slide1の文字を編集し、文字にリンクを貼ります。文字をクリックすると文字をの編集ができます。
テンプレートのすべての文字を編集でき、ボタンのリンクの変更もできます。
STYLEタブでフォント、文字の色、サイズなど指定できます。
リンク先の説明文(長文)はタブレットやモバイルで表示するか否か(ON/OFF)を選べます。
スライダーの編集画面の下方のタブで「Autoplay」を開き、AutoplayをONにし保存します。
右上のプレビューボタンをクリックしプレビューで確認できます。
ショートコード、PHPコード、または投稿記事や固定ページの編集画面でスライダーを追加できます。
PHPコード
<?php
echo do_shortcode(‘‘);
?>
番号にはスライダーの番号が入ります。上の画像の場合は2です。
サイトにスライダーを設置するにはいくつかの方法があります。
コンテンツ上部とインデックスリストトップにスライダーを設置した例です。
外観→テーマエディッター→子テーマの表示する部分にPHPコードを貼ります。
どちらかにPHPコードを貼ります。
「main-before」にPHPコードを貼った場合とウィジェットでコンテンツ上部に設置した場合は少し表示のされ方が違います。
TOPページ・ホームページのみにスライダーを設置する場合
<?php
if( is_home() || is_front_page() ){
echo do_shortcode(‘‘);
}
?>
番号にはスライダーの番号が入ります。
アニメーションを設定する
自動再生の設定
最適化や遅延の設定
スライダーの画像のサイズが同一ではない場合の処理の仕方を指定
「Smart Slider」よりも簡素なスライダーで設置も簡単です。