【コピペOK】Snow MonkeyでのVegas sliderの実装方法

リッチなスライダーで魅力的なWebサイトを

正式名称「Vegas Background SlideShow」。

Vegas Background SlideShow

vegas.jaysalvat.com

こちらをWordPressテーマであるSnowMonkeyに実装する方法を解説いたします。

まだまだSnowMonkeyを使った中級者向けのカスタマイズ情報が少ないのが現状です。

なので、自分でブログに残しておこうと思います。

WordPress テーマ Snow Monkey

どんな味付けにも染まる。高級お出汁のような WordPress テーマ、Snow Monkey

snow-monkey.2inc.org

というか、自分の備忘録のためにメモを残す感じです。笑

雑に書きますので、ご了承をお願いいたします。

htmlとcssの記述について

htmlのスライダーを表示したい任意の場所に記述します。

<div id="slider"></div>

cssは以下のように記述。

#slider {
  width: 100%;
  height: 100vh;
  min-height: 500px;
}

PHPの記述は子テーマよりプラグイン派

snowmonkey.phpに以下のコードを記述します。

add_action(
	'wp_enqueue_scripts',
	function() {
	
	wp_enqueue_style(
		'msm_style', // 独自のスタイルシート
		MY_SNOW_MONKEY_URL . '/style.css',
		[],
		filemtime( MY_SNOW_MONKEY_PATH . '/style.css' )
	);

	if( is_front_page() ) { // トップページのみでvegasを使用する場合
		wp_enqueue_style(
			'vagas_style', // vegas用のCSS
			'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.css',
			[],
		);
		wp_enqueue_script(
			'vagas', // vegas
			'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js',
			['jquery'],
		);

		wp_enqueue_script(
			'vagas_function', // vegasの設定
			MY_SNOW_MONKEY_URL . '/scripts/main.js',
			['vagas'],
			filemtime( MY_SNOW_MONKEY_PATH . '/scripts/main.js' ),
			true
		);
	}

});

プラグインについては書きサイトを参照ください。

Snow Monkey のカスタマイズは子テーマよりプラグインがオススメ！プラグインの雛形をダウンロードできるようにしました

子テーマの問題点 一般的に、テーマの設定では対応できないカスタマイズについては、子テーマを用意し、コードを書い…

snow-monkey.2inc.org

jsの記述について

任意のJsファイルに以下のように記述します。

jQuery(function($){
		$('#slider').vegas({
			timer: false,
			overlay: false,
			transitionDuration: 2000,
			delay: 6000,
			animation: 'random',
			animationDuration: 6000,
			shuffle: true,
			transition: 'blur',
			slides: [ // 画像は環境に合わせてください
				{ src: 'http://×××' },
				{ src: 'http://×××' },
				{ src: 'http://×××' }
			]
		});
	});

アニメーションをカスタマイズしたい時、挙動確認は以下より。

Transitions – Documentation – Vegas Background SlideShow

vegas.jaysalvat.com

完成！

完成したVegas sliderがこちら。

NeaRMaiN

新潟のWebマーケターがあなたの課題を解決

nearmain.net

これで実装は終了です。

他にもカスタマイズ次第で動画を流したり、レスポンシブで画像を変えることもできるようですが、今回はシンプルな記述のみにいたしました。

困っている方の参考になれば嬉しいです。