Il codice JavaScript è il tallone di Achille di molti temi WordPress. In tal senso implementare una modalità di debug è molto utile.
Si può usare un'opzione specifica del tema, ad esempio my_debugjs, con due soli valori. La prima cosa da fare è creare una funzione che ci permetta di verificare se la modalità di debug è attiva:
function my_is_debugjs_active() {
$mode = get_option( 'my_debugjs' );
return ( $mode == 'on' );
}
Se usiamo la compressione degli script dobbiamo tenere conto della nuova impostazione:
function my_add_scripts() {
$main_script = '';
if( my_is_debugjs_active() ) {
$main_script = 'main.js'; // Versione di sviluppo
} else {
$main_script = 'main.min.js'; // Versione compressa
}
wp_register_script( 'main', get_template_directory_uri() . '/js/' . $main_script, array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'main' );
}
add_action( 'wp_enqueue_scripts', 'my_add_scripts' );
Anche il nostro codice JavaScript dovrà agire in base alla modalità scelta. Aggiungiamo quindi un attributo di dati all'elemento body:
<body <?php if( my_is_debugjs_active() ): ?> data-debugjs="on"<?php endif; ?>>
In JavaScript:
(function( $ ) {
$.isDebugActive = function() {
return ( $( "body" ).data( "debugjs" ) && $( "body" ).data( "debugjs") == "on" );
};
$(function() {
$( "#ajax-btn" ).click(function() {
// Risposta AJAX
if( $.isDebugActive() ) {
console.log( "Line 57: #ajax-btn: Response: " + response );
}
});
});
})( jQuery );