【SANGOカスタマイズ】画像スライダーの実装

エッグくん

当サイトはWordpressテーマ「SANGO」をベースに、素人が試行錯誤をしながらカスタマイズしています。SANGOは標準でヘッダーにアイキャッチ画像を表示できますが、スライダー画像は表示できません。そこでスライダー画像が表示できるように、WordpressプラグインのMetaSliderを実装してみました。無料バージョンでも十分使用できます。

MetaSliderのインストール

参考 MetaSlider – WordPress プラグイン | WordPress.org

スクリーンショット 2019 04 02 20 52 03

上のリンクからMetaSliderをダウンロードします。ダウンロードしたらWordpressにインストールして有効化してください。


スクリーンショット 2019 04 02 21 27 40

有効化すると管理画面に左画像のようにメニューが表示されます。MetaSliderをクリックして設定ページに移ります。

画像の登録・スライダーの設定

画像を登録
スライド追加ボタンを押して、画像を登録してください。画像は予めサイズ調整が必要です。

ちなみに当サイト

お問い合わせ


ではイラストレーターを使用し、幅2,880px、高さ720pxでアートボードを作成し画像を編集しています。


スクリーンショット 2019 04 02 22 08 38

スクリーンショット 2019 04 02 22 23 58

画像を登録したら、右上からスライダーの設定に入ります。

スライダーの種類はFlexSliderがスッキリしていておすすめですが、お好みで選んでください。

幅と高さを、登録した画像比に合わせて入力します。低くなるほど画像が荒くなります。

エフェクトは無料バージョンは数が限られます。こだわりが無ければフェードでいいと思います。

「矢印」は画像左右に表示される切り替えボタンです。

「ナビゲーション」は画像の下部に表示される、現在表示されている画像のナビゲートです。

「Slideshow Theme」なるものがその下にありますが、無視してください。「Remove theme」をクリックで消してもスライダーの表示は変わりません。

スクリーンショット 2019 04 02 22 26 58

次に右下の「高度な設定」を設定します。

ここもお好みですが私は「引き伸ばす」「自動再生」「ランダム」にチェックを入れています。「開発用オプション」はそのままでいいです。

「スライドの遅延」は各画像の表示時間(ミリ秒)を設定します。

「アニメーションの速度」は有料バージョンにしかアニメーション使用できませんので、無料バージョンの方は無視してください。

PHPコードをペースト

How to Use

「How to Use」からPHPコードをコピーして「index php」に貼り付けていきます。ちなみに各スライドごとにIDが変わりますので、新規にスライドファイルを作成したときは都度書き換えが必要です。

注意
コードの書き換えの前にバックアップをとっておきましょう。

Index

「SANGO」では「index.php」がトップページになりますので、小テーマへ「index.php」を貼り付けます。

貼り付けた子テーマの「index.php」の2行目の後にコピーしたコードを貼り付けます。
PHP
<?php get_header(); ?>
	<?php get_template_part('parts/home/featured-header');//アイキャッチを出力 ?>
ここに貼り付け

スクリーンショット 2019 04 02 21 25 40

エッグくん

トップページに表示されました。

表示を消したいときは、プラグインを停止します。

このサイトのように、事前に画像を加工すると個性的なトップページになりますので、イラストレーターやフォトショップで加工するこをオススメします。