css - 尝试创建网格/列短代码

Question

我一直在来回走动，做了很多试验和错误。我想要输出的是一个网格/列简码。

例如[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/Skeleton.css

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

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

add_shortcode ('clear', 'clear_fix');

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

Answer 1

抱歉，您的示例让我有点困惑，因为您使用 [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);