2023.12.25

JIN:RでjQueryの読み込みの下にJS(JavaScript)を読み込む

saratogax

記事内に商品プロモーションを含む場合があります

JIN から JIN:R に変えて、記事の移行が進んできました。

今回、移行ツールには頼らず gutenberg のエディタの使い方を覚えながらの設定。

個人的に最大の難関かなと思っていたのは、JavaScript による非同期通信。

Ajax で WordPress のサーバと通信する機能を使っているので、そのあたりが柔軟にできるかが心配でした。

今回は JIN:R で、プラグインを使わらずに非同期通信を実装してみたので紹介します。

Contents

これまでの非同期通信
JIN:Rの非同期通信
アクションに関数を登録
Ajax通信をトリガーに呼ばれる関数

これまでの非同期通信

JIN の頃は、記事単位で JavaScript や html が差し込める、「Scripts n Styles」というプラグインを使っていました。

また、head 内のスクリプトを html の最後に持ってくるように調整もしていました。

記事単位で読み込ませたい JavaScript を変更するとなると、やはりプラグインに頼りたくなるところです。

JIN:Rの非同期通信

JIN:R も jQuery は読み込んでいるのでいるのですが、この jQuery の読み込みよりも下に目的の JavaScript が差し込めずにハマりました。

また、「Scripts n Styles」のプラグインを入れてもうまくいかない。

これはちょっと厄介ということで、function.php を触ることに。

やはり「子テーマ」にしておいて良かったですね。

では下のコードの説明をしていきます。

add_action('wp_enqueue_scripts', 'my_wp_enqueue_scripts');
function my_wp_enqueue_scripts() {
    if (is_single(['hoge', 'fuga'])) {
        $slug = get_post_field('post_name', get_the_ID());
        wp_enqueue_script($slug, get_stylesheet_directory_uri() . sprintf('/js/%s.js', $slug), '', '', true);
    }
}

アクションに関数を登録

WordPress に慣れていないとわからないのですが、add_action も一度覚えてしまえばこんなものなのかなってところですね。

ここでは「wp_enqueue_scripts」のアクションフックに、「my_wp_enqueue_scripts」の関数を登録します。

このまま add_action の 2 番目の引数にコールバック関数として入れ込むこともできますが、コールバック関数は別で定義してみました。

この中で、特定のスラッグ(slug)のページだけ JavaScript を読み込ませるだけですね。

スラッグ名と JavaScript のファイル名を合わせておけば少し楽かな。

Ajax通信をトリガーに呼ばれる関数

Ajax 通信をトリガーに呼び出される関数も、add_action で定義。

これは、ログインユーザと非ログインユーザで別になるので、以下の 2 つのアクションを定義して、hoge_ajax_call の関数を作成します。

1add_action('wp_ajax_hoge_ajax', 'hoge_ajax_call');
2add_action('wp_ajax_nopriv_hoge_ajax', 'hoge_ajax_call');
3
4function hoge_ajax_call() {
5    $id = $_POST['id'];
6    $name = $_POST['name'];
7}

呼び出し側の JavaScript は、jQuery のライブラリを使うのですが、JIN:R の場合は $(ダラー)ではなく jQuery の変数を使わないとダメっぽいですね。

かなり雑に書きましたが、こんなイメージになるかな。

jQuery(function($) {

  $(document).on('click', '#js_hoge', function() {

    let id = $('#js_id').val();
    let name = $('#js_name').val();

    $.ajax({
      type: "POST",
      url: 'https://example.org/wp-admin/admin-ajax.php',
      data: {
        "action": "hoge_ajax",
        "id": id,
        "name": name
      },
      success: function(data) {
          alert(data.info);
          return false;
        } else {
          $('#js_response').html(data.info);
          return false;
        }
      },
      error: function() {
        alert('error.');
        return false;
      }
    });
  });
});