Question

我正在使用带有.grid_1，.grid_2，.grid_3，.... .grid_12等类的12列css网格

我想在wordpress中创建短代码。这就是我所做的，例如2列和10列样式

function grid_2( $atts, $content = null ) {
return '<div class="grid_2">' . do_shortcode( $content ) . '</div>';
}
add_shortcode('grid_2', 'grid_2');

function grid_10( $atts, $content = null ) {
    return '<div class="grid_10">' . do_shortcode( $content ) . '</div>';
}
add_shortcode('grid_10', 'grid_10');

问题是这些短代码需要包装在.row类中才能使其正常工作

<div class="row">
   <div class="grid_2"></div>
   <div class="grid_10"></div>
</div>

有一个简单的解决方案，当它是12的倍数时，如何将每个网格样式组包装成行类（因为它是12列网格）

e.g。

 <div class="grid_1"></div>
 <div class="grid_11"></div>

- ＆GT;将其包装成.row div

 <div class="grid_3"></div>
 <div class="grid_9"></div>

- ＆GT;将其包装成.row div等。

但也许有一个更简单的解决方案...... ???

我会感谢任何帮助和/或建议！

Answer 1

我真的很喜欢你的问题。这是我通常在很多主题中完成的方式。

function grid_row( $atts, $content = null ) {
return '<div class="row">' . do_shortcode( $content ) . '</div>';
}
add_shortcode('grid_row', 'grid_row');

然后使用您的短代码：

[grid_row]
   [grid_2]Content Here[/grid_2]
   [grid_2]Content Here[/grid_2]
[/grid_row]

输出：

<div class="row">
   <div class="grid_2">Content Here</div>
   <div class="grid_2">Content Here</div>
</div>

css网格短代码和wordpress包装

1 个答案: