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短代码时。它似乎工作正常，没有任何问题，它清除浮动的元素。这是代码。

//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);

尝试创建网格/列短代码

1 个答案: