ajaxurl non definito sul front-end

per utilizzare direttamente ajaxurl, nel tuo file del plugin aggiungi questo:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

   echo '<script type="text/javascript">
           var ajaxurl = "' . admin_url('admin-ajax.php') . '";
         </script>';
}

puoi quindi utilizzare ajaxurl per le richieste ajax.

Il metodo del 2021 è un po' diverso ;-)

function my_enqueue() {

    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_add_inline_script( 'ajax-script', 
        'const myVariables = ' . json_encode( 
                                    array(
                                        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
                                        ) ),
        'before' );

}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

Fonte: https://developer.wordpress.org/reference/functions/wp_add_inline_script/#comment-4632

Ho utilizzato il codice seguente nel sito WordPress.
Possiamo usare il codice seguente per impostare ajaxurl in questo modo.

<?php echo esc_url(admin_url('admin-ajax.php')); ?>  

Ho anche aggiunto un esempio di AJAX dove possiamo usare la riga sopra.

 function setNotificationRead() {
        fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
            body: `action=yourFunctionsAction`,
            credentials: 'same-origin'
        }).then(response => {
            return response.json();
        }).then(data => {
            if (data.status === 'true') {
                console.log('Fai qualcosa...');
            }
        });
    }

Ci ho messo molte ore... e molti tentativi ed errori per far funzionare questo. Quindi, condivido come far funzionare ajax in WordPress con un esempio (ho iniziato con https://www.tweaking4all.com/web-development/wordpress/wordpress-ajax-example/#comment-562814 e ho adattato l'esempio)

--usa gli strumenti per sviluppatori di Chrome e disabilita la cache dalla scheda Network --controlla la console se ottieni errori, il primo obiettivo è vedere "ready!" nella console quando clicchi il pulsante e se tutto funziona otterrai anche un bel output!

--aggiungi al sito WordPress come blocco HTML personalizzato:

<div id="receiving_div_id">
   <p>Niente ancora caricato</p>
</div>
<button id="button_to_load_data">Ottieni Contenuto Ajax</button>

--aggiungi a theme/js/button.js (crea la cartella js):

   jQuery("#button_to_load_data").click(function() {
        console.log( "ready!" );
      var data = {
         'action'   : 't4a_ajax_call', // il nome della tua funzione PHP!
         'function' : 'show_files',    // un valore casuale che vogliamo passare
         'fileid'   : '7'              // un altro valore casuale che vogliamo passare
         };
       
      jQuery.post(my_ajax_object.ajax_url, data, function(response) {
         jQuery("#receiving_div_id").html(response);
      });
   });

--aggiungi al file functions.php del tema:

 /* script personalizzato in functions.php del tema */

/* leggi button.js (->my-script) e localizza admin-ajax.php per my-script */
function add_my_script() {

  wp_enqueue_script( 'my-script', 
         get_template_directory_uri() . '/js/button.js', 
         array ( 'jquery' ), 
         false,
         true
  );
  
      wp_localize_script( 'my-script', 'my_ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

}
add_action( 'wp_enqueue_scripts', 'add_my_script' );