Question

我正在使用bootstrap 4导航丸。我正在使用WordPress。由于我已经包含了指向function.php文件的必需CDN链接，但是控制台将错误消息显示为“无法加载jquery，popper，bootstrap（禁止）”。当我在那里检查元素时，可以看到导航丸的内容，但是它没有显示在屏幕上。请对此提供帮助。

我试图从function.php删除链接，并将其放置在头部仍无法正常工作。

这是我的function.php代码，其中包含链接

function myerson_header_scripts()
{
    if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {

        wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
        wp_enqueue_script('conditionizr'); // Enqueue it!

        wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
        wp_enqueue_script('modernizr'); // Enqueue it!

        wp_register_script('myersonscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
        wp_enqueue_script('myersonscripts'); // Enqueue it!

        wp_register_script('jquery', get_template_directory_uri() . 'https://code.jquery.com/jquery-migrate-3.1.0.js"
        integrity="sha256-oA/lsZCgEPkbv/byAkeXSTEZTsGOPZCrtbyFBHmcGKM="
        crossorigin="anonymous'); // Custom scripts
        wp_enqueue_script('jquery'); // Enqueue it!

        wp_register_script('Popper', get_template_directory_uri() . 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'); // Custom scripts
        wp_enqueue_script('Popper'); // Enqueue it!

        wp_register_script('bootstrapscript', get_template_directory_uri() . 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'); // Custom scripts
        wp_enqueue_script('bootstrapscript'); // Enqueue it!
    }
}

这是html代码

<section class="sponsored_brands">
    <div class="container">
        <div class="sponsored_brands_inner">
            <h2>Awards and Acolades</h2>
            <div class="sponsored_brands_tabs">
            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true"><img src="img/icons/mla.png"> </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
                </li>
            </ul>

                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus ratione blanditiis expedita beatae nihil, mollitia nisi excepturi optio ullam repellat dignissimos iste, eveniet vel numquam. Iusto laborum unde et eum?  </p>  
                    </div>

                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque quam incidunt laudantium modi ratione, facilis voluptates ab ipsam, maiores fuga quod suscipit, nobis accusamus expedita. Rem officiis velit optio sit?</p>
                    </div>

                    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                       <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet officia quae voluptatibus asperiores aspernatur ab soluta fuga quisquam. Sed dolore inventore et numquam quia consectetur in cum culpa soluta dignissimos!</p>
                    </div>
                </div>
            </div><!--sponsored_brands_tabs-->
        </div><!--sponsored_brands_inner-->
    </div><!--container-->
</section>

内容应显示在屏幕上。

Answer 1

您正在使用CDN引导文件，但同时使用的不是正确的get_template_directory_uri（）。

使用以下代码时，要使删除脚本入队，您还将附加模板目录URL。

wp_register_script('bootstrapscript', get_template_directory_uri() . 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'); // Custom scripts
wp_enqueue_script('bootstrapscript'); // Enqueue it

上面的代码导致页面查看源文件中的以下内容。

如您所见，它将导致以下脚本标记。

<script type='text/javascript' src='http://localhost/wp-content/themes/storefronthttps://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js?ver=5.2'></script>

脚本中的src无效。

要解决此问题，只需删除get_template_directory_uri()。 get_template_directory_uri()函数应仅用于包含本地资产。

wp_register_script('bootstrapscript','https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'); // Custom scripts
wp_enqueue_script('bootstrapscript'); // Enqueue it!

现在检查页面视图源，其中将包括script标记。

<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js?ver=5.2'></script>

尝试这个：

function myerson_header_scripts()
{
    if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {

        wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
        wp_enqueue_script('conditionizr'); // Enqueue it!

        wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
        wp_enqueue_script('modernizr'); // Enqueue it!

        wp_register_script('Popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array('jquery')); // Custom scripts
        wp_enqueue_script('Popper'); // Enqueue it!

        wp_register_script('bootstrapscript', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js', array('jquery')); // Custom scripts
        wp_enqueue_script('bootstrapscript'); // Enqueue it!

        wp_register_script('myersonscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
        wp_enqueue_script('myersonscripts'); // Enqueue it!
    }

Bootstrap 4导航选项卡/药片在Wordpress中不起作用

1 个答案: