การเพิ่ม CSS Animations ให้กับ WordPress

เผยแพร่แล้ว: 2022-07-11

แอนิเมชั่นสามารถเป็นคุณลักษณะที่น่าสนใจและน่าสนใจสำหรับหน้าเว็บของคุณ อย่างไรก็ตาม การสร้างแอนิเมชั่นด้วย Flash หรือ JavaScript จะกินทรัพยากรจำนวนมากในไซต์ของคุณ

โชคดีที่คุณสามารถเพิ่มแอนิเมชั่นไปยังเว็บไซต์ WordPress ของคุณด้วย Cascading Style Sheets (CSS) แทน ภาษาเขียนโค้ดนี้ทำให้คุณสามารถรวมแอนิเมชั่นบนไซต์ของคุณได้ไม่จำกัด แต่ยังคงเข้าถึงได้ง่ายและเรียนรู้ได้ง่าย

ในบทความนี้ เราจะพูดถึงวิธีการทำงานของแอนิเมชั่น CSS และวิธีเพิ่มคุณสมบัติแอนิเมชั่น CSS ให้กับเว็บไซต์ของคุณทั้งแบบมีและไม่มีปลั๊กอิน ไปกันเถอะ!

สารบัญ

1. ภาพเคลื่อนไหว CSS ทำงานอย่างไร (และทำไมคุณควรใช้มัน)

2. การเพิ่ม CSS แอนิเมชั่นด้วยปลั๊กอิน

2.1. ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน CSS Animation Plugin

2.2. ขั้นตอนที่ 2: ออกแบบแอนิเมชั่นของคุณ

2.3. ขั้นตอนที่ 3: ปรับแต่งการหน่วงเวลาและความเร็ว

2.4. ขั้นตอนที่ 4: บันทึกและดูตัวอย่างแอนิเมชั่นของคุณ

3. การเพิ่ม CSS Animation โดยไม่ต้องใช้ปลั๊กอิน

3.1. ขั้นตอนที่ 1: ทำความเข้าใจเกี่ยวกับคุณสมบัติ CSS ที่เกี่ยวข้อง

3.2. ขั้นตอนที่ 2: สร้างไฟล์ animate.css ของคุณ

3.3. ขั้นตอนที่ 3: อัปโหลดไฟล์ animate.css ไปยังเว็บไซต์ของคุณ

3.4. ขั้นตอนที่ 4: เรียก Animate Stylesheet ผ่าน functions.php

3.5. ขั้นตอนที่ 5: ใช้แอนิเมชั่นโดยใช้คลาส CSS

4. ทำให้เว็บไซต์ของคุณดูดีด้วย WP Engine

ภาพเคลื่อนไหว CSS ทำงานอย่างไร (และทำไมคุณควรใช้มัน)

CSS3 เปิดโอกาสให้ผู้ใช้สร้างแอนิเมชั่นโดยการเปลี่ยนรูปแบบขององค์ประกอบ (เช่น รูปภาพหรือปุ่ม) เมื่อเวลาผ่านไป คุณสามารถแก้ไขคุณสมบัติ CSS ขององค์ประกอบได้มากเท่าที่คุณต้องการ กี่ครั้งก็ได้ตามที่คุณต้องการ

แอนิเมชั่น CSS ต่างจากแอนิเมชั่น Flash หรือ Javascript ตรงที่หลีกเลี่ยงปัญหาความเข้ากันได้ของเบราว์เซอร์และการเข้ารหัสที่ซับซ้อน วิธีนี้ทำให้คุณสามารถดึงความสนใจไปที่ฟีเจอร์ที่สำคัญได้โดยไม่มีผลข้างเคียง เช่น ประสิทธิภาพการทำงานที่ลดลง

การเพิ่มภาพเคลื่อนไหว CSS ด้วยปลั๊กอิน

หากคุณไม่มั่นใจในทักษะการเขียนโค้ดของคุณ เราพร้อมช่วยคุณแล้ว คุณสามารถสร้างภาพเคลื่อนไหว CSS ได้อย่างง่ายดายด้วยปลั๊กอินแทน

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน CSS Animation Plugin

