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

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

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

  1. Enqueue Script:
  2. function theme_assets() {
  3. // Register theme stylesheet.
  4. $theme_version = wp_get_theme()->get( 'Version' );
  5. // CSS
  6. wp_enqueue_style('custombootstrap', 'https:/cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css', array(), '3.4.4', 'all');
  7. wp_enqueue_style('customstyle', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'all');
  8. // JS
  9. wp_enqueue_script('customjquery', 'https://code.jquery.com/jquery-3.7.0.js', array(), '2.1.4', true);
  10. wp_enqueue_script('custombootstrap', 'http://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js', array(), '3.4.4', true);
  11. }
  12. add_action('wp_enqueue_scripts', 'theme_assets');

我添加了自定义HTML并使用了在互联网上找到的bootstrap代码来测试页面上“鞋子”所在位置的格式,以下是代码:如您所见,它根本没有格式化。这个4列部分也应该使用bootstrap进行格式化,在移动电话上缩小到4列,然后到2列,最后到单列。这也默认为正常的WordPress列格式。

  1. <div class="container-fluid px-0">
  2. <header>
  3. <div class="shape"></div>
  4. <!-- Navbar -->
  5. <nav class="navbar fixed-top navbar-expand-lg navbar-transparent">
  6. <a class="navbar-brand" href="#">SPORT SHOES</a>
  7. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
  8. aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  9. <span class="navbar-toggler-icon"></span>
  10. </button>
  11. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  12. <ul class="navbar-nav mr-auto">
  13. <li class="nav-item active">
  14. <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
  15. </li>
  16. <li class="nav-item">
  17. <a class="nav-link" href="#">MEN</a>
  18. </li>
  19. <li class="nav-item">
  20. <a class="nav-link" href="#">WOMEN</a>
  21. </li>
  22. <li class="nav-item">
  23. <a class="nav-link" href="#">KIDS</a>
  24. </li>
  25. <li class="nav-item">
  26. <a class="nav-link" href="#">BOYS</a>
  27. </li>
  28. <li class="nav-item">
  29. <a class="nav-link" href="#">GIRLS</a>
  30. </li>
  31. </ul>
  32. </div>
  33. </nav>
  34. <!-- ./ end of navbar -->
  35. <div class="container">
  36. <div class="row">
  37. <div class="col-md-6 left-side">
  38. <img src="https://i.imgur.com/jrRBTai.png" class="w-100">
  39. </div>
  40. <div class="col-md-6 right-side">
  41. <h1>SPORTS SHOES</h1>
  42. <p>FREE DELIVERY</p>
  43. <div class="text-center">
  44. <button class="btn order-button">ORDER NOW</button>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </header>
  50. </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

  1. Enqueue Script:
  2. function theme_assets() {
  3. // Register theme stylesheet.
  4. $theme_version = wp_get_theme()-&gt;get( &#39;Version&#39; );
  5. //CSS
  6. 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;);
  7. wp_enqueue_style(&#39;customstyle&#39;, get_template_directory_uri() . &#39;/style.css&#39;, array(), &#39;1.0.0&#39;, &#39;all&#39;);
  8. //JS
  9. wp_enqueue_script(&#39;customjquery&#39;, &#39;https://code.jquery.com/jquery-3.7.0.js&#39;, array(), &#39;2.1.4&#39;, true);
  10. 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);
  11. }
  12. 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样式:

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

Bootstrap脚本:

  1. 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
匿名

发表评论

匿名网友

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

确定