您想在 wordpress 可視化編輯器中添加自定義樣式嗎？添加自定義樣式使您可以快速應(yīng)用格式，而無需切換到文本編輯器。在本文中，我們將向您展示如何向 wordpress 可視化編輯器添加自定義樣式。

注意：本教程需要css的基本工作知識。

為什么以及何時需要 wordpress 可視化編輯器的自定義樣式

默認情況下，WordPress可視化編輯器附帶一些基本的格式和樣式選項。然而，有時您可能需要自己的自定義樣式來添加CSS 按鈕、內(nèi)容塊、標語等。

您始終可以從可視編輯器切換到文本編輯器并添加自定義 html 和 CSS。但如果您經(jīng)常使用某些樣式，那么最好將它們添加到可視化編輯器中，以便您可以輕松地重用它們。

這將節(jié)省您在文本和可視化編輯器之間來回切換所花費的時間。它還允許您在整個網(wǎng)站上一致地使用相同的樣式。

最重要的是，您可以輕松調(diào)整或更新樣式，而無需編輯網(wǎng)站上的帖子。

說了這么多，我們來看看如何在WordPress可視化編輯器中添加自定義樣式。

方法一：使用插件在可視化編輯器中添加自定義樣式

您需要做的第一件事是安裝并激活TinyMCE 自定義樣式插件。有關(guān)更多詳細信息，請參閱我們有關(guān)如何安裝 WordPress 插件的分步指南。

激活后，您需要訪問設(shè)置?TinyMCE自定義樣式頁面來配置插件設(shè)置。

該插件允許您選擇樣式表文件的位置。它可以使用您的主題或子主題的樣式表，或者您可以選擇自己的自定義位置。

之后，您需要單擊“保存所有設(shè)置”按鈕來存儲您的更改。

現(xiàn)在您可以添加自定義樣式。您需要向下滾動一點到樣式部分，然后單擊“添加新樣式”按鈕。

首先，您需要輸入樣式的標題。該標題將顯示在下拉菜單中。接下來，您需要選擇它是內(nèi)聯(lián)元素、塊元素還是選擇器元素。

之后添加 CSS 類，然后添加 CSS 規(guī)則，如下面的屏幕截圖所示。

添加 CSS 樣式后，只需單擊“保存所有設(shè)置”按鈕即可存儲您的更改。

您現(xiàn)在可以編輯現(xiàn)有帖子或創(chuàng)建新帖子。您會注意到 WordPress 可視化編輯器第二行中有一個“格式”下拉菜單。

只需在編輯器中選擇一些文本，然后從“格式”下拉菜單中選擇您的自定義樣式即可應(yīng)用它。

您現(xiàn)在可以預(yù)覽您的帖子以查看您的自定義樣式是否已正確應(yīng)用。

方法2：手動將自定義樣式添加到WordPress可視化編輯器

此方法需要您手動將代碼添加到 WordPress 文件中。如果這是您第一次向 WordPress 添加代碼，請參閱我們的有關(guān)從 Web 添加代碼片段到 WordPress的指南。

第 1 步：在 WordPress 可視化編輯器中添加自定義樣式下拉菜單

首先，我們將在 WordPress 可視化編輯器中添加一個格式下拉菜單。然后，此下拉菜單將允許我們選擇并應(yīng)用我們的自定義樣式。

您需要將以下代碼添加到主題的functions.php文件或特定于站點的插件中。

編輯器樣式表控制可視化編輯器中內(nèi)容的外觀。檢查主題的文檔以找出該文件的位置。

如果您的主題沒有編輯器樣式表文件，那么您始終可以創(chuàng)建一個。只需創(chuàng)建一個新的 CSS 文件并將其命名custom-editor-style.css。

您需要將此文件上傳到主題的根目錄，然后將此代碼添加到主題的functions.php 文件中。

functionmy_theme_add_editor_styles() {    add_editor_style( 'custom-editor-style.css');}add_action( 'init', 'my_theme_add_editor_styles');

由

在 WordPress 中一鍵使用

就這樣。您已成功將自定義樣式添加到 WordPress 可視化編輯器中。您可以通過添加自己的元素和樣式隨意使用代碼。

我們希望本文能幫助您了解如何向 WordPress 可視化編輯器添加自定義樣式。您可能還想查看我們有關(guān)如何向 WordPress 小部件添加自定義樣式的指南。