css网格短代码和换行在wordpress

问题描述

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

在wordpress中创建短代码。
这是我为例如。 a 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类中以使它工作
  p> 
 
 
 < 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等。
 
 
 
但也许有一个更简单的解决方案... ... 
 
 
 
我会感谢任何帮助和/或建议！ / p> 
 
解决方案
我真的很喜欢你的问题。这是通常在我看到的很多主题做的。 
  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>内容这里< / div> 
< div class =grid_2>内容这里< / div> 
< / div> 
  
 
I'm using a 12 column css grid with the classes .grid_1, .grid_2, .grid_3, .... .grid_12
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');
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>
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)
e.g.
 <div class="grid_1"></div>
 <div class="grid_11"></div>
-> wrap this into a .row div
 <div class="grid_3"></div>
 <div class="grid_9"></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]
Output:
<div class="row">
   <div class="grid_2">Content Here</div>
   <div class="grid_2">Content Here</div>
</div>
                        
这篇关于css网格短代码和换行在wordpress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！