CSS电网简码，并在WordPress包(css grid shortcodes and wrap

我使用的是12列CSS网格类.grid_1，.grid_2，.grid_3 .... .grid_12

我想在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列网格）

如

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

- >包装成一个.row DIV这

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

- >包裹成.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 grid shortcodes and wrap in wordpress