WordPress:特定の記事の中でThree.jsを使う方法

WordPressで記事内にThree.jsを使用したコンテンツを表示する方法をご紹介します

テーマをそのまま使用しているなど、なるべくfunction.phpなどテンプレートのソースコードをいじりたくない場合も多いです。
今回ご紹介するのはフリーのプラグイン導入により、管理画面のみでThree.jsを使用し表示出来るようにする方法です。
もちろん、Three.js意外でも応用により他のJSプラグインなどにも使うことが出来ます。

CSS & JavaScript Toolboxプラグインをインストール

まずはWordPressにフリーのプラグインCSS & Javascript Toolboxをインストールします。
このプラグインによってテンプレートを直接編集することなく、指定ページのヘッダーかフッターにPHP/HTML/JS/CSSのコードを挿入出来るようになります。

css_javascript_toolbelt01

インストールが完了したら、有効化します。

プラグインの管理画面に行き、まずはデータベースの用意をするため、そのまま[Install]→[Start]をクリックしましょう。
[New Code Block]にてコードを作り管理していきます。
Nameは適当に、Location Hookは配置箇所(ヘッダーorフッター)、Initial Block Positionは配置箇所(ヘッダーorフッター)の中での順番です。

CSS & Javascript Toolbox自体の使い方は簡単ですので割愛しますが、右側のメニューの言語選択に関わらず<script>タグや<style>タグの記述は必要ですのでお忘れなく。

JavaScriptライブラリを設置

使用するライブラリをそのままコピペしましょう。
今回は以下の3つのThree.jsのコードを登録しました。

ライブラリ名 機能 場所
three.js Three.jsメインファイル ヘッダー
OrbitControls.js コントロール用 ヘッダー
Detector.js ブラウザがWebGL使用可能か判定 ヘッダー

ただ、three.jsのような長いソースは途中で切れてしまい全て登録できなかった(フリー版だから?)ので、今回はCDNのソースへのリンクにしました。

css_javascript_toolbelt

このブログの場合、three.jsカテゴリーページには全て読み込ませたいため、Categoriesでthree.jsを選択しています。

自作コードを設置して動かしてみる

いよいよ自作コードも登録して動かしてみましょう。
最後に読み込ませたいのでフッターへ指定します。
今回は下記のコードを登録し、Postsでこの記事名を指定しています。

ソースコードで気を付ける点としては、以下の2点があります。

  • WebGLに対応していない環境用に、レンダリング前にDetector.jsを使い
    if(!Detector.webgl) Detector.addGetWebGLMessage({parent:container});
    を入れること
  • WebGLの処理は重い為、最初は表示させずに任意でボタンを押してもらってから表示させる事

記事編集へ移りテキストエディタで、表示したい箇所に以下のタグを配置します。

表示させるボタンを配置します。

DEMOを見る

以上の作業で下のボタンを押せばthree.jsのコンテンツが表示されると思います。

ブログの記事の中でこのようなインタラクティブ性のあるコンテンツがあると、見る人をかなり引き付けることが出来ます。
ちなみにこのやり方であれば、Three.jsだけでなくAngular.jsや他のJSライブラリも同様に、特定のページのみで使えます。