ในการเริ่มต้น คุณจะต้องติดตั้งปลั๊กอินภาพเคลื่อนไหว CSS เรากำลังใช้ Blocks Animation: CSS Animations สำหรับ Gutenberg Blocks ซึ่งเป็นเครื่องมือที่ค่อนข้างใหม่ที่สร้างขึ้นสำหรับ Block Editor โดยเฉพาะ

คุณสามารถหาปลั๊กอินนี้ได้โดยไปที่ Plugins > Add New ในแดชบอร์ด WordPress ของคุณ เมื่อคุณพบแล้ว ให้คลิกที่ Install Now แล้วคลิก Activate :

หลังจากเปิดใช้งานเสร็จแล้ว ให้ไปที่โพสต์หรือหน้าที่คุณต้องการรวมแอนิเมชั่นอย่างง่ายของคุณ

ขั้นตอนที่ 2: ออกแบบแอนิเมชั่นของคุณ

ถัดไป คลิกองค์ประกอบที่คุณต้องการทำให้เคลื่อนไหว ในแท็บ " บล็อก " ของแถบด้านข้าง ให้มองหาส่วนที่มีป้ายกำกับว่า " แอนิเมชัน " ซึ่งเพิ่มเข้ามาเมื่อเราเปิดใช้งานปลั๊กอินในขั้นตอน ที่ 1 ที่นี่ คุณจะเห็นเมนูแบบเลื่อนลงที่แสดงเอฟเฟกต์ต่างๆ มากมาย:

คุณสามารถเล่นกับตัวเลือกแอนิเมชั่นได้มากเท่าที่คุณต้องการเพื่อค้นหาแอนิเมชั่นที่เหมาะกับเนื้อหาของคุณ

ขั้นตอนที่ 3: ปรับแต่งการหน่วงเวลาและความเร็ว

ปลั๊กอิน Blocks Animation ยังมาพร้อมกับฟังก์ชั่นจับเวลาเพื่อปรับแต่งการ หน่วงเวลา และ ความเร็ว ของแอนิเมชั่นของคุณ:

การตั้งค่าแรกจากทั้งสองนี้จะเลื่อนการเริ่มต้นของแอนิเมชัน ซึ่งอาจช่วยดึงความสนใจไปที่องค์ประกอบของคุณหลังจากที่โหลดหน้าเว็บแล้ว หรือทำให้คุณสามารถใช้แอนิเมชั่นร่วมกันได้ ตามที่เราจะแสดงให้เห็นในไม่ช้า คุณสามารถตั้งค่าคุณสมบัติการหน่วงเวลาของภาพเคลื่อนไหวได้นานถึงห้าวินาที

เมื่อใช้เมนูแบบเลื่อนลงความเร็ว คุณสามารถทำให้แอนิเมชั่นของคุณ ช้าลง ช้าลง เร็วขึ้น หรือ เร็วขึ้น แอนิเมชั่นที่ช้ากว่านั้นอาจจะละเอียดกว่าและสั่นน้อยกว่าสำหรับผู้เยี่ยมชม ในขณะที่แอนิเมชั่นที่เร็วขึ้นจะช่วยดึงดูดความสนใจของพวกเขาได้มากกว่า

ขั้นตอนที่ 4: บันทึกและดูตัวอย่างแอนิเมชั่นของคุณ

เราแนะนำให้บันทึกโพสต์หรือหน้าของคุณเป็นฉบับร่างและดูตัวอย่างองค์ประกอบที่เคลื่อนไหวได้ก่อนที่จะเผยแพร่ อย่าลืมบันทึกคุณสมบัติชื่อแอนิเมชั่นด้วย หากคุณกำลังทำงานกับแอนิเมชั่น CSS หลายตัวในหน้าเดียว แม้ว่าแอนิเมชันจะมีประโยชน์มาก แต่ก็มีโอกาสที่จะทำให้เสียสมาธิและทำให้หน้าเว็บของคุณดูรก

