css 网格简码并在 wordpress 中换行

2022-01-18 00:00:00 grid wordpress css shortcode

我正在使用 .grid_1、.grid_2、.grid_3、.....grid_12 类的 12 列 css 网格

I'm using a 12 column css grid with the classes .grid_1, .grid_2, .grid_3, .... .grid_12

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

I'd like to create shortcodes in wordpress. This is what I did for e.g. a 2 and 10 column style

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 类中才能正常工作

The problem is that those shortcodes need to be wrapped in a .row class to make it work

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

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

Is there a simple solution how to wrap each grid style group into a row class when it's a multiple of 12 (as it's a 12 column grid)

例如

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

-> 将其包装成 .row div

-> wrap this into a .row div

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

-> 将其包装成 .row div 等.

-> wrap this into a .row div, etc.

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

But maybe there's an even more simple solution to this... ???

如果您能提供任何帮助和/或建议，我将不胜感激！

I would be thankful for any help and/or advice!

推荐答案

我真的很喜欢你的问题.这就是我见过的许多主题中通常的做法.

I really like you question. This is how it is usually done in alot of themes that I have seen though. 

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

然后像这样使用您的简码:

Then use your shortcode like this:

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

相关文章