การสอน WordPress: วิธีสร้างไซต์ WP Scrolling Infinite
แน่นอนคุณทำงานอย่างหนักเพื่อปรับปรุงการใช้งานไซต์ของคุณเพื่อให้ผู้ใช้ของคุณมีความสุขและมีแนวโน้มที่จะกลับมาบ่อยๆใช่ไหม? ดีหนึ่งในการปรับปรุงที่คุณสามารถใช้เป็นเทคนิคการเลื่อนอนันต์ เป็นพื้นฐานเดียวกับสิ่งที่เรามีที่ Twitter หรือ Facebook ซึ่งเนื้อหาขั้นพื้นฐานจะแสดงในตอนแรกและมีการเพิ่มเนื้อหามากขึ้นขณะที่คุณเลื่อนลง การปรับปรุงประสิทธิภาพไซต์ของคุณดีขึ้น (ลดเวลาในการโหลด) และปรับปรุงประสบการณ์ของผู้ใช้ (เนื่องจากไม่จำเป็นต้องโหลดรายการใด ๆ เช่นการคลิกที่ปุ่ม)
ที่นี่เราจะดูว่าทำไมและใช้อย่างไรในไซต์ของคุณเอง
ตัวอย่าง OS Infinite Scrolling site
เป็นเรื่องที่ดีเสมอที่จะตรวจสอบสิ่งที่ชายร่างใหญ่กำลังทำอยู่ที่นั่นและเอฟเฟ็กต์แบบนี้ (หลายครั้งที่ไม่สามารถสังเกตเห็นได้) ถูกใช้โดยไซต์และแอพขนาดใหญ่มากมายเช่น Facebook (ฟีดสด), Twitter, Pinterest, Feedly
Infinite Scroll - สิ่งที่ควรทำและสิ่งที่ไม่ควรทำ
เทคนิคนี้จะนำลิงก์การจัดวางตำแหน่งตามปกติของเว็บไซต์ของคุณ ("โพสต์ที่เก่ากว่า" หรือหน้าลำดับเลขที่คุณมีหลังจากโพสต์ของคุณ) "โปร" ใหญ่ของเทคนิคนี้คือเวลาในการโหลดเนื่องจากมีการโหลดรายการน้อยลงในตอนแรกคุณสามารถมีไซต์ที่ทำงานได้เร็วขึ้นและเนื่องจากมีการเพิ่มรายการเพิ่มเติมโดยไม่ต้องโหลดหน้าใหม่ผู้ใช้จึงสามารถเลื่อนลงมาสำหรับ "หน้า" 10 ของโพสต์ได้โดยไม่ต้องแม้แต่ สังเกตเห็นอยู่อีกต่อไปในเว็บไซต์ของคุณ
สามารถใช้งานได้ในไซต์ส่วนใหญ่ แต่เหมาะสำหรับบล็อกหรือไซต์ที่เหมือนพอร์ตโฟลิโอซึ่งคุณมีเนื้อหาและภาพมากมายและไม่ต้องการครอบงำผู้ใช้ที่มีเนื้อหาจำนวนมาก
คู่มือนี้ไม่จำเป็นต้องมีความสามารถในการเขียนโปรแกรมและแน่นอนว่าคุณจะต้องเรียนรู้วิธีการปรับแต่งธีม WordPress ของคุณเล็กน้อย
สินทรัพย์
เราจะใช้ ปลั๊กอิน JS ของ Paul Irish. ดาวน์โหลดและติดตั้งในโฟลเดอร์ js ของธีม เราจะใช้ Twenty Twelve สำหรับการเรียนรู้ที่แนะนำ แต่อย่าลังเลที่จะใช้ในธีมใด ๆ (และโพสต์คำถามหากยังไม่ได้ผลสำหรับคุณ)
นอกจากนี้คุณจะต้องมีภาพ GIF ที่ดีสำหรับข้อความ "กำลังโหลด" ของคุณ คุณสามารถพบพวกมันมากมายที่นั่น แต่ไฟล์ AjaxLoad ไซต์มีเครื่องมือที่น่าสนใจอย่างมากเพื่อช่วยให้คุณมีสไตล์ที่กำหนดไว้ล่วงหน้าและคุณสามารถเลือกสีที่ตรงกับโทนสีของคุณได้ดียิ่งขึ้น
เมื่อคุณมีสคริปต์และภาพ gif ที่ดีภายใต้ Wp-content / themes / twentytwelve / js แล้วเราสามารถเริ่มต้นได้!
โค้ด PHP
ตกลงไม่ต้องกลัวเราจะให้ตัวอย่างและวางสำเนา แต่นี่คือสิ่งที่เราต้องทำเพื่อให้มันทำงาน:
- สร้างฟังก์ชันที่จะโหลดและลงทะเบียนปลั๊กอินการเลื่อนแบบไม่มีที่สิ้นสุดภายในซึ่งจะป้องกันไม่ให้ WordPress โหลดไฟล์สองครั้งและหยุดทำงานของชุดรูปแบบ
- โหลดสคริปต์เฉพาะเมื่อคุณมีเพจที่ไม่ใช่โพสต์เดียว - เฉพาะเพจที่คุณมีโพสต์มากกว่า 1 โพสต์เท่านั้นที่จะต้องโหลดไอเท็มเพิ่มเติม
ไฟล์ functions.php เป็นหัวใจของธีม ฟังก์ชันการทำงานทั้งหมดมักมีหรือเรียกว่ามีจากไฟล์อื่น ๆ ดังนั้นเราจึงสามารถเพิ่มโค้ดนี้ลงในไฟล์ฟังก์ชันของคุณเพื่อเพิ่มการสนับสนุนการเลื่อนแบบอนันต์ (เพิ่มในส่วนท้ายของไฟล์):
/* This is the inifinite scrolling setting, you can modify this at your will */ var inf_scrolling = { /* img: is the loading image path, add a nice gif loading icon there msgText: the loading message finishedMsg: the finished loading message */ loading:{ img: "/images/ajax-loading.gif", msgText: "Loading next posts....", finishedMsg: "Posts loaded!!", }, /*Next item is set nextSelector. NextSelector is the css class of page navigation. In our case is #nav-below .nav-previous a */ "nextSelector":"#nav-below .nav-previous a", //navSelector is a css id of page navigation "navSelector":"#nav-below", //itemSelector is the div where post is displayed "itemSelector":"article", //contentSelector is the div where page content (posts) is displayed "contentSelector":"#content" }; /* Last thing to do is configure contentSelector to infinite scroll, with a function jquery from infinite-scroll.min.js */ jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
แนวทางทางเลือก - การโหลดหน้าเว็บและประเภทโพสต์ที่กำหนดเอง
รหัสก่อนหน้านี้จะโหลดบทความทั้งหมดของคุณ แต่ถ้าคุณต้องการแสดงหน้าเว็บหรือประเภทโพสต์แบบกำหนดเอง (เช่นรายการพอร์ตเล็ตถ้าธีมคุณสนับสนุน) ดีเราสามารถปรับเปลี่ยนรหัสเล็กน้อยและได้รับมันทำงานยัง
การปรับเปลี่ยนเฉพาะที่จำเป็นคือในดัชนีหมวดหมู่ของคุณหรือไฟล์อื่น ๆ ที่จะโหลดรายการคุณจะแทนที่ลูปปัจจุบันของคุณด้วยรหัสอื่น คุณสามารถระบุลูปของคุณโดยใช้รหัสนี้:
while (has_posts ()):
ดังนั้นเมื่อคุณพบแล้วคุณสามารถใช้รหัสมายากลนี้:
'เพจ', // เฉพาะเพจ); query_posts ($ args); // โหลดโพสต์ if (have_posts ()):?>
สรุป
นี่เป็นเพียงบทความ "ร้อนขึ้น" เท่านั้น มีหลายอย่างที่คุณสามารถทำได้ด้วยวิธีการแบบนี้ ตัวอย่างเช่นคุณสามารถโหลดผลิตภัณฑ์ในสโตร์ของคุณ (ใช้ WooCommerce ได้) ในรูปแบบสไลด์ของผู้ใช้หรือเพิ่มโค้ด JS และ CSS เพิ่มเติมเพื่อสร้างและโหลดตัวโหลดที่คล้ายคลึงกันสำหรับการโพสต์รูปภาพ
คุณคิดอย่างไรเกี่ยวกับเทคนิคนี้? คุณชอบมันไหม? คุณจะใช้หรือไม่? แบ่งปันความคิดของคุณโดยใช้ส่วนความคิดเห็น!