wordpress ajax отображение content

421

24 ноября 2016, 10:28

Задача: есть блок с картинками, которые являются изображениями разных постов WP. Блок the content(); скрыт в CSS. Необходимо реализовать отображение содержимого соответствующего блока content при нажатии на соответствующее изображение.

В последней попытке попытался отобразить скрытый div c content помимо ошибки, нарвался еще и на эту ошибку:

Uncaught TypeError: $ is not a function(…)

Очень прошу, подскажите как все же это можно реализовать?

$(".show-more").click(function(){ 
                                $(document).find(".more_service:not(:visible)").slideToggle('fast', 
                                    function() { 
                                        if ($(document).find(".more_service:not(:visible)").length==0) { 
                                            $(".show-more").css("display","none"); 
                                        } 
                                    } 
                                ); 
                            })

#more_service { 
    display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<?php 
  while ($gadget->have_posts()) : $gadget->the_post(); ?> 
<div class="img-hover"> 
  <img class="img-responsive img-rounded show-more" id="client"  
        src="<?php echo get_the_post_thumbnail_url(); ?>" 
        alt="<?php the_title(); ?>"> 
</div> 
 
 <div id="more_service"> 
    <?php the_content(); ?> 
</div>

Answer 1

WordPress использует jQuery в noconflict mode. Использование символа $ приводит к ошибке. Нужно в скрипте либо все символы $ заменить на jQuery

jQuery(".show-more").click(function() { 
  jQuery(document).find(".more_service:not(:visible)").slideToggle('fast', 
    function() { 
      if (jQuery(document).find(".more_service:not(:visible)").length == 0) { 
        jQuery(".show-more").css("display", "none"); 
      } 
    }); 
});

либо запускать свой скрипт my.js следующего содержания

jQuery(document).ready(function($) { 
 
  $(".show-more").click(function() { 
    $(document).find(".more_service:not(:visible)").slideToggle('fast', 
      function() { 
        if ($(document).find(".more_service:not(:visible)").length == 0) { 
          $(".show-more").css("display", "none"); 
        } 
      } 
    ); 
  }); 
 
  // Прочие действия после загрузки страницы 
   
});

В этом примере важен аргумент $ в первой строке, он позволяет далее использовать этот символ внутри функции.

Сам скрипт my.js надо запускать из functions.php вашей темы

function my_enqueue_scripts() {
    wp_register_script('my', 'my.js', array('jquery', 'cycle'));
        wp_enqueue_script('my');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts');