WordPressが捗る!超オススメjQueryプラグインまとめ12選

WordPressが捗る!超オススメjQueryプラグインまとめ12選

みなさんこんにちは!滅多に執筆しないエンジニアの鈴木駿也です。

いきなりですが、皆さんはWordPressのプラグインがごちゃごちゃになって管理しづらくなっていませんか?

最近はWordPressでサイト作りされる方も多いのではないでしょうか。

WordPressでサイトを作り、画像に動きをつけたり、サイトの見た目をリッチにするため、WordPressのプラグインを大量に入れたりしていませんか?

それが原因でサイトが重くなったり、プラグインの管理ができなくなったりしていませんか?

WordPressプラグインに頼らなくとも、jQueryプラグインを使えば簡単に欲しい機能が作れます!

今回は簡単かつ利便性の高いものに絞ってjQueryプラグインを紹介していきます。

画像系

まずは画像系のjQueryプラグンから紹介していきます。

サイトを作る上で、画像を綺麗に表示させたり、動きを足したりなどといったことは沢山あるかと思います。そんな場面で活躍してくれるjQueryプラグイン達です!

1. LightCase

画像の拡大表示をするためのプラグインです。

WordPressにも沢山あるLightBox系プラグイン。これくらいの機能ならWordPressプラグインで済ましてしまいがちですが、こういった小さな機能をjQueryプラグインで実装してしまえば、WordPressプラグインがすっきりしますよ!

このプラグインは拡大のアニメーションを選べるのが特長です。また、レスポンシブ対応なのでWordPressとの相性も抜群です!

実装例

Step1.

<link rel="stylesheet" type="text/css" href="path/to/lightcase.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="path/to/lightcase.js"></script>

Step2.

 jQuery(document).ready(function($) {
 $('a[data-rel^=lightcase]').lightcase();
 });

Step3.

<a href="path/to/media.jpg" data-rel="lightcase">Your link description or thumb</a>

2. Slick.js

画像のスライドショーを可能にするプラグインです。

サイトのトップページによくある見出しようの画像が勝手にスライドしているアレをつくれます!

スライドショー系のプラグインとしては、今最も人気のあるプラグインです。

人気の理由は機能の多さが圧倒的!!

実装例

Step1.

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

Step2.

$(document).ready(function(){
 $('.your-class').slick({
 setting-name: setting-value
 });
});

Step3.

<div class="your-class">
 <div>your content</div>
 <div>your content</div>
 <div>your content</div>
</div>

3. tiltShift.js

このプラグインは、画像をトイカメラで撮ったかのように自動的に加工してくれるプラグインです。

トップの画像選びや加工といった作業は慣れていないとかなり辛いものです…

そんな時にtiltShift.jsを使えば誰でもオシャレなサイトに仕上げることができるかも?

実装例

Step1.

<link rel="stylesheet" href="jquery.tiltShift.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.tiltShift.js"></script>

Step2.

$(function(){
$('.tiltshift').tiltShift();
});

Step3.

<img src="画像パス" class="tiltshift"
data-position="66" //中心点
data-blur="2" //ブラー具合
data-focus="10" //フォーカス具合
data-falloff="15" //ブラーエリア
data-direction="y"> //方向

メニュー系

次に、メニュー関連のjQueryプラグインの紹介。

WordPressのテーマのメニューでは実現できない、もっと使いやすくしたい、自分のサイトにあった機能をつけたいなど、WordPressだけでは足りない部分を補ってくれるメニュー系プラグインの紹介です!

1. Slidebars

最近よく見かける「ドロワーメニュー」を簡単に作成できるプラグインです。

このプラグインは左右のどちらでもドロワーメニューを実装することができます。

また、メニューの領域も選べたり、レスポンシブ対応と利便性もかなり高いのでオススメです!!

実装例

Step1.

<link rel="stylesheet" href="slidebars.min.css">
<script src="slidebars.min.js"></script>

Step2.

<div class="menu sb-toggle-right"><a href="">MENU</a></div>
<div id="sb-site">ここにコンテンツ</div>
<div class="sb-slidebar sb-right">
<div class="sb-right-inner">ドロワーメニュー</div>
</div>

Step3.

$.slidebars();

Option.

var mySlidebar = new $.slidebars({
  siteClose: true,// コンテンツ部分タッチでメニューを閉じる
  disableOver: 480,// ドロワー部分の領域
  hideControlClasses: true, // ドロワー指定以上の領域でのボタン表示
  scrollLock: true// メニューを開いてるときのコンテンツスクロール
});

2. slicknav

プルダウン式のメニューをとても簡単に実装することができるプラグイン。

今ではほとんどのサイトで見られるプルダウン式のメニューをたった1行で実装することができる。

さらに、レスポンシブ対応なのでスマホ用のメニューを作る必要は無し!!

実装例

Step1.

<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="SlickNav/jquery.slicknav.min.js"></script>

Step2.

<ul id="menu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>

Step3.

$(function(){
$('#menu').slicknav();
});

