ワードプレスで任意の要素ににp5.jsを実装する

皆さまごきげんよう。
現在、地球規模でコロナウイルスが猛威をふるっており大変心配ですね(´ω`。)。
こんな緊急事態にもかかわらず、朝晩満員電車に乗って通勤しなければならないなんて絶対どうかしてると思います!
これを機に、一刻も早くテレワークが世の中に普及することを切実に願う今日この頃です。

さて、本日は前回の”ウェブサイトの任意の要素ににp5.jsを出力する”の実践編として、ワードプレスで任意の要素にp5.jsを表示させてみようと思います!(最初から読んでみたい方はこちら↓も合わせてご覧くださいませ)

目次

  1. p5のsketch.jsファイルを用意する
  2. sketch.jsファイルをphpファイルに読み込ませる
  3. ワードプレスに外部ファイルを読み込ませる
  4. まとめ

1.p5のsketch.jsファイルを用意する

まずはp5でクリエイティブなお絵かきをしましょう!sketch.jsファイルが用意できましたら、ワードプレスのどの部分に表示させたいかを決めましょう。

私は、前回のこちら↓のスケッチを色味を変えて使います。

See the Pen Output p5 to any element by kowalski k (@polkadotsandsky) on CodePen.


スケッチファイル作成の流れはこんな感じです。

  1. スケッチの1行目でファイルの名前を定義します。
  2. 2行目以降、自由にお絵かきして下さい。
  3. 一番最後の行で、1行目で定義したファイル名、htmlで出力したい場所のID名を指定します。

今回はワードプレスのtwenty twentyの子テーマを使って実験してみることにします。フッターの一番下の部分にスケッチを出したいので、その部分をディベロッパツールで調べたところ、footer要素の中の#site-footerという部分であることがわかりました。そこでスケッチファイルの一番最後の行(34行目)に注目して下さい。

var sketch1;//1行目に出力するファイルの名前を定義する
var dot = {
  x: 0,
  y: 0
}
var col = {
  r: 0,
  g: 0,
  b: 0
}
function windowResized() {//リサイズした場合もsetupの状態と同じにする
    resizeCanvas(windowWidth, 200);
    canvas.style('z-index','-1');//canvasを後ろへ
    background(90,60,0,40);
}
function setup() {
    canvas = createCanvas(windowWidth,200);
    canvas.style('z-index','-1');//canvasを後ろへ
    background(90,60,0,40);
}

function draw() {
   frameRate(10);
   col.r = map(mouseX,0,windowWidth,0,255);//map(value, start1, stop1, start2, stop2, [withinBounds])
   col.g = random(0, 100);
   col.b = map(mouseY,0,windowHeight,0,255);
   dot.x = random(0, windowWidth);
   dot.y = random(0, windowHeight);
   noStroke();
   fill(col.r, col.g, col.b,60);
   ellipse(dot.x, dot.y, 25, 45);

}
new p5(sketch1, "site-footer");//このsketchを、指定したIDの要素へ出力する
//第1引数は1行目で定義したこのファイルの名前、第2引数は出力したい場所のID名

(sketch1, “site-footer”)の部分を、ご自分のものと差し替えて下さい。

もう一つ気を付けたいところ、11行目なのですが、もしもウィンドウがリサイズされた場合もきちんとスケッチが描画されるように、 function windowResized() 関数を使って、setup()と同じ内容を書いてあります。

function windowResized() 関数に、リサイズ後にも再描画してほしい内容を書いておきますと、描画が崩れなくなりますのでお試しください。

2.sketch.jsファイルをphpファイルに読み込ませる

今回はフッターにp5スケッチを表示させたいので、footer.phpのfooterの閉じタグの手前で、先ほど作ったスケッチファイルを読み込ませることにします。footerの閉じタグの直前に下記のように記述します。

<?php
wp_enqueue_script( 'sketch.js',get_stylesheet_directory_uri()."/js/sketch.js", array( 'p5','p5dom' ));
?><!-- p5js -->
                                    
</footer><!-- #site-footer -->

arrayの引数に ( ‘p5′,’p5dom’ ) と入れてあるのは、次で説明するheader.phpで読み込むp5のcdnに対応させているためです。

  • wp_enqueue_script とはワードプレスで外部ファイルを読み込むための関数です。
  • get_stylesheet_directory_uri() 関数は子テーマを使用している場合、子テーマのディレクトリの URI を返します。
  • get_template_directory_uri() 関数は親テーマを使用している場合に使います。使用しているテーマによってどちらかに書き換えて下さい。

3.ワードプレスに外部ファイルを読み込ませる

header.phpに外部ファイルを読み込む記述をします。

p5のcdnを2種類header.phpファイルの php wp_head(); の直前に書いて読み込ませます。

wp_enqueue_script関数の第1引数にそれぞれ ’p5’、’p5dom’ とし、’p5dom’ の方には array の引数に( ‘p5’ )と入れます。

ここで最初に読み込ませた、sketch.js の引数に対応させています。(対応していればどんな名前を付けてもかまいません。)

<?php
   wp_enqueue_script( 'p5',"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js", array());
   wp_enqueue_script( 'p5dom',"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js", array( 'p5' ));
 ?><!-- p5js -->

<?php wp_head(); ?>

ワードプレスに外部ファイルを読み込ませる方法は、以前の記事でも何回か取り上げているので、そちらも参考にしてみて下さいね!タグ”外部ファイル”でも検索できます。

4.まとめ

出来上がりはこちらになります!ワードプレスの最新テーマtwenty twentyをカスタマイズしてみましたよ。

一番下までスクロールして頂くと、いかがでしょう?きちんとフッターに表示されました。いろんなパターンで試してみたくなりますね♪ちょっとしたことですが、サイトに動きが出て目を引くこと間違いなし!(^^)

ちなみに今ご覧のサイトフッターにも、調子に乗って出してしまいました(笑)昔々数学で学んだサイン、コサイン…のサイン波です。こんなの勉強したっていつ使うの?なんて当時思っていたのが、い、今なのか〜! とびっくりしております(笑)

これもDan先生のコーディングトレインで学びました。The Coding Train はプログラミングを楽しく学べておすすめです。

コロナ騒動でお家に引きこもるしかない今は、逆に勉強が出来るチャンス!免疫力を高めてこの危機を乗り切りましょう。それではまた次回!(^^)ゞ

コメントを残す