WordPressでajaxを使用しているときにビジュアルコンポーザーを読み込む方法

Question

WordPressでajaxリクエストを使用して投稿の内容を取得しました。その投稿ではVisual Composerを使用しました。コンテンツはアウトを持つ唯一のVCのショートコードは、実際のコンテンツにそれらを変更することを示したが...それは私が

add_action('wp_ajax_drpk_custom','drpk_custom'); 
add_action('wp_ajax_nopriv_drpk_custom','drpk_custom'); 
function drpk_custom(){ 
if(isset($_REQUEST)){ 
    $id = $_REQUEST['id']; 

    $query = new WP_Query(array('p'=>$id)); 
    if($query->have_posts()): 
     while($query->have_posts()): $query->the_post();?> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel"><?php the_title() ?></h4> 
     </div> 
     <div class="modal-body"> 
     <?php the_content() ?> 
     </div> 
     <?php endwhile; 

    endif; 
} 
wp_die(); } 

そして、このjQueryのコード

$('.cart-item').find('a').on('click',function(){ 
    var postID  = $(this).data('id'), 
     ajaxContent = $('.modal-content'); 
     $.ajax({ 
      url: ajaxUrl.url, 
      data: { 
       'action' : 'drpk_custom', 
       'id': postID 
      }, 
      beforeSend: function(){ 
       // $load.fadeIn(500); 
      }, 
      success: function(data){ 
       // $load.hide(); 
       ajaxContent.html(data); 
      } 
     }); 
    }); 

それ

のようなリターンを使用するコードです

[vc_row][vc_column width=”1/4″][vc_single_image image=”389″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”#”][/vc_column][vc_column width=”1/4″][vc_single_image image=”390″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”#”][/vc_column][vc_column width=”1/4″][vc_single_image image=”391″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”#”][/vc_column][vc_column width=”1/4″][vc_single_image image=”392″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”#”][/vc_column][/vc_row] 

Answer 1

バージョン4.9以降のビジュアルコンポーザーは、短コードレイジーローディングを追加しました。 AJAXコンテンツにVCのショートコードを使用するには、これはあなたがしたいと思い何だろうWPBMap::addAllMappedShortcodes();

add_action('wp_ajax_drpk_custom','drpk_custom'); 
add_action('wp_ajax_nopriv_drpk_custom','drpk_custom'); 
function drpk_custom(){ 
if(isset($_REQUEST)){ 
    $id = $_REQUEST['id']; 

    $query = new WP_Query(array('p'=>$id)); 
    if($query->have_posts()): 
     while($query->have_posts()): $query->the_post(); 
      WPBMap::addAllMappedShortcodes(); 
     ?> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel"><?php the_title() ?></h4> 
     </div> 
     <div class="modal-body"> 
     <?php the_content() ?> 
     </div> 
     <?php endwhile; 

    endif; 
} 
wp_die(); } 

Answer 2

if(class_exists('WPBMap') && method_exists('WPBMap', 'addAllMappedShortcodes')) { // 1.17c. FIxes issues with ajax hopefully. 

       WPBMap::addAllMappedShortcodes(); // this is needed to ensure wc shortocdes come out right. 

      } 

コンテンツを印刷する前に、この関数を使用します。私はなぜ個人的にはわかりませんが、コールを開始する前にメソッドとクラスのチェックを使用している限り動作します。私の推測は、ajaxコールバックの前に実行されるフィルタ/フックと関係があるでしょう。

さらに、ajaxを使ってメインクエリの外側でループを実行している場合、the_title（）のような関数のコンテキストを設定するので、$ query-> the_post（） ;

Answer 3

あなたが使用している投稿は、などのボーダー、背景、などのカスタムCSSスタイルの変更を持っている..あなたはあまりにもget_post_meta($pid, '_wpb_shortcodes_custom_css', true);

例を使用して、そのカスタムCSSを取得する必要があります場合は、上記のソリューションを拡張するには：

$thepost = get_post($pid); 
WPBMap::addAllMappedShortcodes(); 
$content = $thepost->post_content; 
$content = apply_filters('the_content', $content); 
$vccss = get_post_meta($pid, '_wpb_shortcodes_custom_css', true); 
if(!empty($vccss)) 
{ 
    $vccss = strip_tags($vccss); 
    $content.='<style type="text/css" data-type="vc_shortcodes-custom-css">'; 
    $content.=$vccss; 
    $content.='</style>'; 
}   
echo $content;