วิธีเพิ่มแอนิเมชั่นการโหลดหน้า (Preloader) ใน WordPress

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

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

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

แอนิเมชันตัวโหลดล่วงหน้าคืออะไร

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

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

ฉันควรใช้ตัวโหลดล่วงหน้าเมื่อใด

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

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

2 ตัวเลือกสำหรับการเพิ่มภาพเคลื่อนไหวในการโหลดหน้าไปยัง WordPress

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

ตัวเลือกที่ 1: เพิ่มแอนิเมชันของตัวโหลดล่วงหน้าโดยใช้ปลั๊กอิน

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

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

ขั้นตอนที่ 1: ดาวน์โหลด WP Smart Preloader

คุณสามารถดาวน์โหลดปลั๊กอิน WP Smart Preloader ผ่าน WordPress Plugin Directory จากนั้นคุณสามารถอัปโหลดไฟล์ .zip ไปยังไซต์ WordPress ของคุณได้โดยไปที่ Plugins > Add New > Upload Plugin ในแดชบอร์ดผู้ดูแลระบบ:

อีกทางเลือกหนึ่งคือการค้นหาปลั๊กอินผ่านแถบค้นหาบนหน้าจอ ปลั๊กอิน > เพิ่มใหม่ :

ไม่ว่าจะด้วยวิธีใด เมื่อติดตั้งปลั๊กอินแล้ว ให้คลิกที่ปุ่ม เปิดใช้งาน จากนั้นคุณสามารถค้นหาตัวเลือกได้ใน การตั้งค่า > WP Smart Preloader

ขั้นตอนที่ 2: เลือกสไตล์ของคุณ

ในหน้า การตั้งค่า WP Smart Preloader สิ่งแรกที่ต้องทำคือเลือกสไตล์สำหรับตัวโหลดล่วงหน้า ในส่วน Select Preloader จะมีเมนูแบบเลื่อนลงให้คุณเลือกจากตัวเลือกสไตล์หกแบบ รวมถึงตัวเลือกสำหรับแอนิเมชั่นแบบกำหนดเอง:

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

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

หากคุณปล่อยช่องเหล่านี้ว่างไว้ ค่าเริ่มต้นจะตั้งไว้ที่ 1,500 มิลลิวินาที (1.5 วินาที) และ 2,500 มิลลิวินาที (2.5 วินาที) ตามลำดับ เมื่อเสร็จแล้ว ให้คลิกที่ปุ่ม บันทึกการเปลี่ยนแปลง

ขั้นตอนที่ 3: ดูตัวอย่างภาพเคลื่อนไหวตัวโหลดล่วงหน้าของคุณ

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

ตัวเลือกที่ 2: เพิ่มแอนิเมชันตัวโหลดล่วงหน้าด้วยตนเอง

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

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

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

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

ขั้นตอนที่ 2: พัฒนาหรือดาวน์โหลดแอนิเมชั่นของคุณ

ในการพัฒนาแอนิเมชั่นของคุณ คุณสามารถใช้เครื่องมือเช่น Photoshop เพื่อสร้าง GIF หรือแอนิเมชั่นพรีโหลดเดอร์แบบหมุนได้ คุณยังสามารถดูแหล่งข้อมูลของเราเกี่ยวกับการสร้างแอนิเมชั่น WordPress โดยใช้ CSS

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

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

แอนิเมชันตัวโหลดล่วงหน้าฟรีส่วนใหญ่จะมีลิงก์ต้นฉบับ ซึ่งคุณจะพบทั้ง HTML และ CSS:

โปรดทราบว่าคุณยังสามารถใช้ซอร์สโค้ด CSS จากแอนิเมชันตัวโหลดล่วงหน้า แล้วปรับแต่งในภายหลังตามที่คุณต้องการ

ขั้นตอนที่ 3: สร้างธีมลูก

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

ขั้นตอนที่ 4: เพิ่มโค้ด HTML ให้กับไฟล์ header.php ของธีมของคุณ

ขั้นตอนต่อไปคือการค้นหาไฟล์ header.php สำหรับธีม WordPress ของคุณ คุณสามารถทำได้ผ่านหน้าจอ WordPress Theme Editor :

คุณยังสามารถแก้ไขไฟล์โดยใช้ไคลเอนต์ FTP เช่น FileZilla ไฟล์จะอยู่ในโฟลเดอร์ wp-content > themes ในไดเร็กทอรีรากของไซต์ของคุณ

เมื่อคุณค้นหาและเปิดไฟล์แล้ว ให้ใส่โค้ด HTML ต่อไปนี้ใต้แท็ก body:

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

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

ขั้นตอนที่ 5: เพิ่มโค้ด CSS ลงในสไตล์ชีตของคุณ

ถึงเวลาเพิ่ม CSS เพื่อจัดรูปแบบแอนิเมชันของคุณแล้ว ค้นหาสไตล์ชีต CSS ( style.css ) สำหรับธีม WordPress ของคุณ จากนั้นคัดลอกและวางซอร์สโค้ด CSS สำหรับภาพเคลื่อนไหวของคุณ ในกรณีของเรา เราจะเพิ่มสิ่งต่อไปนี้:

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

ก่อนที่คุณจะบันทึกการเปลี่ยนแปลง ให้ลบส่วนนี้: “margin: 100px auto;” ให้คัดลอกและวางสิ่งต่อไปนี้แทน:

 position: absolute; top: 48%; left: 48%;

จากนั้นคุณสามารถบันทึกไฟล์

ขั้นตอนที่ 6: เพิ่มรหัส jQuey เพื่อให้แอนิเมชั่นทำงาน

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

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

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

ค้นหาเคล็ดลับและคำแนะนำเพิ่มเติมจาก WP Engine

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

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