ajaxurl не определен во фронтенде

для прямого использования ajaxurl добавьте в файл вашего плагина следующий код:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

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

после этого вы можете использовать переменную ajaxurl для AJAX-запросов.

В 2021 году подход немного изменился ;-)

function my_enqueue() {

    // Подключаем скрипт с зависимостью от jQuery
    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' );

Источник: https://developer.wordpress.org/reference/functions/wp_add_inline_script/#comment-4632

Я использовал приведенный ниже код на сайте WordPress.
Мы можем использовать этот код для настройки ajaxurl следующим образом.

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

Я также добавил пример AJAX, где можно использовать приведенную выше строку.

 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('Сделать что-то...');
            }
        });
    }

После многих часов проб и ошибок мне удалось заставить это работать. Поэтому я делюсь тем, как реализовать ajax в WordPress с примером (начал с https://www.tweaking4all.com/web-development/wordpress/wordpress-ajax-example/#comment-562814 и адаптировал пример)

--используйте инструменты разработчика Chrome и отключите кеширование во вкладке Network --проверяйте консоль на наличие ошибок, первая цель - увидеть в консоли "ready!" при клике на кнопку, а если все работает, вы получите также красивый вывод!

--добавьте на сайт WordPress как пользовательский HTML-блок:

<div id="receiving_div_id">
   <p>Пока ничего не загружено</p>
</div>
<button id="button_to_load_data">Получить Ajax-контент</button>

--добавьте в theme/js/button.js (создайте папку js):

   jQuery("#button_to_load_data").click(function() {
        console.log( "ready!" );
      var data = {
         'action'   : 't4a_ajax_call', // название вашей PHP-функции!
         'function' : 'show_files',    // случайное значение, которое мы хотим передать  
         'fileid'   : '7'              // еще одно случайное значение для передачи
         };
       
      jQuery.post(my_ajax_object.ajax_url, data, function(response) {
         jQuery("#receiving_div_id").html(response);
      });
   });

--добавьте в functions.php темы:

 /* кастомный скрипт в functions.php темы */

/* подключение button.js (->my-script) и локализация admin-ajax.php для 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' );