web-dev-qa-db-ja.com

ブートストラップツアーのJavaScriptをWordPress管理者パネルダッシュボードウィジェットに追加する方法

私はテーマを開発していて、カスタムダッシュボードウィジェットにブートストラップツアースクリプトを追加する方法を知りたいです。

基本的に、カスタムダッシュボードウィジェットを作成してツアースクリプトをそのウィジェットにリンクできるように、ブートストラップツアースクリプトを管理パネルに含めたいと思います。

theme-developmentwp-adminwp-enqueue-script
1
William Jerome

Step-1 →ダウンロード：

Bootstrap Tourに必要なCSS/JSファイルをテーマのディレクトリにダウンロードしてください。

Step-2 →ツアー設定スクリプト：

bootstraptour for ツアー設定スクリプトの指示に従ってください。たとえば、次のスクリプトはメインのWordPress管理パネルダッシュボードにツアーをロードし、デフォルトのツアーを表示しますWP Activity＆At a Glanceウィジェット：

注：詳細については、コード内のコメントを確認してください。

// bootstrap-tour.js file
(function($) {

    var tour = new Tour({
        backdrop: true,
        steps: [
        {   
            element: "#dashboard_right_now",
            title: "Summary Widget.",
            content: "This widget shows the summary of your WP installation."
        },  
        {   
            element: "#dashboard_activity",
            title: "Activity Widget.",
            content: "This is WP Dashboard Activity Widget."
        }]  
    }); 

    tour.init();

    // This will load on each page load or refresh.
    // You may want to change this behaviour according to your need.
    // e.g. show the tour on a click even of a custom notice or button
    // within admin panel dashboard.
    $( window ).load( function() {
        tour.start( true );
    }); 
})( jQuery );

Step-3 →管理者パネルにスクリプトをロードする：

テーマのadmin_enqueue_scriptsファイルの次のコードのように、 functions.php フックを使用して、管理パネルダッシュボードにBootstrap TourのCSSおよびJSファイルを追加します。

function wpse308865_bootstrap_tour_enqueue_scripts( $admin_page ) { 
    if ( 'index.php' != $admin_page ) { 
        // so basically we're allowing the tour only on the main dashboard
        // change this if you want it elsewhere as well.
        return;
    }   
    // this is bootstrap tour css and js file inside theme's directory
    wp_register_style( 'bootstrap_tour_css', get_stylesheet_directory_uri() . '/bootstrap-tour-standalone.min.css', false, '1.0' );
    wp_enqueue_style( 'bootstrap_tour_css' );
    wp_enqueue_script( 'bootstrap_tour_js', get_stylesheet_directory_uri() . '/bootstrap-tour-standalone.min.js', array( 'jquery' ), '1.0' );

    // this is the custom bootstrap tour loading script inside theme's directory
    wp_enqueue_script( 'bootstrap_tour', get_stylesheet_directory_uri() . '/bootstrap-tour.js', array( 'bootstrap_tour_js' ), '1.0' );
}   
add_action( 'admin_enqueue_scripts', 'wpse308865_bootstrap_tour_enqueue_scripts' );

注：これは、テーマからWordPress管理パネルダッシュボードにブートストラップツアーのCSSとJavaScriptのコードを追加する方法のデモンストレーションです。明らかにあなたはそれに応じてあなたの必要性に合うように上のコードを調整しなければならないでしょう。

1
Fayaz