WordPress自定义主题似乎加载了Bootstrap的CSS和JavaScript，但没有格式化内容。

huangapple
go评论94阅读模式
英文:

WordPress custom theme seems to load bootstrap css and JavaScript but not formatting content

问题

我正在构建一个自定义的WordPress块模板主题。我已经添加了用于加载查询的enqueue脚本，以及bootstrap和bootstrap css。在查看源代码时，它正在加载它；然而，当添加bootstrap内容和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/bootstrap@4.6.2/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/bootstrap@4.6.2/dist/js/bootstrap.min.js', array(), '3.4.4', true);
}

add_action('wp_enqueue_scripts', 'theme_assets');

我添加了自定义HTML并使用了在互联网上找到的bootstrap代码来测试页面上“鞋子”所在位置的格式，以下是代码：如您所见，它根本没有格式化。这个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>

如果需要其他帮助，请告诉我。非常感谢您的帮助。

英文:

I am building a custom WordPress block template theme. I have added the enqueue script to load query, bootstrap is and bootstrap css. It is loading it when viewing source; however, when putting in bootstrap content and css classes, WordPress seems to be ignoring the design and formatting according to WordPress css. Any help would be greatly appreciated.

Site: VoicesOfTheChurch.com

Enqueue Script:
function theme_assets() {
// Register theme stylesheet.
$theme_version = wp_get_theme()-&gt;get( &#39;Version&#39; );
//CSS
wp_enqueue_style(&#39;custombootstrap&#39;, &#39;https:/cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css&#39;, array(), &#39;3.4.4&#39;, &#39;all&#39;);
wp_enqueue_style(&#39;customstyle&#39;, get_template_directory_uri() . &#39;/style.css&#39;, array(), &#39;1.0.0&#39;, &#39;all&#39;);
//JS
wp_enqueue_script(&#39;customjquery&#39;, &#39;https://code.jquery.com/jquery-3.7.0.js&#39;, array(), &#39;2.1.4&#39;, true);
wp_enqueue_script(&#39;custombootstrap&#39;, &#39;http://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js&#39;, array(), &#39;3.4.4&#39;, true);
}
add_action( &#39;wp_enqueue_scripts&#39;, &#39;theme_assets&#39; );

I added custom HTML and used a bootstrap code I found on the internet to test the formatting on the page where the “shoe” is, here is the code: As you can see, it isn’t formatting it at all. The 4 column section is supposed to be formatted with bootstrap as well where it scales down to 4 columns, to 2 columns, to single column on mobile phone. That is also defaulting to the normal WordPress column format.

&lt;div class=&quot;container-fluid px-0&quot;&gt; &lt;header&gt; &lt;div class=&quot;shape&quot;&gt;&lt;/div&gt; &lt;!-- Navbar --&gt; &lt;nav class=&quot;navbar fixed-top navbar-expand-lg navbar-transparent&quot;&gt; &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;SPORT SHOES&lt;/a&gt; &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt; &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt; &lt;/button&gt; &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt; &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt; &lt;li class=&quot;nav-item active&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;HOME &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;MEN&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WOMEN&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;KIDS&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;BOYS&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;GIRLS&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/nav&gt; &lt;!-- ./ end of navbar --&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-md-6 left-side&quot;&gt; &lt;img src=&quot;https://i.imgur.com/jrRBTai.png&quot; class=&quot;w-100&quot;&gt; &lt;/div&gt; &lt;div class=&quot;col-md-6 right-side&quot;&gt; &lt;h1&gt;SPORTS SHOES&lt;/h1&gt; &lt;p&gt;FREE DELIVERY&lt;/p&gt; &lt;div class=&quot;text-center&quot;&gt; &lt;button class=&quot;btn order-button&quot;&gt;ORDER NOW&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/header&gt; &lt;/div&gt;

Anything else you need, please let me know. Any help would be appreciated.

答案1

得分: 0

我看到你的CDN链接中有一些拼写错误，请尝试以下代码：

Bootstrap样式：

wp_enqueue_style('custombootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css', array(), '5.3.1', 'all');

Bootstrap脚本：

wp_enqueue_script('custombootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js', array(), '5.3.1', true);
英文:

I see some typos in your CDN links, try out this code:

Bootstrap Style:

wp_enqueue_style(&#39;custombootstrap&#39;, &#39;https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css&#39;, array(), &#39;5.3.1&#39;, &#39;all&#39;);

Bootstrap Script:

wp_enqueue_script(&#39;custombootstrap&#39;, &#39;https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js&#39;, array(), &#39;5.3.1&#39;, true);

huangapple
  • 本文由 发表于 2023年8月5日 07:26:19
  • 转载请务必保留本文链接：https://go.coder-hub.com/76839582.html
  • bootstrap-5
  • themes
  • twitter-bootstrap
  • wordpress
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定