CSS样式不适用于Wordpress自定义主题

Question

我正在学习如何从头创建自定义WordPress主题，直到现在一切都工作正常，除了CSS样式表似乎没有正常工作。

请看看这两个打印屏幕：

1：的index.html

（其中包含HTML的一个基本主题）

2： index.php

（中的index.html转换为index.php文件和删除页眉和页脚部分制作一个WordPress主题后），但我知道问题出在哪里来的。它因为这个JavaScript文件，我试图通过functions.php在index.php加载它，但它不起作用。我命名这个文件inline.js：

$(document).ready(function(){ 
       init_masonry(); 
      }); 

      function init_masonry(){ 
       var $container = $('.item_container'); 
       $container.imagesLoaded(function(){ 
        $container.masonry({ 
         itemSelector : '.item', 
         "gutter": 18, 
         isFitWidth: true 
        }); 
       }); 
      } 

      $(document).ready(function(){ 
       $('a[href*=#]:not([href=#])').click(function() { 
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
         var target = $(this.hash); 
         target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
         if (target.length) { 
          $('html,body').animate({ 
           scrollTop: target.offset().top 
          }, 1000); 
          return false; 
         } 
        } 
       }); 
      }); 

这是functions.php：

<?php 
function catalog(){ 
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
    wp_enqueue_style('style', get_stylesheet_uri()); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery')); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array('jquery')); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/jquery.js', array('jquery')); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array('jquery')); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/offcanvas.js', array('jquery')); 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/inline.js', array('jquery')); 
} 
add_action('wp_enqueue_scripts','catalog'); 
register_nav_menus(array(
    'primary' => __('Primary Menu'), 
    'footer' => __('Footer Menu'), 
)); 
?> 

我已经排队了inline.js脚本像其他人一样，但它不工作。我也尝试按Ctrl + F5刷新页面，但没有任何更改。

那么你对这个问题有什么建议吗？

Answer 1

对于您按照wordpress功能在排队脚本中添加的所有脚本，您都有相同的句柄“自定义脚本”，每个脚本和样式都必须具有唯一句柄。

更改手柄可以解决您的问题。

而且作为什么WordPress的说：当你排队脚本，它依赖于jQuery的，注意了jQuery在WordPress在noConflict模式，这意味着你不能使用普通的别名$运行。您必须改用完整的jQuery。或者，将您的代码放在noConflict包装中，使用$快捷方式。例如。

jQuery(document).ready(function($) { 

[ your code goes here ] 
}); 

在你的JS文件中，你已经添加了[href]外部文档就绪函数的功能。这可能工作..