如何使用切换效果显示和隐藏WordPress帖子中的文本

Sometimes you may want to hide parts of your post or page content to give that article a compact look and allow users to click and see more information if they want. This technique is famously known as the toggle effect which is used across numerous websites in various different ways. The hidden content becomes visible when a user clicks on a specific link or button. This show/hide toggle effect is extremely handy for a FAQ page. You land on a page where you see bunch of questions listed. When a user clicks on the question, the answer expands right below. When you click on the question again, the answer will collapse. In this article we will show you how to show and hide text in WordPress posts and pages with the toggle effect.

有时,您可能希望隐藏部分帖子或页面内容,以使该文章看起来简洁,并允许用户单击并查看更多信息(如果需要)。 该技术众所周知地称为切换效果,该切换效果以多种不同方式在众多网站上使用。 当用户单击特定的链接或按钮时,隐藏的内容将变为可见。 对于FAQ页面,此显示/隐藏切换效果非常方便。 您将进入一个页面,在该页面上看到一堆问题。 当用户单击问题时,答案将在下方扩展。 当您再次单击问题时,答案将消失。 在本文中,我们将向您展示如何使用切换效果显示和隐藏WordPress帖子和页面中的文本。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明,请继续阅读。

First thing you need to do is install and activate the WP ShowHide plugin. The plugin works out of the box and there are no options for you to configure. To hide the text in posts using the toggle effect, you need to use the shortcode like this:

您需要做的第一件事是安装并激活WP ShowHide插件。 该插件可以直接使用,没有可供您配置的选项。 要使用切换效果隐藏帖子中的文本,您需要使用以下简短代码:

[showhide type="post"]Text you want to hide[/showhide]

[showhide type="post"]Text you want to hide[/showhide]

ShowHide toggle effect on text in WordPress posts

Upon first usage of the shortcode you will notice that it shows the toggle link with the text “Show Press Release (xx more words)”. Actually the plugin was written specifically for a site that published press releases. However this text can be easily changed to whatever you like. Use the shortcode like this:

首次使用简码时,您会注意到它显示带有文本“ Show Press Release(xx more words)”的切换链接。 实际上,该插件是专门为发布新闻稿的网站编写的。 但是,此文本可以轻松更改为您喜欢的任何内容。 使用这样的简码:

[showhide type="post" more_text="Show more..." less_text="Show less..."]
Text you want to hide
[/showhide]

[showhide type="post" more_text="Show more..." less_text="Show less..."]
Text you want to hide
[/showhide]

The showhide shortcode comes with some parameters that you can use to gain control on how it works in your individual posts. The default parameters and the values for the shortcode are these:

showhide短代码带有一些参数,您可以使用这些参数来控制其在各个帖子中的工作方式。 默认参数和简码的值是:

[showhide type="pressrelease" more_text="Show Press Release (%s More Words)" less_text="Hide Press Release (%s Less Words)" hidden="yes"]

[showhide type="pressrelease" more_text="Show Press Release (%s More Words)" less_text="Hide Press Release (%s Less Words)" hidden="yes"]

We hope that you found this article helpful in adding the toggle effect to hide text in your WordPress posts and pages. Let us know would you rather use toggle effect to hide full posts or use default WordPress excerpt functionality?

我们希望您发现本文对添加切换效果以隐藏WordPress帖子和页面中的文本有所帮助。 让我们知道您是希望使用切换效果来隐藏完整帖子还是使用默认的WordPress摘录功能?

翻译自: https://www.wpbeginner.com/plugins/how-to-show-and-hide-text-in-wordpress-posts-with-the-toggle-effect/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值