1. 首頁
  2. »
  3. 網站架設
  4. »
  5. WordPress
  6. »
  7. 如何解決 WordPress 內建編輯器自動轉換HTML標籤或刪除自定義的HTML標籤

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

2021/06/02

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

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


TinyMCE官方文件
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');
梅問題-如何解決 WordPress 內建編輯器自動轉換HTML標籤或刪除自定義的HTML標籤
Step3
可設定的排除屬性,可到官網中的文件中查看。
梅問題-如何解決 WordPress 內建編輯器自動轉換HTML標籤或刪除自定義的HTML標籤
Step4
這時再試一下次,當使用了font標籤,與自定義的標籤,即便切到預覽,再切回文字模式,裡面的原始碼,依舊就不會被修改與刪除啦!因此有這困擾的朋友,不妨可試試看囉!
梅問題-如何解決 WordPress 內建編輯器自動轉換HTML標籤或刪除自定義的HTML標籤