wp:columns 是 WordPress 区块编辑器中的一个块,用于创建多列布局。以下是对 wp:columns 的详细说明:
<!-- wp:columns --> <div class="wp-block-columns"> <!-- wp:column {"width":50} --> <div class="wp-block-column" style="flex-basis:50%;"> <!-- Your content for the first column goes here --> </div> <!-- /wp:column --> <!-- wp:column {"width":50} --> <div class="wp-block-column" style="flex-basis:50%;"> <!-- Your content for the second column goes here --> </div> <!-- /wp:column --> </div> <!-- /wp:columns -->
<!-- wp:columns --> 和 <!-- /wp:columns --> 是区块编辑器中块的起始和结束标记,用于标识这是一个多列布局块。
<div class="wp-block-columns"> 包含了整个多列布局块的容器。这个容器用于包裹所有列。
<!-- wp:column {"width":50} --> 和 <!-- /wp:column --> 是 wp:columns 块中每个列的起始和结束标记。
<div class="wp-block-column" style="flex-basis:50%;"> 是包含单独列内容的容器。flex-basis:50%; 样式定义了列的宽度,这里是50%。
每个列容器中的 <!-- Your content for the column goes here --> 是用于放置该列内容的占位符。您可以在其中添加文本、图片、其他块等内容。
使用 wp:columns 区块,您可以轻松地创建具有不同列数和自定义宽度的多列布局。每个列可以包含不同的内容,从而使页面的结构更加灵活。在WordPress的区块编辑器中,用户可以通过拖放块或使用设置面板来调整列的宽度