Wordpress 块模板不允许引导程序控制响应能力

Question

我正在创建一个 WordPress 块主题。我想允许在其所有内置块上设置 WordPress 样式；但是，对于我在主题中创建的块，我想删除 Wordpress 样式并允许 Bootstrap 完全设置它们的样式。我已将 bootstrap 包含在我的主题中，并且正在加载...

我知道它正在工作，因为当我使用该类时

text-primary

它会将字体格式化为蓝色。

我编写了一个非常基本的 jquery/JavaScript 文件，如果我的块包含特定的类，它将搜索并删除该元素内的数组中列出的 WordPress 类。这部分工作完美。我这样做的原因是因为 WordPress 在加载网站时会自动添加这些类，并且在响应能力方面，wordpress 格式会覆盖引导程序格式。当我的 js 文件删除这些类时，它会删除默认的 WordPress 响应能力。

在你说每次 WordPress 更新和更改其类时这都会中断之前，我将此文件包含在父域中，并且可以为实现我的自定义块主题的所有网站更新它，并根据 WordPress 版本更改数组（我一旦我完全正常工作，稍后会添加）。

这就是问题所在。我已经完全删除了 Wordpress 的自定义块主题样式；然而，在响应能力方面，Bootstrap 也没有对内容进行样式设计。我希望有人能看看这个并告诉我是什么阻止了引导程序随着屏幕尺寸变大和变小而控制内容的显示方式。看起来它可以完美地工作，如果我将代码直接上传到没有 WordPress 的网站，它的样式就会正确。

列的设置从 1 列移动设计到更大屏幕上的 2 列设计，再到大屏幕上的 4 列设计。但它在 Wordpress 中不起作用。

我的JS文件：

var WPclasses  = [
  "wp-block-group",
  "is-layout-constrained",
  "wp-block-columns",
  "is-layout-flex",
  "wp-block-column",
  "is-layout-flow",
];



$(".WP-removeDefaultClasses").removeClass(WPclasses);

代码编辑器中显示的我的 Wordpress 内容块

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

<!-- wp:image {"id":10,"sizeSlug":"large","linkDestination":"none","className":"img-fluid"} -->
<figure class="wp-block-image size-large img-fluid"><img src="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-miguel-a-padrinan-255379-1024x681.jpg" alt="" class="wp-image-10"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"className":"text-primary"} -->
<p class="text-primary">Paragraph 1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"col-12 col-sm-6 col-lg-3 WP-removeDefaultClasses"} -->
<div class="wp-block-column col-12 col-sm-6 col-lg-3 WP-removeDefaultClasses"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading 1</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":9,"sizeSlug":"large","linkDestination":"none","className":"img-fluid"} -->
<figure class="wp-block-image size-large img-fluid"><img src="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-rovenimagescom-949587-1024x683.jpg" alt="" class="wp-image-9"/></figure>
<!-- /wp:image -->

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

<!-- wp:column {"className":"col-12 col-sm-6 col-lg-3 WP-removeDefaultClasses"} -->
<div class="wp-block-column col-12 col-sm-6 col-lg-3 WP-removeDefaultClasses"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading 1</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":8,"sizeSlug":"large","linkDestination":"none","className":"img-fluid"} -->
<figure class="wp-block-image size-large img-fluid"><img src="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-531880-1024x640.jpg" alt="" class="wp-image-8"/></figure>
<!-- /wp:image -->

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

<!-- wp:column {"className":"col-12 col-sm-6 col-lg-3 WP-removeDefaultClasses"} -->
<div class="wp-block-column col-12 col-sm-6 col-lg-3 WP-removeDefaultClasses"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading 1</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":7,"sizeSlug":"large","linkDestination":"none","className":"img-fluid"} -->
<figure class="wp-block-image size-large img-fluid"><img src="http://voicesofthechurch.com/wp-content/uploads/2023/08/pexels-pixabay-220067-1024x576.jpg" alt="" class="wp-image-7"/></figure>
<!-- /wp:image -->

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

Wordpress源码中输出的代码：

<div class="container WP-removeDefaultClasses">
<div class="row WP-removeDefaultClasses wp-container-5">
<div class="col-12 col-sm-6 col-lg-3 WP-removeDefaultClasses">
<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 class="text-primary">Paragraph 1</p>
</div>



<div class="col-12 col-sm-6 col-lg-3 WP-removeDefaultClasses">
<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="col-12 col-sm-6 col-lg-3 WP-removeDefaultClasses">
<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="col-12 col-sm-6 col-lg-3 WP-removeDefaultClasses">
<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>

我不明白为什么它的样式不正确，但也许有人可以帮助......

如果您还需要任何其他信息，请告诉我，我将提供进一步的信息。要观看现场直播，请访问 VoicesOfTheChurch.com。这是目前页面上唯一的内容。

Answer 1

在朋友的帮助下，我们找到了问题并找到了解决方案。 WP 添加了一些其他的 wp- 标签，我从来没有想到会导致这个问题。我发布此内容只是为了防止其他人遇到同样的问题。我想继续研究 JavaScript 以使其变得更好；不过，就这样吧！

var WPclasses  = [
      "is-layout-constrained",
      "is-layout-flex",
      "is-layout-flow",
    ];  
    
    
$(".WP-removeDefaultClasses").removeClass (function (index, className) {
    return (className.match (/\bwp-\S+/g) || []).join(' ');
}).removeClass(WPclasses);

这会查找 WordPress 添加的所有

wp-

标签并将其全部删除，仅在您指定的“容器”中，以便您可以在子元素（例如图像和段落以及自定义块中的其他块）中包含 wp- 标签。完全控制您想要控制的区域与您想要 WordPress 控制的区域。我必须添加一些自定义标签，这些标签被分类在

WPclasses

数组中。简单，但有效！