AI講師とWordPressにAJAX

今日はいくつかバラバラな仕事をしていました。

運営サービスのユーザー用のスクリプト作成

JavascriptとPHPで、api化したり、DB交えて行ったり来たりして完成。
Laravelでモデル、コントローラー、ビューも作成したページも追加。
サーバーをユーザー用の借りないとできないと思っていたのが、風呂に入っていたら、別の方法で実現するアイデアを得ました。

AIをテーマにするプログラム系の講師業

今日は、スプレッドシートとAIのAPI活用をいろいろなスプシ形式でばバリエーションを多数用意して、実践をしてもらいました。
プログラム的な解説も加えながら、やりました。

WordPressでAJAX

本日の最後は、WordPressの投稿ページで、ちょっとAJAXを使って
閲覧者に使ってもらうツールを入れたくなりました。
通常のページなら、なんてことはないのですが、
WordPressの投稿ページに入れることはしていませんでした。
最終的には、以下のことができればOKでした。
Ajaxを書いてあるjsファイルを読み込ませる。
これは、テーマごとに違うのかもしれません。
functions.phpなどを見たり、ソースを見て、仕組みを把握して、読み込ませるファイルなどを見つけて、そこから読み込ませるようにしました。
あとは、その後にメインで処理する関数はfunctions.phpに入れました。
最後は投稿ページに、反応するようなタグを入れました。
通常と違うのは、Ajaxをフックするということでした。
Ajax先のURLは、以下のようにローカライズしました。

// JavaScriptファイルにAjax URLを渡す wp_localize_script('faq_myajax', 'myAjax', array('ajaxurl' => admin_url('admin-ajax.php')));

        $.ajax({
            url: myAjax.ajaxurl, // WordPressによって設定されるajaxのURL
            type: 'POST',
            data: {
                'action': 'process_text', // wp_ajax_アクションフック
                'text': textData
            },
            success: function(response) {
                $('#result').text(response); // 結果を表示
            }
        });

こんな感じです。
urlのajaxurlは、すでに設定された変数名でした。だから、なにも変更なしです。
dataにあるaction値が、以下のようなfunctions.phpでフックされます。

add_action('wp_ajax_process_text', 'process_text_function');
add_action('wp_ajax_nopriv_process_text', 'process_text_function'); // 非ログインユーザー用

で、この関数の内容は、そのままfunctions.phpに書いています。

最初のAjaxを書いたjsファイルの読み込ませ方は、今回のテーマの固有の方法に従いましたが、これもfunctions.phpで書いても行けるのではないかと思います。

特定の投稿ページのみに、専用のJavascriptを入れられると無駄がないようにも思えましたが、それは調査しませんでした。