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

Question

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

请看一下这两个打印屏幕：

1： index.html

（包含html的基本主题）

2： index.php

（将index.html转换为index.php并删除用于制作Wordpress主题的页眉和页脚部分）

但我知道问题出在哪里。因为这个javascript文件，我试图通过index.php在functions.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

你有相同的句柄＆＃34;自定义脚本＆＃34;对于按照wordpress功能在enqueue脚本中添加的所有脚本，每个脚本和样式都必须具有唯一的句柄。

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

同样的wordpress说：当你将依赖于jQuery的脚本排队时，请注意WordPress中的jQuery以noConflict模式运行，这意味着你不能使用公共的$别名。您必须使用完整的jQuery。或者，在noConflict包装器中使用$ shortcut放置代码。例如。

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

 [ your code goes here ]
} );

在JS文件中，您为[href]外部文档就绪功能添加了功能。这可能有用......