WordPress プラグイン作成 〜onload()処理の追加〜

WordPressプラグインの作成中です。今回はWordPressで投稿が表示されたときにJSを起動する方法に関して調べます。

JSのonload()

このメソッドを使用すると画面が描画されるタイミングでJSを起動できます。

JSの動くタイミング

通常のJS起動は、下のようなときに使用することが多いと思います。

  1. ボタンが押されたとき
  2. カーソルをフォーカスしたとき
  3. その他何かしらの入力があったとき

しかし、「今回は画面が起動したとき」のイベントを受けてJSの処理を動かしたいと思っています。そこで使用するのが「onload()」になります、
具体的には下のようなコードで行います。

<!DOCTYPE html>
<html lang="en">
<script>function myFunc() { alert("test");}</script>
<body onload="myFunc()">

WordPressプラグインの場合

今回の実装では WordPressのプラグインで投稿画面にHTMLを挿入したいのでプラグインを使用して投稿画面にHTMLを挿入する処理を実装する必要があります。
JSのソースを投稿画面表示時に挿入する方法に関して調べます。

１つの解決策

調査していたのはwp_enqueue_scriptsというメソッド(イベント)が起動したときに文字列を出力してみたところ以下のようなところに文字列が出力されました。

つまり、WordPressの出力しているHTMLクラス「wrap」と「content」の間です。具体的にはサイドバーの中に出力されていました。
そして右クリックしたときの検証では確認できませんでした。。。

ポイント

各アクションフックの起動するタイミングでそれぞれのHTML出力場所を名確認する(出力する場所はこちらのページから抜粋)

  1. wp_enqueue_scriptsのイベントで出力する場所を確認
  2. get_fotterも同様

そして、試してみたところいくつかの勘違いがありました。

勘違いしたところ

add_actionする場所(タイミング)が違うとうまく起動してくれない。。。

プラグインを有効にするタイミング、つまりプラグインファイルからadd_actionしたメソッドでwp_enqueue_scriptsなどの登録処理を行ってもうまく動きませんでした、具体的には下のようなコードでやりました。

/*
Plugin Name: CustomQuestionaryPlugin
Plugin URI: (プラグインの説明と更新を示すページの URI)(未決定)aaa
Description: アンケートを作成、ブログ記事の中に埋め込むことができ、集計結果をダッシュボードで確認ができる。
Version: 1.0
Author: ZenryokuService
Author URI: https://zenryokuservice.com/
License: GPL2
*/
// アンケートを記事に挿入するスクリプト
function insertQuestionary() {
    wp_register_script('insertQuestionary'
        ,plugins_url('insertPOST.js', __FILE__));
    wp_enqueue_script( 'insertQuestionary' );
    echo "Testing insert!";
}

// ダッシュボードに追加するための関数(プラグイン有効時)
function addCustomQuestionary() {
    // ダッシュボードにこの表示が出るように追加する
    add_menu_page( 'Test Plugin', 'CustomQuestionary', 'manage_options' , 'test-plugin' , 'helloCustomQuestionary' );
    // 投稿記事にアンケートを表示するスクリプトをリンクする
    add_action( 'wp_enqueue_scripts', 'insertQuestionary' );
}
// 管理メニューを表示した時に
//add_action('wp_dashboard_setup', 'addCustomQuestionary');
add_action('admin_menu', 'addCustomQuestionary' );
add_action('wp_enqueue_scripts', 'insertQuestionary' );
do_action( 'addCustomQuestionary' );

処理がちょっと遅いようにも見えますが。。。
とりあえずは、これで投稿画面表示時に指定のJSを起動することができました。

まとめ

プラグインからJSを投稿画面表示時に起動させたい場合はwp_enqueue_scriptを使用してやる

// アンケートを記事に挿入するスクリプト
function insertQuestionary() {
    wp_register_script('insertQuestionary'
        ,plugins_url('insertPOST.js', __FILE__));
    wp_enqueue_script( 'insertQuestionary' );
}
add_action('wp_enqueue_scripts', 'insertQuestionary' );

上のplugins_url('insertPOST.js', FILE)で作成したプラグインフォルダにある「insertPOST.js」を参照するようになり、ここに定義しているfuncitonを起動できる。

insertPOST.js

function testing() {
    alert("Testing");
}
window.onload = testing;

このような形で作成したHTMLを挿入しようと思います。

でわでわ。。。



Java関連ページ

投稿者:

takunoji

音響、イベント会場設営業界からIT業界へ転身。現在はJava屋としてサラリーマンをやっている。自称ガテン系プログラマー(笑) Javaプログラミングを布教したい、ラスパイとJavaの相性が良いことに気が付く。 Spring framework, Struts, Seaser, Hibernate, Playframework, JavaEE6, JavaEE7などの現場経験あり。 SQL, VBA, PL/SQL, コマンドプロント, Shellなどもやります。

コメントを残す