Wordpress 不遵循引导样式 - 默认为 Wordpress 样式

问题描述 投票：0回答：1

我正在开发 WordPress 块主题并创建自定义块模式。我已经加载了 bootstrap，并且 bootstrap 正在根据我放入网站的一些自定义 HTML 进行格式化；但是，在创建自定义块模式时，它没有使用响应式引导列样式来相应地显示列。相反，它使用 WordPress 列样式，在缩小时直接从 4 列设计变为单列。

我追求的是：最小的格式，垂直显示单列。放大时，它会变成 2x2 格式。然后最多移动到 4 列格式。

col-12 col-sm-6 col-xl-3

我的设计就像 bootstrap 一样，有一个 

container
div、一个 
row
div，然后是 
col-12 col-sm-6 col-xl-3
列 div。在我的代码中，我删除了 Wordpress 类，但当我查看源代码时，Wordpress 会自动将它们添加回来。

这是我的代码：

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="container"><!-- wp:columns -->
<div class="row"><!-- wp:column -->
<div class="col-12 col-sm-6 col-xl-3"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading 1</h2>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="img-fluid"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Paragraph 1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="col-12 col-sm-6 col-xl-3"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading 1</h2>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="img-fluid"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Paragraph 1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="col-12 col-sm-6 col-xl-3"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading 1</h2>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="img-fluid"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Paragraph 1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="col-12 col-sm-6 col-xl-3"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading 1</h2>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="img-fluid"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Paragraph 1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

</div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

这是块模式的转义代码：

<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"container\"><!-- wp:columns -->\n<div class=\"row\"><!-- wp:column -->\n<div class=\"col-12 col-sm-6 col-lg-3\"><!-- wp:heading -->\n<h2 class=\"wp-block-heading\" style=“font-size: 8vw;”>Heading 1</h2>\n<!-- /wp:heading -->\n\n<!-- wp:image -->\n<figure class=\"img-fluid\"><img alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Paragraph 1</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"col-12 col-sm-6 col-lg-3\"><!-- wp:heading -->\n<h2 class=\"wp-block-heading\" style=“font-size: 8vw;”>Heading 1</h2>\n<!-- /wp:heading -->\n\n<!-- wp:image -->\n<figure class=\"img-fluid\"><img alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Paragraph 1</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"col-12 col-sm-6 col-lg-3\"><!-- wp:heading -->\n<h2 class=\"wp-block-heading\" style=“font-size: 8vw;”>Heading 1</h2>\n<!-- /wp:heading -->\n\n<!-- wp:image -->\n<figure class=\"img-fluid\"><img alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Paragraph 1</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"col-12 col-sm-6 col-lg-3\"><!-- wp:heading -->\n<h2 class=\"wp-block-heading\" style=“font-size: 8vw;”>Heading 1</h2>\n<!-- /wp:heading -->\n\n<!-- wp:image -->\n<figure class=\"img-fluid\"><img alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Paragraph 1</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n</div>\n<!-- /wp:columns --></div>\n<!-- /wp:group -->

以下是从网站上查看源代码复制的方法：

<div class="wp-block-group container is-layout-constrained">
<div class="wp-block-columns row is-layout-flex wp-container-5">
<div class="wp-block-column col-xs-12 col-sm-6 col-lg-3 is-layout-flow">
<h2 class="wp-block-heading">Heading 1</h2>



<figure class="wp-block-image size-large img-fluid"><img decoding="async" width="1024" height="681" src="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-miguel-a-padrinan-255379-1024x681.jpg" alt="" class="wp-image-10" srcset="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-miguel-a-padrinan-255379-1024x681.jpg 1024w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-miguel-a-padrinan-255379-300x199.jpg 300w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-miguel-a-padrinan-255379-768x511.jpg 768w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-miguel-a-padrinan-255379-1536x1021.jpg 1536w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-miguel-a-padrinan-255379-2048x1362.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px"></figure>



<p>Paragraph 1</p>
</div>



<div class="wp-block-column col-xs-12 col-sm-6 col-lg-3 is-layout-flow">
<h2 class="wp-block-heading">Heading 1</h2>



<figure class="wp-block-image size-large img-fluid"><img decoding="async" loading="lazy" width="1024" height="683" src="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-rovenimagescom-949587-1024x683.jpg" alt="" class="wp-image-9" srcset="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-rovenimagescom-949587-1024x683.jpg 1024w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-rovenimagescom-949587-300x200.jpg 300w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-rovenimagescom-949587-768x512.jpg 768w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-rovenimagescom-949587-1536x1024.jpg 1536w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-rovenimagescom-949587-2048x1365.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px"></figure>



<p>Paragraph 1</p>
</div>



<div class="wp-block-column col-xs-12 col-sm-6 col-lg-3 is-layout-flow">
<h2 class="wp-block-heading">Heading 1</h2>



<figure class="wp-block-image size-large img-fluid"><img decoding="async" loading="lazy" width="1024" height="640" src="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-531880-1024x640.jpg" alt="" class="wp-image-8" srcset="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-531880-1024x640.jpg 1024w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-531880-300x188.jpg 300w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-531880-768x480.jpg 768w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-531880-1536x960.jpg 1536w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-531880.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px"></figure>



<p>Paragraph 1</p>
</div>



<div class="wp-block-column col-xs-12 col-sm-6 col-lg-3 is-layout-flow">
<h2 class="wp-block-heading">Heading 1</h2>



<figure class="wp-block-image size-large img-fluid"><img decoding="async" loading="lazy" width="1024" height="576" src="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-220067-1024x576.jpg" alt="" class="wp-image-7" srcset="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-220067-1024x576.jpg 1024w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-220067-300x169.jpg 300w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-220067-768x432.jpg 768w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-220067-1536x864.jpg 1536w, http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-220067-2048x1152.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px"></figure>



<p>Paragraph 1</p>
</div>
</div>
</div>
</div>
</li></ul>
</div>
</div>

我不介意 WordPress 课程在那里。我确信他们必须如此。我只是想让样式根据引导样式进行配合。如果可能的话，我希望 bootstrap 成为主要的，而 WordPress 样式成为次要的。

我是 WordPress 新手，因此非常感谢任何帮助和建议！为了直观地看到，您可以在 voicesofthechurch.com 查看此特定问题

如果您需要查看它，这是我链接 bootstrap 和 jquery 的排队脚本代码



    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(), '5.3.1', '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', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js', array(), '5.3.1', true);
        


}


add_action( 'wp_enqueue_scripts', 'theme_assets' );
wordpress twitter-bootstrap bootstrap-5 styling wordpress-gutenberg
1个回答
0
投票

如果您打算使用 Bootstrap 自定义主题并仅自己使用，我建议您使用现有的 WordPress 插件和主题来扭曲 Bootstrap，例如所有 Bootstrap 块。这对您来说在您的网站中使用比您自己开发要容易得多。

但是，如果您想公开主题，您可以深入了解有关创建 WordPress 主题的文档和视频。我对这部分知之甚少。抱歉，这里缺乏信息。

希望这些有帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.