如何解決 WordPress 內建編輯器自動轉換HTML標籤或刪除自定義的HTML標籤

梅干 2021/06/02 1 分鐘閱讀

　　雖然WordPress已將內建的編輯器更新為古登堡，但對於不少使用WordPress的老手，還是習慣原來的編輯器，因此每當WordPress安裝完畢後，都會必裝傳統編輯器的外掛，且從這隻外掛的啟用數來看，相當的驚人已有五百萬以上的人安裝並啟用，可見舊版的編輯器還是深受大家的喜歡，而舊版的編輯器，則是使用TinyMCE，且WordPress編輯器中，最吸引梅干一點的是，當在預覽模式，選取的文字，切換到文字模式時，那文字一直被選取著，當切到文字版模式，也方便於修改。

但卻有一個最大問題就是，每當從文字模式切換回預覽模式時，當裡面有使用比較舊一點的HTML標籤，或是自定義的標籤就會被轉換或刪除，因此梅干一旦切換到文字模式進行編輯時，當編輯完畢，也不會再切回預覽模式，而翻遍了所有的WordPress文件，一直找不到解決辦法，因此梅干今天就花了點時間，研究了一下，終於解決自動轉碼與刪除自定義標籤的方法啦！因此若WordPress這個問題也困擾著你的朋友，現在也一塊來看看，如何解決這問題吧！

TinyMCE官方文件

連結網址：https://www.tiny.cloud/docs/configure/content-filtering/#element_format

Step1
當今天在文字模式，編輯了一些原始碼後，切換回預覽模式，再切回文字時，就會發現除了標籤被自動轉換外，自定義的標籤也會被刪除。梅問題-如何解決 WordPress 內建編輯器自動轉換HTML標籤或刪除自定義的HTML標籤

Step2
而解決方法很簡單，進入編輯佈景主題，再到function.php後，加入下的語法。

function change_mce_options( $init ) {
$init['convert_fonts_to_spans'] = false; //不要將font標籤轉換成span
$init['extended_valid_elements'] = 'product[id]';//自定義標籤中的屬性
$init['custom_elements'] = 'product';//自定義的標籤
return $init;
}
add_filter('tiny_mce_before_init', 'change_mce_options');