การดูตัวอย่างหน้าของคุณและทำให้แอนิเมชั่นของคุณค่อนข้างเรียบง่ายจะป้องกันผลลัพธ์ที่ไม่พึงประสงค์เหล่านี้ ด้านล่างนี้ คุณสามารถดูตัวอย่างภาพเคลื่อนไหว CSS ที่เสร็จแล้วของเรา ซึ่งจับคู่ภาพเคลื่อนไหวกับปุ่มที่เรากำหนดสไตล์ในขั้นตอนก่อนหน้านี้:

ในกรณีที่คุณพบว่าแอนิเมชั่นของคุณไม่เข้ากับเนื้อหาที่เหลือของคุณ หรือมีเอฟเฟกต์ที่คุณต้องการ คุณสามารถกลับไปที่ Block Editor และปรับแต่งได้ นั่นคือความสวยงามของการใช้ปลั๊กอินภาพเคลื่อนไหว CSS ที่ง่ายและรวดเร็ว

การเพิ่มแอนิเมชั่น CSS โดยไม่ต้องใช้ปลั๊กอิน

หากคุณสะดวกที่จะแก้ไขไฟล์ธีมของคุณ คุณสามารถสร้างแอนิเมชั่นแบบกำหนดเองได้โดยไม่ต้องใช้ปลั๊กอิน ต้องใช้ความรู้ในการเขียนโค้ดเล็กน้อย ดังนั้นโซลูชันนี้จึงเหมาะสำหรับผู้ที่มีประสบการณ์ด้านการพัฒนา

ก่อนที่คุณจะเริ่มต้น โปรดสำรองข้อมูลไซต์ของคุณ ควรใช้ธีมลูกด้วย เพื่อให้คุณสามารถเปลี่ยนกลับเป็นไฟล์เริ่มต้นของธีมได้อย่างง่ายดายหากคุณรู้สึกว่าจำเป็น

ขั้นตอนที่ 1: ทำความเข้าใจเกี่ยวกับคุณสมบัติ CSS ที่เกี่ยวข้อง

ก่อนที่คุณจะทำการแก้ไขใดๆ จริงๆ มีคุณสมบัติสำคัญแปดประการที่ควรคำนึงถึงเมื่อสร้างภาพเคลื่อนไหว CSS:

@keyframes: ระบุรูปแบบที่จะนำไปใช้กับองค์ประกอบผ่านภาพเคลื่อนไหว
ชื่อแอนิเมชั่น: สร้างชื่อที่คุณสามารถใช้เพื่ออ้างอิงแอนิเมชั่นที่อื่นในโค้ดของคุณ
animation-duration: กำหนดระยะเวลาที่แอนิเมชั่นควรรัน
animation-delay: ระบุระยะเวลาที่ภาพเคลื่อนไหวควรรอเพื่อเริ่มต้นเมื่อโหลดหน้าเว็บแล้ว
animation-iteration-count: บันทึกจำนวนครั้งที่แอนิเมชั่นควรรัน
animations-direction: ระบุทิศทางที่แอนิเมชั่นควรรัน
animation-timing-function: กำหนดเส้นโค้งความเร็วของแอนิเมชั่น
โหมดเติมภาพเคลื่อนไหว: ระบุสไตล์สำหรับองค์ประกอบเมื่อไม่ได้เล่นภาพเคลื่อนไหว
แอนิเมชั่น: คุณสมบัติชวเลขสำหรับการเชื่อมโยงคีย์เฟรมกับองค์ประกอบ

คุณสมบัติที่สำคัญที่สุดที่ต้องทำความเข้าใจคือ 'คีย์เฟรม' คำนี้มาจากกระบวนการสร้างแอนิเมชั่นที่วาดด้วยมือ โดยที่เฟรมหลักถูกเรียกว่าคีย์เฟรม และส่วนอื่นๆ จะถูกดึงเข้ามาหรือออกจากเฟรม

