直接在文章編輯器寫CSS,JS的方法

方法

  1. 文章編輯→點選編輯視窗右上角的「文字」標籤
  2. 找到要套用CSS/JS目標元素HTML碼,上方鍵入<style>標籤,將CSS碼貼上去,並且刪除所有空白行與註解
  3. 在目標元素HTML碼下方鍵入<script>標籤,將原生JS碼貼上去,並且刪除所有空白行與註解

jQuery解法

上述方法可以成功執行CSS/原生JS碼的情況,但JS使用到jQuery的情況下,就要用特殊解法

 

wordpress本身就會引jQuery,所以撰寫時可以省去加入src

 

//不用寫這個
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 

WordPress的文字編輯過濾器會預設編成文章<p>,所以直接使用jQuery在網頁顯示上會變成這種情況

 

<p>
 <script>
 //jQuery程式碼
 </script>
</p>
解決:打開佈景主題的編輯器Editor,在functions.php貼上這一段碼,取消文字編輯過濾器,然後我們就可以得到正常的 script tag

 

/*Toggle wpautop*/
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
如果佈景主題只找到style.css,表示此佈景為子佈景,修改母佈景的function.php後再套用回原來的子佈景就可以執行!

 

接下來,回到文章,在jQuery外面包一層ready(),變成這樣

 

<script>
jQuery(document).ready(function( $ ){
//jQuery程式碼
});
</script>
刪除 jQuery 程式碼所有空白行,註解,並且確保程式碼簡潔
大功告成!

 

沒有使用外掛寫jQuery的範例

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *