Question

我正在创建一个 WordPress 插件，它可以使用短代码显示部分用户个人资料页面。此解决方案将允许使用页面构建器短代码小部件创建用户个人资料页面。

到目前为止，我已经了解如何使用短代码回显简单的文本。

function simpletext() {
$text = 'simple text';

echo $text;

}

add_shortcode('text-shortcode', 'simpletext');

感谢上述功能，我可以使用 [text-shortcode] 来回显“简单文本”。

使用相同的策略，我想在用户个人资料页面上回显/显示 div 元素 - <div class="um_profile_container>，该页面由保留 - <div class="um_profile_container> 元素的相同模板提供支持。

function profilecontainer() {
$profilecontainer = '<div class="um_profile_container">';
echo $profilecontainer;

}

add_shortcode('profile-container', 'profilecontainer');

然而，与简单的文本不同，当通过页面构建器（在我的例子中为 Elementor）将 [profile-container] 短代码添加到页面时，上述函数不会在前端显示此 div 元素。

我错过了什么？

Answer 1

一个可能的解决方案是使用 ob_start 启用输出缓冲，这样您就可以自由地编写 html 代码。

<?php
function profilecontainer() {
    ob_start(); ?>
    
    <div class="um_profile_container">Your Content</div>

    <?php return ob_get_clean();
}
add_shortcode('profile-container', 'profilecontainer');
?>

Answer 2

事实证明，当通过页面构建器（在我的例子中是 Elementor）将 [profile-container] 短代码添加到页面时，该函数实际上确实在前端显示了这个 div 元素。

问题是 div 元素没有高度或宽度，所以它显示为一条简单的线 - div 元素边框靠在一起。要对此进行测试，您必须使用 CSS 设置高和宽。

.um_profile_container {
    width: 100px;
    height: 100px;
}

如何在 WordPress 中使用短代码回显 div 元素

2 个答案: