如何在不使用插件的情况下在 SWELL 中使用类似键盘的字符

Eva

2025-05-11

本文推荐给以下人群：

使用 WordPress 主题“SWELL”的人
想要轻松使用类似键盘的格式的人
想要使用自定义格式而不尽可能增加插件数量的人

本网站使用的 WordPress 主题是膨胀我们将详细解释如何使用自定义格式 `` 以及示例 CSS 轻松使用类似键盘的字符。

由于 SWELL 最多可以设置两种自定义格式，因此此页面添加快速标签不使用插件，例如膨胀我们将介绍仅使用的功能的设置方法。

如何在不使用插件的情况下在 SWELL 中使用类似键盘的字符最终目标图像

控制键+替代+删除我认为使用像这样的类似键盘的字符会大大提高网站的可见性，所以如果您正在使用SWELL，请看一下。

将类似键盘的字符 CSS 添加到 SWELL 自定义格式

首先，让我们将 CSS 添加到 SWELL 的自定义格式中。

步从仪表板打开编辑器设置

首先，打开 WordPress 仪表板并单击屏幕顶部的。点击【SWELL设置】请。

单击[SWELL 设置]，菜单将向底部展开。

在其中点击【编辑器设置】请。

步点击【自定义格式】

单击[编辑器设置]将进入一个用大字写着“编辑器设置”的页面。

在其中点击【自定义格式】请。

步输入自定义格式[显示名称]

点击[自定义格式]，您将进入一个用大字写着“自定义格式集”的页面。

在页面上向下滚动一点，您会看到一个标有“自定义格式”的段落。

在“自定义格式”中为“自定义格式-1”或“自定义格式-2”的显示名称输入一个易于理解的名称请。

步输入 CSS 进行自定义格式设置

输入显示名称后，进一步向下滚动并输入 CSS 以进行自定义格式设置。
如果您希望它与本网站完全相同，请复制并粘贴下面的CSS。

/* keyboard */
.swl-format-2 {
	height: 25px;
	min-width: 20px;
	padding: 0 10px;
	margin: 5px 10px;
	background: #808080;
	border-radius: 5px;
	box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
	color: #FFFFFF;
	text-align: center;
	line-height: 25px;
	display: inline-block;	
}

第二行.swl-format-2是自定义格式-2的类名。
自定义格式 – 如果使用 1，CSS 的第二行应该是.swl-format-1 {请。