如何在不使用插件的情況下在 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 {請。