ajaxurl nu este definit în frontend

pentru a folosi direct ajaxurl, în fișierul tău de plugin adaugă acest cod:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

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

apoi poți folosi variabila ajaxurl pentru cereri AJAX.

Metoda din 2021 este un pic diferită ;-)

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' );

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

Am folosit codul de mai jos pe un site WordPress.
Putem folosi următorul cod pentru a configura ajaxurl în acest fel:

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

Am adăugat și un exemplu de AJAX unde putem folosi linia de mai sus:

 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('Fă ceva...');
            }
        });
    }

Am reușit să fac asta să funcționeze după multe ore... și încercări și erori. Așadar, împărtășesc cum să faci AJAX să funcționeze în WordPress cu un exemplu (am pornit de la https://www.tweaking4all.com/web-development/wordpress/wordpress-ajax-example/#comment-562814 și am adaptat exemplul)

--folosește instrumentele de dezvoltare Chrome și dezactivează cache-ul din fila Network
--uită-te la consolă dacă primești erori, primul obiectiv este să obții mesajul "ready!" în consolă când apeși butonul și dacă totul funcționează, vei obține și o ieșire frumoasă!

--adaugă în site-ul WordPress ca bloc HTML personalizat:

<div id="receiving_div_id">
   <p>Încă nu s-a încărcat nimic</p>
</div>
<button id="button_to_load_data">Încarcă conținut AJAX</button>

--adaugă în tema/js/button.js (creează folderul js):

   jQuery("#button_to_load_data").click(function() {
        console.log( "ready!" );
      var data = {
         'action'   : 't4a_ajax_call', // numele funcției tale PHP!
         'function' : 'show_files',    // o valoare aleatorie pe care dorim să o transmitem
         'fileid'   : '7'              // o altă valoare aleatorie pe care dorim să o transmitem
         };
       
      jQuery.post(my_ajax_object.ajax_url, data, function(response) {
         jQuery("#receiving_div_id").html(response);
      });
   });

--adaugă în functions.php al temei:

 /* script personalizat în functions.php al temei */

/* încarcă button.js (->my-script) și localizează admin-ajax.php pentru 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' );