如何將自定義樣式添加到WordPress可視編輯器


您是否要在WordPress視覺編輯器中添加自定義樣式? 添加自定義樣式使您無需切換到文本編輯器即可快速應用格式。 在本文中,我們將向您展示如何向WordPress可視編輯器添加自定義樣式。

在WordPress視覺編輯器中添加自定義樣式

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

為什麼以及何時需要WordPress Visual Editor的自定義樣式

默認情況下,WordPress可視編輯器帶有一些基本的格式和样式選項。 但是,有時您可能需要自己的自定義樣式來添加CSS按鈕,內容塊,標語等。

您始終可以從視覺編輯器切換到文本編輯器,並添加自定義HTML和CSS。 但是,如果您定期使用某些樣式,則最好將它們添加到可視化編輯器中,以便您可以輕鬆地重用它們。

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

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

話雖如此,讓我們看一下如何在WordPress可視編輯器中添加自定義樣式。

方法1:使用插件在Visual Editor中添加自定義樣式

您需要做的第一件事是安裝並激活TinyMCE自定義樣式插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要訪問 設置»TinyMCE自定義樣式 頁面以配置插件設置。

TinyMCE自定義樣式設置

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

之後,您需要單擊“保存所有設置”按鈕來存儲您的更改。

現在,您可以添加自定義樣式。 您需要向下滾動到樣式部分,然後單擊添加新樣式按鈕。

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

之後,添加一個CSS類,然後添加您的CSS規則,如下面的屏幕快照所示。

添加新的自定義樣式

添加CSS樣式後,只需單擊“保存所有設置”按鈕以存儲您的更改。

現在,您可以編輯現有帖子或創建新帖子。 您會在WordPress可視編輯器的第二行中看到格式下拉菜單。

TinyMCE中的自定義樣式菜單

只需在編輯器中選擇一些文本,然後從“格式”下拉菜單中選擇您的自定義樣式即可應用它。

現在,您可以預覽您的帖子,以查看您的自定義樣式已正確應用。

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

此方法要求您手動將代碼添加到WordPress文件中。 如果這是您第一次向WordPress添加代碼,請參閱我們的指南,以將網絡中的代碼片段添加到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;
}

WordPress帖子編輯器中的自定義樣式

編輯器樣式表控制視覺編輯器中內容的外觀。 檢查主題的文檔以找出此文件的位置。

如果您的主題沒有編輯器樣式表文件,則始終可以創建一個。 只需創建一個新的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可視編輯器中。 通過添加自己的元素和样式來隨意使用代碼。

我們希望本文能幫助您學習如何向WordPress可視編輯器添加自定義樣式。 您可能還想查看有關如何向WordPress小部件添加自定義樣式的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。