Clearfix Shortcode

时间:2013-01-09 作者:JohnK

我的一位客户在WordPress网站的页面上放置图像时遇到了问题。页面将有一个图像(左对齐),右侧有一些文本,然后是另一个图像,右侧有一些文本,等等。不幸的是,当文本比其图像短时,下面的图像将放置在第一个图像的右侧,这使得布局非常混乱。

她使用的是可视化编辑器,文本编辑器有困难,所以添加class="clearfix" (参考通常的after: clearfix黑客入侵styles.css) 直到最后一段,接下来的图像对她来说是行不通的。

因此,为了方便我的客户,我承诺添加一个clearfix快捷码。(请回答。)

【1】:参见。http://css-tricks.com/all-about-floats/, 另请参见http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/

1 个回复
最合适的回答,由SO网友:JohnK 整理而成

下面是要添加到的代码functions.php. 作为奖励,我为水平规则添加了一个短代码<hr>:

function shortcode_hr() {
  return \'<hr>\';
}

function shortcode_clearfix() {
  return \'<div style="display: block; visibility: hidden; clear: both; height: 0;"></div>\';
}

function register_shortcodes() {
  add_shortcode(\'hr\', \'shortcode_hr\');
  add_shortcode(\'clearfix\', \'shortcode_clearfix\');
}

add_action( \'init\', \'register_shortcodes\');
这里没有什么复杂的东西,所以它按预期工作也就不足为奇了。

说明:

功能add_action() 在加载页面之前设置挂钩(即打开init) 通过函数注册给定的短代码register_shortcodes(). 后者添加了短代码clearfix 到已注册的短代码列表,以便[clearfix] 出现在帖子或页面中,由函数返回的文本替换shortcode_clearfix(). 后者只返回clearfix的短代码div. HTML可能并不漂亮,但它完成了任务。非常简单。

参考文献WordPress Shortcodes: A Complete Guide
  • Official WordPress Shortcode API
  • 结束

    相关推荐

    Using wp_editor in shortcode

    我正在为前端提交构建一个插件。我正在使用shortcodes API显示表单以提交内容,但我遇到了一些问题。问题是,wp\\u编辑器echo的数据和shortcode应该返回数据。当我像这样集成wp\\U编辑器时:$final_form .= wp_editor(); 表单确实呈现,但不在帖子内容的位置,而是在帖子内容的顶部,其中包含快照代码。您知道如何在短码API中使用wp\\U编辑器吗?我不想费心手动打电话给TinyMCE等。非常感谢。