WordPressで自作JavaScriptを動作させる

以前の記事「回る地球を表示(JavaScript＋Three.js)」で、地球を回すJavaScriptを動作させていますが、WordPressで作成したホームページ上に画像を伴うJavaScriptを動作させるのって、少々コード追加が必要でした。そこで忘れないようにまとめてみました。

functions.phpにJavaScript読み込み関数追加

子テーマのフォルダにあるfunctions.phpにJavaScriptを読み込むための関数を追加します。

functions.phpは各テーマのフォルダにあります。私の場合は、cocoonの子テーマを利用して、このホームページを作成していますので、cocoonの子テーマのフォルダ内にあるfunctions.phpを編集しています。尚、子テーマのフォルダ内ファイルは、テーマのUpdate時にファイル更新されませんので安心です。

function.phpは下記位置にあります。

私の場合は、/wp-content/themes/cocoon-child/funtions.php を編集しています。
尚、functions.phpはバグったコードを記述するとWordPressのホームページ表示ができなくなりますので、バックアップを取ってから編集しましょう。

functions.phpはWordPressの管理画面で編集可能です。

私は該当するfuntions.phpをローカルにダウンロードして編集し、上書きアップロードしています。

functions.phpには、’//以下に子テーマ用の関数を書く’のコメント行以降にコードを追加してゆきます。

  :
// 以下に子テーマ用の関数を書く

// JavaScriptの読み込み
function add_script_01() { 
  if (is_single(array(153))) {
    // 3D地球を回すテスト表示JSをヘッダーで読み込み
    wp_enqueue_script('earth_spinning', get_stylesheet_directory_uri() . '/js/test_earthspinning.js', array(), '', false);
  }
}
add_action('wp_enqueue_scripts', 'add_script_01');

追加内容を簡単に説明すると、WordPressには、ページを表示する際に、特定のタイミングでプラグインなどを実行させるための”フック”という機能（アクションフック）が予め準備されており、今回はスクリプトをロードする時のアクション「wp_enqueue_scripts」に自作JavaScriptを読み込むadd_script_01()を登録して実行させます。

wp_enqueue_script()でJavaScript読み込み関数作成

まず、適当な名称の関数、ここではadd_script_01()を作成します。

function add_script_01() { 
  if (is_single(array(153))) {
    // 3D地球を回すテスト表示JSをヘッダーで読み込み
    wp_enqueue_script('earth_spinning', get_stylesheet_directory_uri() . '/js/test_earthspinning.js', array(), '', false);
  }
}

is_single()
is_single()は個別投稿ページの判別ができます。
ID=153の投稿ページでのみ地球を回すJavaScriptを読み込むようにしています。
投稿ページのIDはWordPress管理画面の投稿一覧で確認できます。
array()にしているのは、複数投稿ページで同じJavaScriptを利用したい場合の考慮です。
例えば、ID=200の投稿ページでも利用したい場合は、array(153, 200)と記載します。

wp_enqueue_script()
ハンドル名を’earth_spinning’として、地球を回すJavaScriptであるtest_earthspinning.jsを読み込みます。
第2引数に、読み込むJavaScriptファイルへのフルパスを指定します。get_stylesheet_directory_uri()は、この投稿ページのURLを返します。
尚、test_earthspinning.jsは、/wp-content/themes/cocoon-child/jsフォルダに入れています。
最後の引数をfalseにするとヘッダーで、trueにするとフッターで指定したJavaScriptが読み込まれます。

add_action()で作成した関数をアクション登録

スクリプトをロードする時のアクションフック「wp_enqueue_scripts」に上述のadd_script_01()を登録します。

add_action('wp_enqueue_scripts', 'add_script_01');

add_action()
第1引数でフック名を、第2引数でコールバック関数を指定します。
これにより、ブラウザへは、ページのHTMLのヘッダーの適切な位置に<script>タグが追加されて通知されます。

読み込むJavaScript内で他のJavaScriptをimportできるようにする

地球を回すJavaScriptではThree.jsをimportしており、<script>タグにtype=”module”属性を追加しないとimportはできないので、この属性追加するコードもfunctions.phpに追加します。

add_filter()でscript>タグの属性変更コールバック関数登録

// 生成されたscriptタグにtype=module属性をつける
// earth_spinning内で他のJSをimport可能にするため
add_filter('script_loader_tag', 'add_type_attribute' , 10, 3);
function add_type_attribute($tag, $handle, $src) {
  // importを使用しないJSには適用しない
  if ( 'earth_spinning' !== $handle ) {
      return $tag;
  }
  // scriptタグにtype="module"を追加
  $tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';

  return $tag;
}

add_filter()
フィルターフック「script_loader_tag」を第1引数に指定します。これで第2引数に指定したコールバック関数の引数で、wp_enqueue_script()で生成される<script>タグの属性の値を変更できます。

add_type_attribute($tag, $handle, $src)
コールバック関数です。名称は任意で、ここでは’add_type_attribute’にしています。
各引数にwp_enqueue_script()で生成される<script>タグの属性の値が入ってきますので、これを編集することで、属性の変更ができます。

• $tag：属性。「type=”module”」とか「src=JavaScriptファイル名」とか。
• $handle：wp_enqueue_script()の実行ハンドル名。前述の通り、ハンドル名を’earth_spinning’としていますので、ハンドル名が合致しない場合は何もしないようにしています。
• $src：JavaScriptファイルまでのパス。

これで、ハンドル名’earth_spinning’で実行したwp_enqueue_script()で生成される<script>タグにはtype=”module”属性が記載されます。

JavaScript内で画像を読み込むパスのためのURLを事前取得

地球を回すJavaScript内で、地球表面テクスチャのための画像を読み込んでいますが、
読み込みには、WordPressのテーマのフォルダまでのURL＋画像までのパスが必要です。このURLはJavaScriptから取得できませんので、事前にfunctions.php内でJavaScriptの任意の変数にセットしておくと良いです。

echo '<script>var stylesheetPath = "' . get_stylesheet_directory_uri() . '";</script&gt;';

投稿ページのURLをget_stylesheet_directory_uri()で取得し、変数stylesheetPathにセットしています。この変数stylesheetPathをJavaScriptで参照します。下記がJavaScriptでテクスチャ画像を読み込む処理です。

      :
   // Read texture
    const loader = new THREE.TextureLoader();
    const texture = loader.load(stylesheetPath + "/js/imgs/earthmap1k.jpg");

    const material3 = new THREE.MeshStandardMaterial({
            map: texture
    });
    const ball = new THREE.Mesh(geometry2, material3);
    scene.add(ball);
      :

このJavaScriptを使っているページ以外では、URLをセットした変数は使わないので、上述したadd_script01()内のis_single()で使用する投稿ページを判断後に変数セットするのが良いです。

ここまでまとめるとfunctions.phpへの追加コードは下記になります。

  :
// 以下に子テーマ用の関数を書く

// JavaScriptの読み込み
function add_script_01() { 
  if (is_single(array(153))) {
    // 3D地球を回すテスト表示JSをヘッダーで読み込み
    echo '<script>var stylesheetPath = "' . get_stylesheet_directory_uri() . '";</script&gt;';
    wp_enqueue_script('earth_spinning', get_stylesheet_directory_uri() . '/js/test_earthspinning.js', array(), '', false);
  }
}
add_action('wp_enqueue_scripts', 'add_script_01');

// 生成されたscriptタグにtype=module属性をつける
// earth_spinning内で他のJSをimport可能にするため
add_filter('script_loader_tag', 'add_type_attribute' , 10, 3);
function add_type_attribute($tag, $handle, $src) {
  // importを使用しないJSには適用しない
  if ( 'earth_spinning' !== $handle ) {
      return $tag;
  }
  // scriptタグにtype="module"を追加
  $tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';

  return $tag;
}

記事のHTMLに<canvas>タグを追加

JavaScriptで生成したcanvasをホームページに表示するため、記事のHTMLのJavaScript画像を表示したい位置に<canvas>タグを追加します。canvasの名称は”myCanvas”にしています。

<canvas id="myCanvas"></canvas>

test_earthspinning.js内でも同じ”myCanvas”の名称でcanvasを生成しています。

　　  :
　　// make Renderer
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector("#myCanvas")
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
      :

以上で、画像を伴うJavaScriptがWordPressのページ上で動作するようになります。