解决方案可能取决于您为什么希望它在帖子页面上以这种方式工作。但最好的方法可能是在客户端执行此操作。

Method with maximum height

假设您的帖子模板的内容如下：

<div id="content"><?php the_content(); ?></div>

您需要在此div之后添加一个按钮，因此它将成为：

<div id="content"><?php the_content(); ?></div>
<button class="show-more">Show more</button>

然后添加CSS，以您的样式仅显示特定高度的内容。css添加：

#content { max-height: 100px; overflow: hidden; }
.show-more { margin-top: 15px; }

最后，添加一个脚本，该脚本将显示内容的全部高度，并在单击后删除“显示更多”按钮：

jQuery(document).ready(function($) {
    $(\'.show-more\').click(function() {
        $(\'#content\').css(\'max-height\', \'none\');
        $(this).remove();
    });
});

这只是一个基本设置，所以可以随意调整样式和脚本。

这里有一个小提琴的链接，您可以在这里试一试：https://jsfiddle.net/psxtur2L/

Method with replacing the content

如果您想将摘录具体显示为简短版本，可以这样做。

在模板中，您可以添加摘录和内容，以及一个按钮，如下所示：

<div id="excerpt"><?php the_excerpt(); ?></div>
<div id="content"><?php the_content(); ?></div>
<button class="show-more">Show more</button>

在CSS中，默认情况下只需隐藏内容：

#content { display: none; }
.show-more { margin-top: 15px; }

然后，当用户单击按钮时，隐藏摘录并显示内容：

jQuery(document).ready(function($) {
    $(\'.show-more\').click(function() {
        $(\'#excerpt\').hide();
        $(\'#content\').show();
        $(this).remove();
    });
});

这里有一把小提琴：https://jsfiddle.net/o7z2Lsks/

请注意，如果用户使用浏览器的调试器工具，则无需单击按钮即可访问全部内容，但我认为这并不重要。如果需要检查用户是否登录等，则应使用AJAX，因此需要对代码进行更多的添加。

我刚刚写了一段与内置wordpress配合使用的代码Read More Tag:

结果显示在以下图像中：前端文本与阅读更多链接：

具有无读链接的前端文本：

代码部分：

PHP：

<div class="js-read-more"><?php the_content(); ?></div>

JQUERY：

if($(\'.js-read-more\').length > 0){

    var _more = $(\'.js-read-more\').find(\'[id^=more]\');

    var _p = _more.parent();

    var _before = $(\'<div class="before"></div>\');
    var _after  = $(\'<div class="after transition-5 overflow-hidden"></div>\');
    var _link_more  = $(\'<a class="ml-2 arrow-after-right" href="#">Read More</a>\');
    var _link_less  = $(\'<a class="ml-2 arrow-after-up" href="#">Read Less</a>\');

    _before.append(_p.prevAll());
    _after.append(_p.nextAll());

    $(\'.js-read-more\').append(_before);
    _before.children().last().append(_link_more);
    $(\'.js-read-more\').append(_after);
    _after.children().last().append(_link_less);

    var _h = _after.outerHeight();
        _after.css(\'max-height\', 0);

    _link_more.click(function(){
        _after.css(\'max-height\', _h);
        $(this).fadeOut();
    });

    _link_less.click(function(){
        _after.css(\'max-height\', 0);
        _link_more.fadeIn();
    });

}

它在js中使用了一些tailwindcss类，可以通过阅读来扣除这些类。