Bootstrap WordPress自定义主题似乎加载引导CSS和JavaScript,但不格式化内容

piv4azn7  于 12个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(111)

我正在构建一个自定义的WordPress块模板主题。我已经添加了enqueue脚本来加载查询,bootstrap is和bootstrap css。查看源时正在加载;但是,当放入引导内容和css类时,Wordpress似乎忽略了根据Wordpress css的设计和格式。任何帮助将不胜感激。
网址:VoicesOfTheChurch.com

Enqueue Script:

    function theme_assets() {
        // Register theme stylesheet.
        $theme_version = wp_get_theme()->get( 'Version' );

     //CSS
        wp_enqueue_style('custombootstrap', 'https:/cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', array(), '3.4.4', 'all');
        wp_enqueue_style('customstyle', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'all');

        //JS
        wp_enqueue_script('customjquery', 'https://code.jquery.com/jquery-3.7.0.js', array(), '2.1.4', true);
        wp_enqueue_script('custombootstrap', 'http://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js', array(), '3.4.4', true);
        
}
add_action( 'wp_enqueue_scripts', 'theme_assets' );

我添加了自定义HTML,并使用了我在互联网上找到的引导代码来测试“鞋子”所在页面的格式,以下是代码:正如你所看到的,它根本没有格式化它。4列部分应该是格式化与 Bootstrap ,以及在那里它规模缩小到4列,2列,以单列在移动的上。这也默认为正常的Wordpress列格式。
<div class="container-fluid px-0"> <header> <div class="shape"></div> <!-- Navbar --> <nav class="navbar fixed-top navbar-expand-lg navbar-transparent"> <a class="navbar-brand" href="#">SPORT SHOES</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">MEN</a> </li> <li class="nav-item"> <a class="nav-link" href="#">WOMEN</a> </li> <li class="nav-item"> <a class="nav-link" href="#">KIDS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">BOYS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">GIRLS</a> </li> </ul> </div> </nav> <!-- ./ end of navbar --> <div class="container"> <div class="row"> <div class="col-md-6 left-side"> <img src="https://i.imgur.com/jrRBTai.png" class="w-100"> </div> <div class="col-md-6 right-side"> <h1>SPORTS SHOES</h1> <p>FREE DELIVERY</p> <div class="text-center"> <button class="btn order-button">ORDER NOW</button> </div> </div> </div> </div> </header> </div>
你还需要什么,请告诉我。如果你能帮忙的话,我将不胜感激。

pdkcd3nj

pdkcd3nj1#

我在你的CDN链接中看到了一些错别字,试试这个代码:
Bootstrap样式:
wp_enqueue_style('custombootstrap', 'https://cdn.jsdelivr.net/npm/bootst [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) /dist/css/bootstrap.min.css', array(), '5.3.1', 'all');
引导脚本:
wp_enqueue_script('custombootstrap', 'https://cdn.jsdelivr.net/npm/boo [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) /dist/js/bootstrap.min.js', array(), '5.3.1', true);

相关问题