การสอน 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 เพิ่มเติมเพื่อสร้างและโหลดตัวโหลดที่คล้ายคลึงกันสำหรับการโพสต์รูปภาพ

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