ในแอนิเมชั่น CSS คีย์เฟรมจะระบุว่าเกิดอะไรขึ้นและเมื่อใด ใช้อันนี้ตัวอย่างเช่น:

 @ตัวอย่างคีย์เฟรม {
 0% {สีพื้นหลัง: สีแดง;}
 25% {สีพื้นหลัง: สีเหลือง;}
 50% {สีพื้นหลัง: สีน้ำเงิน;}
 100% {สีพื้นหลัง: สีเขียว;}
 }

คีย์เฟรมด้านบนระบุว่า 25 เปอร์เซ็นต์ของภาพเคลื่อนไหว สีพื้นหลังขององค์ประกอบที่ระบุจะเปลี่ยนจากสีแดงเป็นสีเหลือง โดยทั่วไปจะใช้เปอร์เซ็นต์เพื่อกำหนดเวลาของภาพเคลื่อนไหว อย่างไรก็ตาม จาก และ ถึง สามารถใช้แทน 0% และ 100% ตามลำดับ

ขั้นตอนที่ 2: สร้างไฟล์ animate.css ของคุณ

ในการเพิ่มภาพเคลื่อนไหว CSS คุณจะต้องสร้างไฟล์ในโปรแกรมแก้ไขข้อความที่คุณต้องการโดยใช้คุณสมบัติด้านบน ควรมีคีย์เฟรมสำหรับภาพเคลื่อนไหวที่คุณต้องการใช้ จากนั้นคุณจะผูกมันกับคลาส CSS เฉพาะเพื่อให้คุณสามารถนำไปใช้กับองค์ประกอบในเว็บไซต์ของคุณ

นี่คือตัวอย่าง ในโค้ดด้านล่าง ขั้นแรกเราจะสร้างแอนิเมชั่นคีย์เฟรม CSS โดยใช้คุณสมบัติการแปลงและการมองเห็น ซึ่งจะทำให้เราเลื่อนองค์ประกอบเข้ามาจากด้านขวาของหน้าจอได้:

 @keyframes slideInRight {
จาก {
-webkit-transform: translate3d (100%, 0, 0);
แปลง: translate3d(100%, 0, 0);
ทัศนวิสัย: มองเห็นได้;
}
ถึง {
-webkit-transform: translate3d(0, 0, 0);
แปลง: translate3d(0, 0, 0);
}
}

จากนั้นเราต้องผูกคีย์เฟรมนั้นกับคลาส CSS ในกรณีนี้ จะมีชื่อว่า slideInRight รหัสนี้จะถูกวางไว้หลังคีย์เฟรมด้านบนในไฟล์โดยตรง:

 .slideInRight {
 -webkit-ชื่อแอนิเมชั่น: slideInRight;
 ชื่อแอนิเมชั่น: slideInRight;
 }

คุณสามารถทำขั้นตอนนี้ซ้ำเพื่อสร้างแอนิเมชั่นได้มากเท่าที่คุณต้องการ จากนั้นบันทึกไฟล์เป็น animate.css หรือคุณสามารถดาวน์โหลดไฟล์ Animate.css ยอดนิยมได้ มันมีคีย์เฟรมและคลาส CSS สำหรับแอนิเมชั่นยอดนิยมหลายสิบรายการ ดังนั้นคุณจึงไม่ต้องเขียนโค้ดแอนิเมชั่นที่ซับซ้อนของคุณเอง

ขั้นตอนที่ 3: อัปโหลดไฟล์ animate.css ไปยังเว็บไซต์ของคุณ

เมื่อไฟล์ animate.css ของคุณเสร็จสมบูรณ์ คุณจะต้องอัปโหลดไปยังไดเร็กทอรีของธีมของคุณ ในการดำเนินการนี้ ให้เข้าถึงไซต์ของคุณโดยใช้ File Transfer Protocol (FTP) และไคลเอ็นต์ FTP เช่น FileZilla คุณสามารถค้นหาข้อมูลประจำตัวที่จำเป็นในบัญชีโฮสติ้งของคุณ

คุณจะต้องเข้าสู่ไดเร็กทอรี public_html ของคุณ ไปที่ wp-content > ธีม และค้นหาโฟลเดอร์สำหรับธีมที่ใช้งานอยู่ (หรือธีมย่อย):

ค้นหาไดเร็กทอรีย่อยชื่อ css หากมี ให้อัปโหลดไฟล์ animate.css ของคุณ (หรือไฟล์ animate.mini.css จาก Animate.css) ไปที่ไฟล์นั้น ในกรณีที่คุณยังไม่มีโฟลเดอร์นี้ คุณสามารถสร้างไดเร็กทอรีย่อยใหม่และตั้งชื่อตาม:

หลังจากอัปโหลดไฟล์เรียบร้อยแล้ว อย่าออกจากไคลเอนต์ FTP ของคุณทันที คุณจะต้องแก้ไขไฟล์เล็กน้อยเพื่อเข้าถึงสไตล์ชีตนี้บนไซต์ WordPress ของคุณ

ขั้นตอนที่ 4: เรียก Animate Stylesheet ผ่าน functions.php

ถัดไป ในโฟลเดอร์ของธีมที่ใช้งานอยู่ ให้ค้นหาไฟล์ functions.php ของคุณ ในตอนท้าย ให้เพิ่มส่วนย่อยของโค้ดนี้:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' );
ฟังก์ชั่น wpb_animate_styles () {
 wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'ทั้งหมด');
}

โปรดทราบว่า หากคุณอัปโหลดไฟล์ animate.min.css จาก Animate.css คุณจะต้องใช้ animate.min.css ในบรรทัดสุดท้ายแทน animate.css

ซึ่งจะทำให้ธีมของคุณสามารถเรียกสไตล์ชีตที่คุณเพิ่งอัปโหลด เพื่อให้คุณสามารถใช้คลาสในนั้นกับองค์ประกอบบนไซต์ของคุณได้ เมื่อการเปลี่ยนแปลงของคุณได้รับการบันทึกแล้ว ให้กลับไปที่แดชบอร์ด WordPress ของคุณ

ขั้นตอนที่ 5: ใช้แอนิเมชั่นโดยใช้คลาส CSS

ตอนนี้คุณสามารถนำคลาสใดก็ได้ในไฟล์ animate.css ของคุณไปใช้กับองค์ประกอบในโพสต์และเพจของคุณ หากคุณกำลังใช้ไฟล์ Animate.css คุณสามารถอ้างอิงรายการทั้งหมดที่อยู่ใน GitHub ได้

ไปที่โพสต์หรือหน้าที่มีองค์ประกอบที่คุณต้องการทำให้เคลื่อนไหว ใน Classic Editor ให้สลับไปที่ตัวแก้ไขข้อความ หากคุณกำลังใช้ตัวแก้ไขบล็อก ให้คลิกที่ไอคอนสามจุดจากแถบเครื่องมือบล็อก แล้วเลือก แก้ไขเป็น HTML :

จากนั้น เพิ่มคลาสแอนิเมชั่นและคลาสสำหรับแอนิเมชั่นของคุณลงในแท็กองค์ประกอบ:

สุดท้าย ดูตัวอย่างโพสต์หรือหน้าของคุณ แอนิเมชั่นของคุณควรใช้งานได้แล้ว:

คุณสามารถปรับกระบวนการนี้เพื่อรวมแอนิเมชั่นในไฟล์ animate.css ของคุณ

ทำให้เว็บไซต์ของคุณดูดีอยู่เสมอด้วย WP Engine

การใช้คุณสมบัติที่ดึงดูดสายตา เช่น แอนิเมชั่น สามารถดึงดูดผู้เยี่ยมชมไซต์ของคุณ และสร้างตัวตนออนไลน์แบบมืออาชีพมากขึ้น ที่ WP Engine เราภาคภูมิใจในการมอบเคล็ดลับและคำแนะนำที่ดีที่สุดสำหรับนักพัฒนา WordPress เพื่อให้เว็บไซต์ของคุณดูดีที่สุดเสมอ

เมื่อรวมกับแพลตฟอร์มโฮสติ้งชั้นนำของเรา คุณจะมีเครื่องมือทั้งหมดที่จำเป็นเพื่อสร้างความประทับใจให้ผู้ใช้ของคุณ ตรวจสอบแผนของเราวันนี้!