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

Question

我正在学习如何从头开始创建自定义 Wordpress 主题，到目前为止一切正常，除了 CSS 样式表似乎无法正常工作。

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

1: index.html

(包含 html 的基本主题)

2: index.php

(将 index.html 转换为 index.php 并删除页眉和页 footer 分以制作 Wordpress 主题后)

但我知道问题出在哪里。这是因为我试图通过 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 功能，您在排队脚本中添加的所有脚本都具有相同的句柄“自定义脚本”，每个脚本和样式都必须具有唯一的句柄。

更换 handle 可以解决您的问题。

还有 wordpress 所说的:当您对依赖于 jQuery 的脚本进行排队时，请注意 WordPress 中的 jQuery 在 noConflict 模式下运行，这意味着您不能使用通用的 $ 别名。您必须改用完整的 jQuery。或者，使用 $ 快捷方式将代码放在 noConflict 包装器中。例如。

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

 [ your code goes here ]
} );

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