css - 尝试创建网格/列简码

我一直来回走，做了大量的试验和错误。我要输出的是网格/列短代码。

例如[grid_4] Lorem Ipsum [/ grid4]

到目前为止，这就是我提出的

/*Grid Shortcode*/
function grid_one($content = null) {
    return '<div class="one columns">'.$content.'</div>';
}

add_shortcode('column_one', 'grid_one' );

尝试应用开始和结束简码时。我的文字似乎消失了。我使用的是骨架框架，该样式表的CSS位于此文件夹“ CSS”中。

CSS /骨架.css

当我尝试创建clearfix简码时。它似乎工作正常，没有问题，并且清除了浮动元素。这是代码。

//Clear Shortcode
function clear_fix($content = null) {
    return '<div class="clearfix"></div>';
}

add_shortcode ('clear', 'clear_fix');

而我的style.css位于根目录而不是文件夹内

最佳答案

抱歉，您的示例对您有点困惑，因为您使用[grid_4]作为简码，但是示例中的函数将使用[column_one]作为简码。
如果我理解正确，那么对于每列宽度，您还会有不同的短代码吗？
如果需要，可以将它们组合成一个短代码。
例如：

// column (grid) shortcode
function my_col($params,$content=null){
    extract(shortcode_atts(array(
        'no' => ''
    ), $params));
    return '<div class="col grid_'.$no.'">'.do_shortcode($content).'</div>';
}
add_shortcode("col", "my_col");

因此，如果您有一个12列的网格，则可以这样使用：

[col no="6"] This is the first column [/col]
[col no="6"] This is the second column [/col]

您也可以将其包装在行容器中以进行清除，如下所示：

[row]
  [col no="6"] This is the first column [/col]
  [col no="6"] This is the second column [/col]
[/row]

该行的简码为：

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

最后，我发现WordPress自动添加段落和中断标签有很多麻烦，因此我将以下内容添加到functions.php

// Help clean up automatic paragraph tags
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 12);

关于css - 尝试创建网格/列简码，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17310022/