向WooCommerce添加砌体之后的网站中断

Question

我正在尝试在我的woocommerce商店页面中添加砌体，其中有十二个儿童主题。这也是我网站的首页。我对PHP和Wordpress相当陌生。

的第一步是建立一个函数来从http://masonry.desandro.com/

这加载masonry.pkgd.min.js文件是功能：

function twentytwelve_child_masonry() { 
if (! is_admin()) { 
    wp_register_script('jquery_masonry', get_stylesheet_directory_uri(). 'js/masonry.pkgd.min.js' ,array(jquery), 3.2); 
    wp_enque_script('jquery_masonry'); 
    add_action('wp_footer', 'twentytwelve_child_add_masonry');   
    function twentytwelve_child_add_masonry() { ?> 
     <script> 
      jQuery(document).ready(function($) { 
       $('#content').masonry({ 
        itemSelector: '.products', 
      isAnimated: true; 
       }); }); 
     </script> 
    <?php 
    }}} 
add_action('init', 'twentytwelve_child_masonry'); 

我发现它在琳达的教程。 com关于构建响应式主题。 当我尝试加载网页时，网站崩溃。任何想法？非常感谢帮助。

Answer 1

您需要修正一些语法错误，停止嵌套函数，正确使用wp_enqueue_script，并在适当的时刻排队脚本。您无法（或不应该）以init动作排队。相反，你真的应该简化事情像下面这样：

function twentytwelve_child_masonry() { 
    wp_enqueue_script('jquery_masonry', get_stylesheet_directory_uri() . '/js/masonry.pkgd.min.js', array('jquery'), '3.2', true); 
} 
add_action('wp_enqueue_scripts', 'twentytwelve_child_masonry'); 

然后，添加以下到您footer.php：

<script> 
    jQuery(document).ready(function($) { 
     $('#content').masonry({ 
      itemSelector: '.products', 
      isAnimated: true; 
     }); 
    }); 
</script> 

然而，如前所述，砌体船舶与WordPress ...所以这仍然可能使事情复杂化。