从我的自定义块模式中删除 WordPress 默认类

Question

我正在 WordPress 中开发一个块模板。我正在创建自定义块图案。我尝试去参加 WordPress 课程；但是，当 wordpress 加载该块时，它会自动重新加载类。是否有一个我可以加载的函数或一个我可以添加到 div 中的类，其中 wordpress 类不会自动添加回来。

原因：我正在使用引导程序设计我的块，并且该网站在扩展时不会遵循引导程序响应性。

当我添加自定义 html 和 WordPress 时，我的代码可以正常工作，但不会添加类......

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
<h2 class="wp-block-heading">Heading 1</h2>



<figure class="wp-block-image size-large"><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 img-fluid" 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="col-xs-12 col-sm-6 col-lg-3">
<h2 class="wp-block-heading">Heading 1</h2>



<figure class="wp-block-image size-large"><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 img-fluid" 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="col-xs-12 col-sm-6 col-lg-3">
<h2 class="wp-block-heading">Heading 1</h2>



<figure class="wp-block-image size-large"><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 img-fluid" 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="col-xs-12 col-sm-6 col-lg-3">
<h2 class="wp-block-heading">Heading 1</h2>



<figure class="wp-block-image size-large"><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 img-fluid" 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>
</div>

使用块模式时，wordpress 代码将其更改为…

<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>

问题是 wp-block-group、wp-block-columns 和 wp-block-column 格式正在成为 bootstrap col-- 类的默认格式。当包含引导程序时，我在队列中添加了更高的优先级，但这没有效果。

移动设备上的列从 4 列设计直接变为单列。它应该从 4 列变为 2x2 再变为单列。

Answer 1

我首先想说的是，wordpress 的样式块并不是面向未来的。他们在升级时不断改变东西，更不用说添加或改变他们的风格了。

对于你的情况，我会完全删除前端块样式表，所以显然他们添加的类并不重要。

在主题的functions.php中添加：

add_action('wp_print_styles', 'my_deregister_styles', 100);
function my_deregister_styles()
{
    wp_dequeue_style('wp-block-library');
}