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

Question

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

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

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

echo $text;

}

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

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

使用相同的策略，我想 echo/display 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 元素

How to echo div element using shortcode in WordPress

html

php

wordpress

shortcode