WordPressで画像をかっこよく見せるVEGAS

投稿日：2017年11月8日

vegas2

WordPressで画像をかっこよく見せる

ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与えることができる、jQuery系のプラグインをいろいろ探していました。数多くある中で今回は「VEGAS2」というのを紹介したいと思います。

どんな感じにしたかったのかというと、

1.画像をスライドショーのように切り替わる

2.画像が切り替わるときにフェードでゆっくり変わる

3.画像がだんだん大きくなる（動画のように見える）

4.画像と動画を混合させることが出来る

5.簡単にできる（これが1番かも）

VEGAS BACKGROUND SLIDESHOWのインストール

1.公式サイトからダウンロードします。https://vegas.jaysalvat.com/

vegasダウンロード

ダウンロードしたファイルを解凍すると以下のファイルが入っています。

vegas—-?overlays（←）

—–vegas.css（←）

—–vegas.js

—–vegas.min.css

——vegas.min.css.map.map

——vegas.min.js（←）

——vegas.min.map.map

使うのは、（←）が付いているファイルとフォルダの合計3つです。

もちろん、jQueryが必要です（以下のような感じで<head></head>内に入っていると思います。なければ追加してください。）

<script src="http://code.jquery.com/jquery.min.js"</script>

2.WordPressに読み込む

<head></head>内に先ほどのファイルを読み込みます。（overlaysフォルダは、テーマのimagesフォルダがあればそこに入れます。imagesフォルダがなければ作成してもいいです。）

ちなみに、子テーマを利用しているなら、子テーマの【functions.php】に記述すればいいです。

例：

<?php
if ( !defined( 'ABSPATH' ) ) {
exit;
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'vegas', get_stylesheet_directory_uri() . '/css/vegas.css' );
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'vegas-min', get_stylesheet_directory_uri() . '/js/vegas.min.js');
}

これでひとまず準備完了！