「Particleground」を使って、WordPress背景に3Dパーティクルを表示させる方法

以前に、NibblerというSEOチェックツールを紹介しました。

先日、Nibbler(ニブラー)という、SEOとWEBマーケティング分析サービスを見つけました。これを使ってみたら、無料なが...

このNibblerの背景では、以下のような3Dパーティクルが利用されています。

Nibblerのトップページ

以前から、「Nibblerで使われている3Dを用いた背景は、どうやっているんだろう?」とちょっと気になっていました。

で先日、Nibblerほど凝ったものではないけど、3Dパーティクルを背景に表示させることができるParticlegroundというスクリプトを知りました。それで、このParticlegroundをWordpressで使えないか試してみたら、何とかできたので、その方法の紹介です。

スポンサーリンク
レクタングル(大)広告

Particlegroundとは

Particlegroundデモ

Particlegroundとは、背景に動的に動く3Dパーティクルを表示させるためのJavaScriptプラグインです。

HTML5キャンバスをサポートするブラウザなら、どんなブラウザでも動作します。

基本的にJavaScriptだけで動作します。jQueryライブラリを呼び出して、実行コードをjQueryで書けばjQueryでも動作します。

詳しい仕様は以下です。

jnicol/particleground · GitHub

主な手順

WordPressテーマから利用する主な手順は以下です。

  1. Particlegroundをダウンロード&設置
  2. Particlegroundライブラリの呼び出し&実行コードを書く
  3. Particlegroundが作成するcanvas用にスタイルを書く

WordPressから利用するには、Particlegroundデモの方法とは、ちょっと違います。けれど、コードの仕組みとか関係なく、編集動作だけで見れば、コードコピペ2回でできるのでそれほど難しくはないと思います。

ダウンロード&設置

まずは、Particlegroundからスクリプトをダウンロードします。

Particlegroundのダウンロード

「particleground-master.zip」というファイルがダウンロードされるので解凍します。

中にあるファイルで利用するのは以下のJavaScriptファイルだけです。

  1. jquery.particleground.min.js

このJavaScriptファイルを、Wordpressテーマ内に、以下のように設置します。

  1. テーマディレクトリのパス/js/jquery.particleground.min.js

ライブラリの呼び出し&実行コードを書く

次に、header.phpの<head></head>内か、footer.phpの</body>手前に以下のコードを書きます。

<!-- jQueryがない場合 -->
<!-- <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.3.min.js'></script> -->
<!-- 子テーマで利用する場合 -->
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.particleground.min.js'></script>
<!-- 親テーマで利用する場合 -->
<!-- <script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/jquery.particleground.min.js'></script> -->
<script type="text/javascript">
//jQueryでの記述
jQuery(document).ready(function() {
  jQuery('#container').particleground({//キャンバスを挿入する要素を指定
    dotColor: '#85E0F7',  //点の色
    lineColor: '#85E0F7', //線の色
  });
});

//JavaScriptでの記述
// document.addEventListener('DOMContentLoaded', function () {
//   particleground(document.getElementById('container'), {//キャンバスを挿入する要素を指定
//     dotColor: '#85E0F7',  //点の色
//     lineColor: '#85E0F7'  //線の色
//   });
// }, false);
</script>

WordPressテーマが、jQueryを利用していない場合は、jQueryライブラリ部分をコメントアウトしてください。

「JavaScriptでの記述」と書かれた部分にのようなコードを書くことで、jQueryを使わずに実装することもできます。

「#container」の要素指定部分は、使用しているテーマの環境に合わせて変更してください。

また、色指定も好みに合わせて変更してください。

canvas用にスタイルを書く

上記までの設定で、当サイトで使用しているテーマの大外枠である「#container」に、Particlegroundが作成するCanvasが挿入されます。

ただ、そのままでは、本文の上に挿入されるだけになるので、Canvas部分を背景に設定するCSSをstyle.cssあたりに記入します。

#container canvas.pg-canvas {
  position: fixed;
  z-index: -100;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background-color: #149CEE;
}

この背景スタイル指定は、背景を動画にしたときの指定とほぼ同じです。

Wordpressテーマの背景に動画を利用する方法の紹介です。編集する前は、「結構大変なんだろうな」と思っていたのですが、動...

これで設定は終わりです。

動作確認

動作確認すると、以下のように表示されます。

Particlegroundの動作確認

実際に、このページにも実装していたのですが、処理が重たいので取り外しました。

ローカルテスト環境のWordpressでは、処理も重くならずに動作していました。

local

全く同じテーマでテストしているので、大きな違いと言ったら、インストールしているプラグインの違いとサーバーの違いくらいしかありません。

インストールしているプラグインによっては、干渉するようなものもあるのかもしれません

まとめ

パーティクルの背景は、正直Wordpressと相性がいいとは思いません。

ただ、通常サイトやWEBサービスで、「目を引く背景を」とか「背景で技術感を出したい」とかにはいいかもしれません。

『「Particleground」を使って、WordPress背景に3Dパーティクルを表示させる方法』へのコメント

  1. 名前:長島 投稿日:2015/06/21(日) 16:14:07 ID:095bd5f1a

    ものすごく参考になりました!
    ありがとうございます。

    質問なのですが、Particlegroundをヘッダーのみにする事は可能でしょうか?

  2. アバター画像 名前:わいひら 投稿日:2015/06/21(日) 18:19:31 ID:74d37d162

    可能だと思います。
    というか、そっちの方が簡単かもしれません。
    実行コードをヘッダー部分に持ってきて、スタイルをposition: fixed;とかにしないで、あとはサイズを整えればいけるかと思います。

  3. 名前:長島 投稿日:2015/06/22(月) 10:49:55 ID:7cd4a089e

    お返事ありがとうございます。

    position: fixed; を position: absolute;に変更して、ヘッダー部分に実行コードをもっていったら、できました。

    ありがとうございました。