Bootstrap 4 навигационные вкладки / таблетки не работают в WordPress

Question

Я использую бутстрап 4 навигационные таблетки.Я использую WordPress.Поскольку я включил необходимые CDN ссылки на файл function.php, но консоль отображает сообщение об ошибке как «не может загрузить 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!
    }