web-dev-qa-db-ja.com

プラグイン設定ページにスタイルシートとスクリプトをロードできません

メインプラグインファイルに次のコードがあります。

<?php
/*
Plugin Name: Awesome Slide Show
*/

    add_action('admin_head', 'wp_ss_plugin_include');
    add_action('admin_menu', 'wp_ss_plugin_add_menu');

    function wp_ss_plugin_include() {
        echo "<style>";
        require 'settings/style.css';
        echo "</style>";

        echo "<script>";
        require 'settings/script.js';
        echo "</script>";
    }

    function wp_ss_plugin_add_menu() {
        add_menu_page("Slide Show", "Slide Slow", "manage_options", "wp-ss-plugin", 
            function () {
                require "settings/index.php";
            }
        );
    }

?>

settings /ディレクトリにはindex.php、style.css]の3つのファイルがあります。 、およびscript.js。それらのファイルの内容は、ここから から取られます 。

まず、私は自分のプラグインの設定ページで画像のスライドショーを見ることになっています。しかし、スライド（前後）を移動することはできません。デバッグしようとしましたが、クリックイベントが機能していないことがわかりました。 （上記リンクのコードをご覧ください）。スタイルシートはロードされているがスクリプトはロードされていないと思います。

第二に、私がスクリプトとスタイルをロードするのに使ったテクニックが正しいかどうか知りたいのです。私はHello Dollyプラグインからアイデアを得ました。これは正しい方法ですか？それとも、すべてのスタイルやスクリプト、その他すべてを使って自分のプラグイン用に自分の設定ページを作成するのがベストプラクティスですか？私はPlugins settings pageのためにそうする方法を見つけることができませんでした。私はThemes settings pageのものしか見つけられませんでした。

pluginsplugin-developmentscriptsstyles
2
Vijay Chavda

やり方はwp_enqueue_scriptがフックするときにwp_enqueue_style()とadmin_enqueue_scripts関数を使うことでした。

スタイルとスクリプトをそれぞれwp_register_styleとwp_register_scriptに登録することはオプションですが、ここでうまく説明されているように いくつかの良い利点があります 。

これが実用的なスクリプトです。

<?php
/*
Plugin Name: Awesome Slide Show
*/



// admin_init
// ************************************************************************************************
    function wp_ss_plugin_admin_init_cb() {
        // Register CSS
        wp_register_style(
            'wp_ss_plugin_style', plugin_dir_url( __FILE__ ) . '/settings/style.css'
        );

        // Register JS
        wp_register_script(
            'wp_ss_plugin_script', plugin_dir_url( __FILE__ ) . '/settings/script.js',
            'jquery' //jQuery dependency
        );
    }
    add_action('admin_init', 'wp_ss_plugin_admin_init_cb');



// admin_enqueue_scripts
// ************************************************************************************************
    function wp_ss_plugin_admin_enqueue_scripts_cb() {
        //Enqueue CSS
        wp_enqueue_style('wp_ss_plugin_style');

        //Enqueue JS
        wp_enqueue_script('wp_ss_plugin_script');
    }
    add_action('admin_enqueue_scripts', 'wp_ss_plugin_admin_enqueue_scripts_cb');



// admin_menu
// ************************************************************************************************
    function wp_ss_plugin_admin_menu_cb() {
        add_menu_page("Slide Show", "Slide Slow", "manage_options", "wp-ss-plugin", 
            function () {
                require "settings/index.php";
            }
        );
    }
    add_action('admin_menu', 'wp_ss_plugin_admin_menu_cb');



?>

私が直面したもう一つの問題は、スクリプトとスタイルが機能した後でさえ、jQueryは機能しなかったということでした。 wp_register_scriptの3番目のパラメータを使用して私のスクリプトへの依存関係としてjQueryを追加した後、それは解決されました。

2
Vijay Chavda