3. MeanMenu

レスポンシブメニューを簡単に実装できるプラグイン。

スマホ用にメニューをカスタマイズするのはWordPressテーマを使っていれば自動的にしてくれますが、自作したものはWordPressプラグインを使うと逆にレイアウト崩れが起こってしまいがち。

プルダウンやドロワーにするほどメニューの項目はないけど、レスポンシブメニューは実装したいという方にオススメです!

また、WordPress用のプラグインも提供しています。

実装例

Step1.

<link rel="stylesheet" href="meanmenu.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.meanmenu.js"></script>

Step2.

$(document).ready(function() {
$('nav').meanmenu();
});

Step3.

<nav>
<ul class="clearfix">
<li><a href="#">1</a>
<ul>
<li><a href="#">1-1</a>
<ul>
<li><a href="#">1-1-1</a></li>
<li><a href="#">1-1-2</a></li>
<li><a href="#">1-1-3</a>
<ul>
<li><a href="#">1-1-1-1</a></li>
<li><a href="#">1-1-1-2</a></li>
<li><a href="#">1-1-1-3</a>
<ul>
<li><a href="#">1-1-1-1</a></li>
<li><a href="#">1-1-1-2</a></li>
<li><a href="#">1-1-1-3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">1-2</a></li>
<li><a href="#">1-3</a></li>
</ul>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</nav>

アニメーション系

次に、アニメーション関連のjQueryプラグインの紹介。

WordPressでアニメーション付きのテーマ選びはかなり面倒。かといって自分でするのは…

そんなことはありません!!以外と簡単に実装できるのです!

jQueryプラグインで簡単にサイトに動きを加えてオシャレにしたり、可愛くしたりしましょう。

1. Raindrops.js

このプラグインはセクションの間を楽しませてくれるプラグインです。

まるで水面に水滴が落ちたかのような波打つようなアニメーションでサイトを可愛くしてくれます!!

波の大きさや幅、感覚を調整できあなたのサイトにあった波を表現してみてはいかが?

実装例

注意:jQueryだけでは動きません。jQueryUIもダウンロードしてください。

Step1.

<script src="jquery.js"></script>
<script src="jquery.ui.js"></script>
<script src="raindrops.js"></script>

Step2.

<div id="sample"></div>

Step3.

$(function(){
$('#sample').raindrops();
});

2. ANIMSITION

ページの遷移時にエフェクトをかけてくれるプラグインです。

全58種類のページ移動エフェクトを用意してくれています。

もしかしたら、ページ遷移するのが楽しくなるかも?

実装例

Step1.

<link rel="stylesheet" href="./dist/css/animsition.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./dist/js/animsition.min.js"></script>

Step2.

<div class="animsition">
<a href="./page1" class="animsition-link">animsition link 1</a>
<a href="./page2" class="animsition-link">animsition link 2</a>
</div>

Step3.

$(document).ready(function() {
$(".animsition").animsition({
inClass: 'fade-in',
outClass: 'fade-out',
inDuration: 1500,
outDuration: 800,
linkElement: '.animsition-link',
loading: true,
loadingParentElement: 'body', //animsition wrapper element
loadingClass: 'animsition-loading',
loadingInner: '', // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
});
});

3. TabTab.js

タブの切り替えを気持ち良く切り替えてくれるプラグイン。

タブを切り変える際にエフェクトをかけてくれます!

あまり気を使わない部分にアニメーションを加えるだけで、一味他とは違うサイトになります!

実装例

Step1.

<script src="velocity.min.js"></script>
<script src="tabtab.min.js"></script>

Step2.

$('.tabs').tabtab();

Step3.

<div class="tabs" role="tabs">
<ul class="tabs__menu">
<li class="tabs__menu-item yanone active"><a href="#">features</a></li>
<li class="tabs__menu-item"><a href="#">how to setup</a></li>
</ul>
<div class="tabs__content">
<div class="tabs__content-item tab-setup active">
Tab1
</div>
<div class="tabs__content-item tab-setup">
Tab2
</div>
</div>
</div>

Option.

$(function(){
$('.tabs').tabtab({
startSlide: 1, // スタート時のタブ
arrows: true, // 左右矢印キーの有無
dynamicHeight: true, // 高さの自動調整
useAnimations: true, // アニメーション
easing: 'ease', // イージング
speed: 350, // アニメーションスピード
slideDelay: 0 // タブ切り替えスピード
});
});

まとめ

使えそうなjQueryプラグインはありましたか?

私はエンジニアとしてこういったjQueryプラグインをよく活用しています。弊社のLAMPにも沢山のjQueryプラグインにお世話になっています。

WordPressだけだと簡素なサイトになってしまいがち、それを改善しようとするとWordPressプラグインがぐちゃぐちゃ…。

WordPressでサイトを立ち上げた方は分かってくれるはず(笑)

この記事を見てくださった方のサイト作りのお役に立てれば私は嬉しいです!!

この記事のライター

鈴木 駿也