WordPress Animate css – 如何製作文字與圖片動態效果
WordPress Animate css
在 WordPress 裡使用 CSS 式樣來做動態效果，一直是 max 很喜歡的一種讓版面活潑一點的方式。今天就要來跟大家分享，如何的在文章裡面讓文字或是圖片有動態展示的效果，不需要外掛程式，只需要在編輯文章時直接套用式樣檔的動態類型，這個動態的效果就會自然呈現。可以很輕鬆的幫助版面作變化，吸引閱讀者閱讀版面內容的興趣，有興趣的朋友可以參考一下。
下載 Animate.css
- 請前往 Animate.css 網站下載 Animate.css 式樣檔，並且上傳到子佈景主題資料夾下。
- 同時在式樣作者網站就可以看到式樣各種的動態效果，點選左側的效果名稱，就可以看見上方字體即時的動態效果展示，有超過70種的效果可以選擇。
- 有興趣想要對 Animate.css 做更進一步的瞭解，可以前往作者專案頁面 https://github.com/daneden/animate.css也以很詳細的操作說明。
Animate.css
WordPress 佈景主題載入 Animate.css
將下載回來的 Animate.css 式樣檔置入佈景主題中有很多方式，以下逐一做說明。
-
- 第一個方法是開啟子佈景主題的 header.php檔案，在 </head＞之前填入以下語法：
1<link rel="stylesheet" href="http://yourdomain.com/wp-content/themes/your-child-theme/animate.css"> - 或是直接採取 CDNJS上的式樣檔：
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> - 或是第二個方法，開啟子佈景主題的式樣檔（style.css），置入以下語法：直接使用 CDNJS上的檔案。
1@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css';
或是使用下載回來的 animate.css檔。
1@import 'http://yourdomain.com/wp-content/themes/your-child-theme/animate.css';
- 第一個方法是開啟子佈景主題的 header.php檔案，在 </head＞之前填入以下語法：
- 或是第三個方法，開啟子佈景主題的 functions.php 檔案，置入以下語法：
123456function wp_enqueue_custom_stylesheets() {if ( ! is_admin() ) {wp_enqueue_style( 'mytheme-custom', get_stylesheet_directory_uri() . '/animate.css' );}}add_action( 'wp_enqueue_scripts', 'wp_enqueue_custom_stylesheets', 11 ); - 以上三種在佈景主題載入式樣檔的方式，只需要選擇一種使用即可，可以參考一下自己的主機測試效能，找到最適合的方法來使用。
文字或是圖片使用動態式樣
- 接下來開始對需要的文字或是圖片作動態式樣設計。
- 在文章編輯時如果要使用這個動態式樣的效果，請將編輯模式切換到文字，接著對想要呈現效果的文字下式樣的設定，以下範例是製作動態文字這四個字的 bounce效果，動態效果總共有70餘種效果可以挑選使用。
1<h1 class="animated infinite bounce">動態效果</h1> - animated：定義式樣，infinite：一直重複動作，bounce：效果，其他效果 CLASS設計可以參閱作者網站。
結論
如何的好好利用網路資源，打造一個優質網站，是每一個網站管理者或是設計者持續努力不間斷的課題。很高興的在 WordPress 裡可以很輕鬆的將這些資源整合在一起，即使是不會程式設計的朋友，也可以很容易的操作出一些很專頁的效果，期許大家可以發揮創意善用資源，持續打造出一個又一個優質又符合使用者經驗的網站。
