logo标签列表

将JavaScript文件添加到WordPress主题

javascriptwordpresswordpress-theming
3

这是我第一次使用Bootstrap 3.0创建WordPress主题，在文件只是纯HTML时，一切都正常工作，但在我将其转换为WordPress主题之后，JavaScript未能正确加载。我不确定是否应该直接通过header.php或footer.php进行调用。

以下是我使用的代码。

header.php

<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
</head>

index.php

<?php get_header(); ?>
        <!--carousel-->
        <div class="container full-width">
            <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/1.jpg" alt="Slide-0">
                        <div class="cap-right slide-cap">
                            <img src="img/slide1cap.png">
                            <a href="#">View Lookbook</a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/2.jpg" alt="Slide-1"> 
                        <div class="cap-right slide-cap">
                            <img src="img/slide2cap.png" alt="SlideCap">
                            <a href="#">View More</a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/3.jpg" alt="Slide-2">
                        <div class="cap-left slide-cap">
                            <img src="img/slide3cap.png" alt="SlideCap">
                            <a href="#">Watch Video</a>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/4.jpg" alt="Slide-3">
                        <div class="cap-left slide-cap">
                            <img src="img/slide4Cap.png" alt="SlideCap">
                            <a href="#">Shop Shirts Now</a>
                        </div>
                    </div>
                </div>
                <!--arrows-->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
        <!--end of carousel-->
<?php get_footer(); ?>

functions.php

<?php 

function wpbootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . 'js/bootstrap.min.js', array( 'jquery' ) );
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

?>
3个回答
1

这是我通常在WordPress安装中注册脚本的方式。

<?php 
    function wpbootstrap_scripts_with_jquery()
    {
        wp_deregister_script( 'bootstrap-min-js' );
        wp_register_script( 'bootstrap-min-js', get_bloginfo('template_directory') . '/js/bootstrap.min.js', array( 'jquery' ) );
        wp_enqueue_script( 'bootstrap-min-js' );
    }
    add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

    ?>
我尝试将你的代码添加到functions.php中，但仍然无效。我甚至在Chrome Inspector中检查了源代码，发现该脚本甚至没有包含在<head>或附近的<footer>中。此外，在Chrome Inspector的资源中，我甚至找不到我正在尝试包含的脚本。 - lozadaOmr
一旦您已经在WordPress中注册了脚本，您如何调用它们？ - Dylan Hildenbrand
我确实尝试调用了该函数，即 add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );。 - lozadaOmr
add_action() 函数并不会实际执行 JavaScript。通过在头文件中调用 wp_head()，可以确保您的 JavaScript 在 WordPress 中被注册，以便您可以在 $(document).ready() 或类似的函数中调用它。 - Dylan Hildenbrand
重新查看代码后，我认为在header.php中调用了 wp_head()，尽管我不熟悉如何使用 $(document).ready()因此，作为临时措施，我只是使用<script src=“javscript.js”></script>标签来包含脚本。 我知道这不是最好的方法，但我卡了相当长时间，需要继续前进。 - lozadaOmr
0

你所需要做的就是改变

js/bootstrap.min.js

to

/js/bootstrap.min.js

注意：您需要查看页面源代码（从您的浏览器）来确认bootstrap.min.js的路径是否正确，否则它将无法工作。
0

在wp_head();之后写入wp_enqueue_script("jquery");

然后它应该可以工作了。

我已经将代码改为这个样子，但我认为JavaScript/jQuery仍然不起作用。 - lozadaOmr
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接