Тема Full-Ajax: ошибка parseJSON при создании объекта JSON из пользовательского шаблона WordPress

Пытаясь сделать полномасштабную навигацию по моему новому портфолио, я читал онлайн в нескольких разных блогах, что создание шаблонов с использованием JSON было бы проще, чтобы обрабатывать данные, но я хочу.

Это не обычная процедура (с WP_Ajax … и т. Д.) И провел день, просматривая Интернет … нет ответа. Это очень удобный для SEO метод, также доступный (веб-сайт все еще работает, если javascript не активирован … и т. Д.). Я делаю эту точность, чтобы убедиться, что вы, ребята, понимаете, почему я пытаюсь использовать эту процедуру, а не больше условных …

Вдохновленный из этой (французской) статьи: http://boiteaweb.fr/la-navigation-avec-ajax-7743.html http://www.seomix.fr/ajax-wordpress/

Я начал следовать рекомендованным шагам и адаптировать их к моей теме и идеям.

Как краткое резюме: ВАЖНО: он не использует методы wp-ajax или admin-ajax, вместо этого я использую альтернативный шаблон ajax-template-slug. Во время запроса AJAX по ссылке я отправляю «MDXMLHTTPRequest».

function perform_ajax_request( url ) { $.ajax({ url : url, type : 'POST', headers: { 'X-Requested-With':'MDXMLHttpRequest' } }).done( function( data ) { var data = $.parseJSON( data ); switch_content( current_template, data ); }).error( function() { // Error alert( 'Unable to update the content, an error occured.' ); }); } 

Используя следующую функцию, WordPress поймет, что делается запрос AJAX, и попросит вернуть правильный шаблон (сжатый в контенте один), т. Е. Содержимое сообщения со страницы, отображающей все сообщения.

 add_filter( 'template_include', 'md_template_include' ); function md_template_include( $template ) { if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && $_SERVER['HTTP_X_REQUESTED_WITH']== 'MDXMLHttpRequest' ): $pre = dirname( $template ); $suf = basename( $template ); $_template = $pre . '/ajax-' . $suf; if( !file_exists( $_template ) ) $_template = $template; $template = $_template; endif; return $template; } 

Я думаю, что эта часть довольно проста для понимания … Он возвращает префикс ajax-template, когда function.php получает заголовок. Теперь мы должны построить шаблон, файл ajax-single-project.php, в моем случае.

Я пытаюсь заставить сервер возвращать массив JSON, так что с jQuery проще манипулировать и переключаться между шаблонами.

Однако текущий код, который я сделал (см. Ниже, прокомментировал), возвращает ошибку, типичную для разбитого массива JSON. Поскольку я впервые пытаюсь JSON .. Я не уверен, что я что-то забыл или что-то не так …

 <?php $o = array(); $o[ 'title' ] = wp_title( '|', true, 'right' ); //used to update the title of the browser window $o[ 'type' ] = 'single-project'; //type of the template //The Localize script, is that ok here ? wp_localize_script('my-ajax-request', 'current_template', array('the_current_template' => basename(get_page_template()))); //ob_start(); $article = '<div id="container" class="content-area project-content">'; $article .= '<main id="main" class="site-main" role="main">'; // I couldn't make this part work with JSON... That's why I rewrote the whole thing instead of loading a template part /*while (have_posts() ) : the_post(); if ( $overridden_template = locate_template( 'content-single-project.php' ) ) { // locate_template() returns path to file // if either the child theme or the parent theme have overridden the template load_template( $overridden_template ); } else { // If neither the child nor parent theme have overridden the template, // we load the template from the 'templates' sub-directory of the directory this file is in load_template( dirname( __FILE__ ) . '/template-parts/content-single-project.php' ); } endwhile;*/ while (have_posts()) : the_post(); $article .= '<article id="post-'.the_ID().'"'.post_class().'>'; $article .= $image0 = wp_get_attachment_image_src(get_field('project_hero'), 'full'); $article .= '<img class="project-hero" src="'.$image0[0].'" alt="'.get_the_title(get_field('project_hero')).'" />'; $article .= '<section class="project-head entry-header">'; $article .= '<div class="clearfix">'; $article .= '<h3 class="project-title entry-title">'; $article .= the_title(); $article .= '</h3>'; $article .= '<ul class="project-infos clearfix entry-meta">'; if ( has_term('frontend', 'projectcat')) { $article .= '<li><i class="fa fa-desktop"></i><span>Frontend</span></li>'; } else if ( has_term('design', 'projectcat')) { $article .= '<li><i class="fa fa-pencil"></i><span>Design</span></li>'; } else if ( has_term('application', 'projectcat')) { $article .= '<li><i class="fa fa-code"></i><span>Application</span></li>'; } else { $article .= '<li><span><i class="fa fa-question"></i>Category not specified</span></li>'; } $article .= '<li><i class="fa fa-calendar"></i><span>'.the_field('project_year').'</span></li>'; $article .= '<li><i class="fa fa-users"></i><span>'.the_field('project_client').'</span></li>'; $article .= '</ul>'; $article .= '</div>'; $article .= '<div class="project-intro entry-content">'; $article .= the_content(); $article .= '</div>'; $article .= '</section>'; $article .= '<section class="project-body entry-content">'; $article .= '<h4 class="project-subtitle">'.the_field('project_image_section_1_title').'</h4>'; $image1 = wp_get_attachment_image_src(get_field('project_image_section_1_images'), 'full'); $article .= '<img src="'.$image1[0].'" alt="'.get_the_title(get_field('project_image_section_1_images')).'" />'; $article .= '<h4 class="project-subtitle">'.the_field('project_image_section_2_title').'</h4>'; $image2 = wp_get_attachment_image_src(get_field('project_image_section_2_images'), 'full'); $article .= '<img src="'.$image2[0].'" alt="'.get_the_title(get_field('project_image_section_2_images')).'" />'; $article .= '<h4 class="project-subtitle">'.the_field('project_image_section_3_title').'</h4>'; $image3 = wp_get_attachment_image_src(get_field('project_image_section_3_images'), 'full'); $article .= '<img src="'.$image3[0].'" alt="'.get_the_title(get_field('project_image_section_3_images')).'" />'; $article .= '</section>'; $article .= '</article><!-- #post-## -->'; endwhile; $article .= '</main><!-- #main -->'; $article .= '</div><!-- #primary -->'; $o['article']= $article; //$o = ob_get_clean(); echo json_encode($o); exit(); 

Я думаю, что он почти работает, и я почти вижу свет, вывод, который я получаю с помощью сетевого инспектора FireBug (с нулевым титульным объектом) показывает, что в массив JSON не попадает много контента (странно !) вот что я не мог понять:

 Alstom Blue Book | Michel Didier1793class="post-1793 project type-project status-publish has-post-thumbnail hentry projectcat-frontend"Alstom Blue Book2014Web Relief<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent magna elit, lobortis id elementum in, vestibulum vitae tortor. Proin molestie purus sit amet rhoncus pharetra. Nulla feugiat orci nec mattis mollis. Integer id lorem imperdiet, egestas nunc ac, efficitur lectus. Aenean nec ullamcorper est. Duis non urna mi. Cras dictum pharetra justo , ac tristique augue cursus id. Maecenas sollicitudin orci ac lectus laoreet suscipit. Maecenas bibendum egestas justo, id consectetur lectus pharetra id. Nulla finibus eu nunc sit amet bibendum. Aliquam erat volutpat.</p> HomeArticleMapping{"title":null,"type":"single-project","article":"<div id=\"container\" class=\"content-area project-content\"><main id=\"main\" class=\"site-main\" role=\"main\"><article id=\"post-\">Array<img class=\"project-hero\" src=\"http:\/\/localhost:8888\/portfolio\/wp-content\/uploads\/2015\/05\/alstom_hero .png\" alt=\"alstom_hero\" \/><section class=\"project-head entry-header\"><div class=\"clearfix\"><h3 class=\"project-title entry-title\"><\/h3><ul class=\"project-infos clearfix entry-meta\"><li><i class =\"fa fa-desktop\"><\/i><span>Frontend<\/span><\/li><li><i class=\"fa fa-calendar\"><\/i><span><\/span ><\/li><li><i class=\"fa fa-users\"><\/i><span><\/span><\/li><\/ul><\/div><div class=\"project-intro entry-content\"><\/div><\/section><section class=\"project-body entry-content\"><h4 class=\"project-subtitle \"><\/h4><img src=\"http:\/\/localhost:8888\/portfolio\/wp-content\/uploads\/2015\/05\/alstom_01.png \" alt=\"alstom_01\" \/><h4 class=\"project-subtitle\"><\/h4><img src=\"http:\/\/localhost:8888\/portfolio \/wp-content\/uploads\/2015\/05\/alstom_02.png\" alt=\"alstom_02\" \/><h4 class=\"project-subtitle\" ><\/h4><img src=\"http:\/\/localhost:8888\/portfolio\/wp-content\/uploads\/2015\/05\/alstom_03.png\" alt=\"alstom_03\" \/><\/section><\/article><!-- #post-## --><\/main><!-- #main --><\/div><!-- #primary -->"} 

Спасибо за ваше время, вашу помощь и ваше чтение,

Я пытался быть действительно полным, надеюсь, мой английский не вызовет никаких проблем со всеми этими деталями …

Примечание. Авторы оригинальной статьи рекомендуют использовать wp_localize_script () для отслеживания, в каком шаблоне мы находимся (и сделать переключатель в разных случаях, от списка до одного … и т. Д.). Я не уверен в этой части и если я положил wp_localize_script в хорошее место … Если вы, ребята, понимаете принцип и знаете, хорошо ли это, пожалуйста, дайте мне знать 🙂

РЕДАКТИРОВАТЬ Проблема, похоже, исходит из некоторой кодировки WordPress.

Где я

 $article .= '<div class="project-intro entry-content">'; $article .= the_content(); $article .= '</div>'; 

Если я заменю на

  $article .= '<div class="project-intro entry-content">'.get_the_content().'</div>'; 

Содержимое сообщения правильно помещается в строку JSON, а не за ее пределами. Я предполагаю, что the_content() строку JSON, а также the_ID() , wp_title() и т. Д. Любое предложение?

Замена всех конкретных the_content() , или the_ID … и т. Д. Эквивалентом геттеров, по-видимому, the_ID проблему. Здесь решение:

 <?php $o = array(); $o[ 'title' ] = wp_title( '|', false, 'right' ); $o[ 'type' ] = 'single-project'; //ob_start(); $article = '<div id="container" class="content-area project-content">'; $article .= '<main id="main" class="site-main" role="main">'; while (have_posts()) : the_post(); $article .= '<article id="post-'.get_the_ID().'"'.get_post_class().'>'; $article .= $image0 = wp_get_attachment_image_src(get_field('project_hero'), 'full'); $article .= '<img class="project-hero" src="'.$image0[0].'" alt="'.get_the_title(get_field('project_hero')).'" />'; $article .= '<section class="project-head entry-header">'; $article .= '<div class="clearfix">'; $article .= '<h3 class="project-title entry-title">'; $article .= get_the_title(); $article .= '</h3>'; $article .= '<ul class="project-infos clearfix entry-meta">'; if ( has_term('frontend', 'projectcat')) { $article .= '<li><i class="fa fa-desktop"></i><span>Frontend</span></li>'; } else if ( has_term('design', 'projectcat')) { $article .= '<li><i class="fa fa-pencil"></i><span>Design</span></li>'; } else if ( has_term('application', 'projectcat')) { $article .= '<li><i class="fa fa-code"></i><span>Application</span></li>'; } else { $article .= '<li><span><i class="fa fa-question"></i>Category not specified</span></li>'; } $article .= '<li><i class="fa fa-calendar"></i><span>'.get_field('project_year').'</span></li>'; $article .= '<li><i class="fa fa-users"></i><span>'.get_field('project_client').'</span></li>'; $article .= '</ul>'; $article .= '</div>'; $article .= '<div class="project-intro entry-content">'.get_the_content().'</div>'; $article .= '</section>'; $article .= '<section class="project-body entry-content">'; $article .= '<h4 class="project-subtitle">'.get_field('project_image_section_1_title').'</h4>'; $image1 = wp_get_attachment_image_src(get_field('project_image_section_1_images'), 'full'); $article .= '<img src="'.$image1[0].'" alt="'.get_the_title(get_field('project_image_section_1_images')).'" />'; $article .= '<h4 class="project-subtitle">'.get_field('project_image_section_2_title').'</h4>'; $image2 = wp_get_attachment_image_src(get_field('project_image_section_2_images'), 'full'); $article .= '<img src="'.$image2[0].'" alt="'.get_the_title(get_field('project_image_section_2_images')).'" />'; $article .= '<h4 class="project-subtitle">'.get_field('project_image_section_3_title').'</h4>'; $image3 = wp_get_attachment_image_src(get_field('project_image_section_3_images'), 'full'); $article .= '<img src="'.$image3[0].'" alt="'.get_the_title(get_field('project_image_section_3_images')).'" />'; $article .= '</section>'; $article .= '</article><!-- #post-## -->'; endwhile; $article .='</main><!-- #main -->'; $article .='</div><!-- #primary -->'; $o['article']= $article; //$o = ob_get_clean(); echo json_encode($o); exit();