Intereting Posts
Может войти в wp-admin при входе в систему с помощью пользовательского ajax Как добавить класс в кнопку отправки комментариев? Добавить статическую страницу, которая ссылается на главную страницу Загрузка / редактирование изображения нарушена: «Данные изображения не существуют. Повторно загрузите изображение ». Как разместить теги HTML в контенте от the_content ()? Запрос прекратил работу update_option не работает в этом сценарии – как я могу исправить? Возможная ошибка: update_user_meta обновляет две уникальные мета-записи Помогите диагностировать запланированную проблему с post_post_status Переадресация слишком много раз htacces, переключение на https Панировочные сухари и категории Один раз войти в систему на двух разных сайтах WordPress Добавить маршруты между несколькими маркерами карт ACF google Рандомизировать доступ к сообщению WordPress подает и публикует дату

Восстановить фоновое изображение заголовка с помощью AJAX

Отображаемое изображение (для сообщений и страниц) в моей теме – это фоновое изображение заголовка.
Фактически каждое изображенное изображение извлекается следующей функцией в functions.php :

 function mytheme_header_style() { // Declare $post global if used outside of the loop. $post = get_post(); // Check if post is object otherwise we're not in singular post. if (!is_object($post)) { return; } // If Object $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ''); // Add inline style to the backgroung header image. if (has_post_thumbnail()) { $custom_header_style = ' .intro-header { background-image: url( ' . $backgroundImg[0] . ' ); } '; } else { $custom_header_style = ' .intro-header { background-image: url( ' . get_template_directory_uri() . '/components/header/images/default-hero.jpg' . ' ); } '; } wp_add_inline_style( 'mytheme-main-style', $custom_header_style ); } add_action( 'wp_enqueue_scripts', 'mytheme_header_style' ); 

Это фоновое изображение реагирует и управляется функцией jQuery в отделенном файле hero.js чтобы всегда быть полноэкранным для любого размера устройства / экрана, например:

 jQuery(document).ready(function ($) { // Defining a function to set size for #masthead function fullscreen() { jQuery('#masthead').css({ width: jQuery(window).width(), height: jQuery(window).height() }); } fullscreen(); // Run the function in case of window resize jQuery(window).resize(function () { fullscreen(); }); }); 

HTML- структура header.php делает это изображение основного заголовка фона отделенным от основного содержимого следующим образом:

 <body> <div id="page"> <nav>...</nav> <!-- Page Header --> <?php if (is_404()) { get_template_part('components/header/bg', '404'); } elseif (is_search()) { get_template_part('components/header/bg', 'search'); } else { get_template_part('components/header/bg', 'header'); // mytheme_header_style() is called here } ?> <!-- Main Content --> <div id="content">...</div> </div>//#page <footer>...</footer> </body> 

Я пытаюсь сделать следующее
1- локализовать hero.js

 function mytheme_header_style_script() { // Adding custom javascript header style file to theme. wp_enqueue_script('mytheme-hero', get_theme_file_uri() . '/assets/js/hero.js', array('jquery')); wp_localize_script('mytheme-hero', 'hero_ajax', array('ajaxurl' => admin_url( 'admin-ajax.php' ))); } add_action('wp_enqueue_scripts', 'mytheme_header_style_script'); 

2- добавьте действие mytheme_header_style() функцию mytheme_header_style()

 add_action( 'wp_enqueue_scripts', 'mytheme_header_style' ); add_action('wp_ajax_heroajax', 'mytheme_header_style'); add_action('wp_ajax_nopriv_heroajax', 'mytheme_header_style'); 

3- Тогда я изменил hero.js следующим образом:

 jQuery(document).ready(function() { // Handler for .ready() called. $.ajax({ type: "post", url: hero_ajax.ajaxurl, data: { action : 'heroajax' }, // callback handler that will be called on success // Defining a function to set size for #masthead success: function fullscreen(imageUrl, textStatus, jqXHR){ // log a message to the console console.log("Hooray, it worked! Load The Image Here"); $('#masthead').css({ width: $(window).width(), height: $(window).height() }); $('#masthead').css('background-image', 'url(' + DefaultimageUrl + ')'); }, // callback handler that will be called on error error: function(jqXHR, textStatus, errorThrown){ DefaultimageUrl = 'path/to/default/image.jpg'; // log the error to the console console.log( "Load Default Image here! The following error occured: "+ textStatus, errorThrown ); $('#masthead').css('background-image', 'url(' + DefaultimageUrl + ')'); } }); fullscreen(); // Run the function in case of window resize $(window).resize(function () { fullscreen(); }); }); 

Это не работает, изображение с заголовком фона больше не полноэкранное, а отладчик JS выделяет $.ajax и говорит « Приостановлено на исключение», и я не получаю никакого сообщения в консоли.
Что я делаю неправильно? Большое спасибо за вашу помощь, спасибо заранее всем.

Это было легче, чем я думал.
После многих чтений и попыток я наконец получил это!
Это ответ с объяснениями, если он может помочь кому-то.
1- В functions.php локализовать hero.js

 function mytheme_header_script() { // Adding custom javascript file to handle the header image. wp_enqueue_script('mytheme-hero', get_theme_file_uri() . '/assets/js/hero.js', array('jquery'), '', true); // I'm putting the script in the footer // Declare $post global if used outside of the loop. $post = get_post(); // Retrieve the featured image by using wp_get_attachment_image_src // and include the id of the post as a parameter for get_post_thumbnail_id (which we retrieve using $post->id) $heroImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ''); // This is an array of values that we will use each by it's key in hero.js script file $heroSettings = array ( 'featured_image' => $heroImg[0], // Retrieve the featured image and display it if set 'default_image' => get_template_directory_uri() . '/components/header/images/default-hero.jpg', // Display the default image if no featured image is set 'has_post_thumbnail' => has_post_thumbnail(), // To use the function in js 'ajaxurl' => admin_url( 'admin-ajax.php' ), // The URL to admin-ajax.php 'success' => 'Hooray, it worked! The featured image is loaded', // Print this message in the console if the featured image is displayed 'default' => 'The default image is loaded' // Print this message in the console if the default image is displayed ); // Now use the wp_localize_script function // Set the same $handle as the script to localize it // hero-set is the name of the js variable that will contain the data // $heroSettings is the array of data to retrieve in js by hero_set wp_localize_script('mytheme-hero', 'hero_set', $heroSettings); } add_action('wp_enqueue_scripts', 'mytheme_header_script'); 

2- Еще одно и то же 🙂

3- hero.js стал

 (function($) { // Define the fullscreen function fullscreen(); // Tell the fullscreen function what to do using ajax function fullscreen() { $.ajax({ type: 'POST', // use $_POST method to submit the data url: hero_set.ajaxurl, // submit the data to admin-ajax.php data: { action : 'mytheme_header_style' // process mytheme_header_style function by the requested data action }, // use beforeSend so the background header image is retrieved and displayed // wright away before anything else to speed the page load beforeSend : function(){ // if a featured image is set if (hero_set.has_post_thumbnail){ // log the success message to the console console.log(hero_set.success); $('#masthead').css({ 'background-image': 'url(' + hero_set.featured_image + ')', width: $(window).width(), height: $(window).height() }); } else { // if no featured image is set // log the default message to the console console.log(hero_set.default); $('#masthead').css({ 'background-image': 'url(' + hero_set.default_image + ')', width: $(window).width(), height: $(window).height() }); } } }); } // Run the function in case of window resize. $(window).resize(function(e) { e.preventDefault(); fullscreen(); }); })(jQuery); 

Это все люди, надеюсь, что это поможет кому-то.
SYA