1

クラス .grid_1、.grid_2、.grid_3、.... .grid_12 で 12 列の CSS グリッドを使用しています。

ワードプレスでショートコードを作りたいです。これは、たとえば 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 などにラップします。

しかし、これにはもっと簡単な解決策があるかもしれません... ???

助けやアドバイスをいただければ幸いです。

4

1 に答える 1

0

私はあなたの質問が本当に好きです。これは、私が見た多くのテーマで通常行われている方法です。

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>
于 2012-12-05T17:18:04.667 に答える