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

2022.1.10 更新

皆さまごきげんよう。

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

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

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

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

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

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

スケッチの1行目でファイルの名前を定義します。
2行目以降、自由にお絵かきして下さい。
一番最後の行で、１行目で定義したファイル名、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の要素へ出力する
//第１引数は１行目で定義したこのファイルの名前、第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 で学びました。このチャンネルはプログラミングを楽しく学べておすすめです。

ではまた次回お会いしましょう(^^)ゞ

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

目次

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

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

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

4.まとめ

いいね: