Clearfix短代码

Question

我的一个客户一直很难把图片放在她的WordPress站点的页面上。页面将有一个图像(左对齐)和一些文本在右边，然后另一个图像与一些文本在右边，等等。不幸的是，当文本比它的图像短，下面的图像放置在第一个图像的右边，这使得布局相当混乱。

她正在使用可视化编辑器，并且很难使用文本编辑器，因此在下一段图像不适合她之前，在最后一段中添加class="clearfix" (引用styles.css中通常的after: clearfix hack1 )。

因此，为了方便我的客户，我决定添加一个清晰的短代码。(回答即将到来)

1：Cf.http://css-tricks.com/all-about-floats/，也见http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/

Answer 1

下面是要添加到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]出现在post或页面中，它都会被函数shortcode_clearfix()返回的文本所取代。后者只是返回清除修复div的短代码。HTML可能不是很漂亮，但它可以完成任务。相当直截了当。

参考资料

• WordPress短代码:完整指南
• 官方WordPress短代码API