如何向 WordPress 視覺化編輯器新增自定義樣式

您要在 WordPress 視覺化編輯器中新增自定義樣式嗎？新增自定義樣式允許您快速應用格式，而無需切換到文字編輯器。在本文中，我們將向您展示如何向 WordPress 視覺化編輯器新增自定義樣式。

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

為什麼和需要自定義樣式的 WordPress 視覺化編輯器

預設情況下，WordPress 視覺化編輯器附帶一些基本的格式和樣式選項。但是，有時您可能需要自定義樣式來新增 CSS 按鈕，內容塊，標語等。

您可以隨時從視覺切換到文字編輯器，並新增自定義的 HTML 和 CSS 。但是，如果您經常使用某些樣式，那麼最好將它們新增到視覺化編輯器中，以便您可以輕鬆地重用它們。

這將節省您在文字和視覺化編輯器之間來回切換的時間。它還將允許您在整個網站中始終使用相同的樣式。

最重要的是，您可以輕鬆地調整或更新樣式，而無需編輯您網站上的帖子。

話雖如此，我們來看看如何在 WordPress 視覺化編輯器中新增自定義樣式。

方法 1：使用外掛在視覺化編輯器中新增自定義樣式

首先你需要做的是安裝並啟用 TinyMCE Custom Styles 外掛。有關詳細資訊，請參閱我們關於如何安裝 WordPress 外掛的逐步指南。

啟用後，您需要訪問設定»TinyMCE 自定義樣式頁面來配置外掛設定。

該外掛允許您選擇樣式表檔案的位置。它可以使用您的主題或小孩主題的樣式表，或者您可以選擇自己的自定義位置。

之後，您需要點選 “儲存所有設定” 按鈕儲存更改。

現在您可以新增自定義樣式。您需要向下滾動一點到樣式部分，然後單擊新增新樣式按鈕。

首先，您需要輸入樣式的標題。此標題將顯示在下拉選單中。接下來，您需要選擇是內聯的，塊的還是選擇元素。

之後新增一個 CSS 類，然後新增您的 CSS 規則，如下面的螢幕截圖所示。

一旦新增了 CSS 樣式，只需點選 “儲存所有設定” 按鈕儲存更改。

您現在可以編輯現有的帖子或建立一個新的帖子。您會注意到第二行 WordPress 視覺編輯器中的格式下拉選單。

只需在編輯器中選擇一些文字，然後從 “格式” 下拉選單中選擇自定義樣式即可應用。

您現在可以預覽您的帖子，看看您的自定義樣式是否正確應用。

方法 2：手動新增自定義樣式到 WordPress 視覺化編輯器

此方法需要您手動向 WordPress 檔案新增程式碼。如果這是您第一次向 WordPress 新增程式碼，那麼請參閱我們的指南，將 Web 中的程式碼段新增到 WordPress 中。

步驟 1：在 WordPress 視覺化編輯器中新增自定義樣式下拉選單

首先，我們將在 WordPress 視覺化編輯器中新增一個格式下拉選單。這個下拉選單將允許我們選擇並應用我們的自定義樣式。

您需要將以下程式碼新增到主題的 functions.php 檔案或特定於站點的外掛中。

function wpb_mce_buttons_2($buttons) { 	array_unshift($buttons, 'styleselect'); 	return $buttons; } add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

步驟 2：新增選擇選項以下拉選單

現在，您需要將選項新增到剛建立的下拉選單中。然後，您可以從 “格式” 下拉選單中選擇並應用這些選項。

為了本教程，我們新增了三種自定義樣式來建立內容塊和按鈕。

您將需要將以下程式碼新增到主題的 functions.php 檔案或特定於站點的外掛中。

/* * Callback function to filter the MCE settings */  function my_mce_before_init_insert_formats( $init_array ) {    // Define the style_formats array  	$style_formats = array(   /* * Each array child is a format with it's own settings * Notice that each array has title, block, classes, and wrapper arguments * Title is the label which will be visible in Formats menu * Block defines whether it is a span, div, selector, or inline style * Classes allows you to define CSS classes * Wrapper whether or not to add a new block-level element around any selected elements */ 		array(   			'title' => 'Content Block',   			'block' => 'span',   			'classes' => 'content-block', 			'wrapper' => true, 			 		),   		array(   			'title' => 'Blue Button',   			'block' => 'span',   			'classes' => 'blue-button', 			'wrapper' => true, 		), 		array(   			'title' => 'Red Button',   			'block' => 'span',   			'classes' => 'red-button', 			'wrapper' => true, 		), 	);   	// Insert the array, JSON ENCODED, into 'style_formats' 	$init_array['style_formats'] = json_encode( $style_formats );   	 	return $init_array;      }  // Attach callback to 'tiny_mce_before_init'  add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

您現在可以在 WordPress 中新增新文章，然後單擊可視編輯器中的 “格式” 下拉選單。您會注意到，您的自定義樣式現在在格式下可見。

但是，現在選擇它們在後置編輯器中沒有任何區別。

步驟 3：新增 CSS 樣式

現在最後一步是為自定義樣式新增 CSS 樣式規則。

您將需要將此 CSS 新增到您的主題或子主題的 style.css 和 editor-style.css 檔案中。

.content-block {      border:1px solid #eee;      padding:3px;     background:#ccc;     max-width:250px;     float:right;      text-align:center; } .content-block:after {      clear:both; }  .blue-button {  	background-color:#33bdef; 	-moz-border-radius:6px; 	-webkit-border-radius:6px; 	border-radius:6px; 	border:1px solid #057fd0; 	display:inline-block; 	cursor:pointer; 	color:#ffffff; 	padding:6px 24px; 	text-decoration:none; }  .red-button { 	background-color:#bc3315; 	-moz-border-radius:6px; 	-webkit-border-radius:6px; 	border-radius:6px; 	border:1px solid #942911; 	display:inline-block; 	cursor:pointer; 	color:#ffffff; 	padding:6px 24px; 	text-decoration:none; }

編輯器樣式表在視覺化編輯器中控制您的內容的外觀。檢查你的主題的文件，找出這個檔案的位置。

如果您的主題沒有編輯器樣式表檔案，那麼您可以隨時建立一個。只需建立一個新的 CSS 檔案並命名 custom-editor-style.css 。

您需要將該檔案上傳到主題的根目錄，然後將該程式碼新增到主題的 functions.php 檔案中。

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

就這樣。您已經將自定義樣式成功新增到 WordPress 視覺化編輯器中。隨意新增您自己的元素和樣式的程式碼。