การสอน WordPress: วิธีสร้างไซต์ WP Scrolling Infinite

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

ที่นี่เราจะดูว่าทำไมและใช้อย่างไรในไซต์ของคุณเอง

ตัวอย่าง os เว็บไซต์การเลื่อนแบบอนันต์

เป็นเรื่องที่ดีเสมอที่จะตรวจสอบสิ่งที่ชายร่างใหญ่กำลังทำอยู่ที่นั่นและเอฟเฟ็กต์แบบนี้ (หลายครั้งที่ไม่สามารถสังเกตเห็นได้) ถูกใช้โดยไซต์และแอพขนาดใหญ่มากมายเช่น 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 เป็นหัวใจของธีม ฟังก์ชันการทำงานทั้งหมดมักมีหรือเรียกว่ามีจากไฟล์อื่น ๆ ดังนั้นเราจึงสามารถเพิ่มโค้ดนี้ลงในไฟล์ฟังก์ชันของคุณเพื่อเพิ่มการสนับสนุนการเลื่อนแบบอนันต์ (เพิ่มในส่วนท้ายของไฟล์):

<? php / ************************* เว็บการหมุนวนรายละเอียดการบุกรุก ******************* ******** / / * ฟังก์ชั่นที่จะลงทะเบียนและจัดคิวสคริปต์ scolling ของอนันต์ที่จะใช้ในชุดรูปแบบ * / ฟังก์ชั่น twentytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // ชื่อของสคริปต์ get_template_directory_uri ()) '/ js / jquery.infinitescroll.min.js' // โดยที่ไฟล์นั้นเป็นอาร์เรย์ ('jQuery') // สคริปต์นี้ต้องการสคริปต์ jquery null, // ไม่มีหมายเลขเวอร์ชันสคริปต์จริง // สคริปต์จะถูกวางไว้ที่ส่วนท้าย); if (! is_singular ()) {// เฉพาะเมื่อเรามีโพสต์ 1 มากกว่า // เราจะโหลดสคริปต์นี้ wp_enqueue_script ('infinite_scrolling'); }} // ลงทะเบียนสคริปต์ที่กำหนดเองของเรา! add_action ('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * ฟังก์ชั่นที่จะตั้งค่าการเลื่อนแบบไม่สิ้นสุดที่จะแสดงในหน้า * / function set_infinite_scrolling () {if (! is_singular ()) {// อีกครั้งเฉพาะเมื่อเรามีมากกว่าโพสต์ 1 / / เพิ่มสคริปต์ js ด้านล่าง?> <script type = "text / javascript"> / * นี่คือ การตั้งค่าการเลื่อนแบบ inifinite คุณสามารถแก้ไขสิ่งนี้ได้ตามต้องการ * / var inf_scrolling = {/ * img: เป็นเส้นทางการโหลดภาพเพิ่มไอคอนการโหลด gif ที่ดี msgText: ข้อความโหลดเสร็จสิ้นโหลด: / ข้อความโหลดเสร็จ: img: "<? echo get_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "กำลังโหลดโพสต์ถัดไป .... ", finishedMsg: "โหลดโพสต์แล้ว !!",}, / * รายการถัดไปคือ ตั้งถัดไปเลือก NextSelector เป็นคลาส css ของการนำทางหน้า ในกรณีของเราคือ # nav-bottom .nav-a ก่อนหน้า * / "nextSelector": "# nav-Below .nav-a ก่อนหน้า", // navSelector เป็น css id ของการนำทางหน้า "navSelector": "# nav-เบื้องล่าง ", // itemSelector เป็น div โดยที่มีการแสดงโพสต์" itemSelector ":" article ", // contentSelector คือ div โดยที่เนื้อหาของหน้า (โพสต์) แสดง" contentSelector ":" # content "}; / * สิ่งสุดท้ายที่ต้องทำคือกำหนดค่า contentSelector ให้กับการเลื่อนแบบไม่มีที่สิ้นสุดพร้อมด้วยฟังก์ชั่น jquery จาก infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector). infinitescroll (inf_scrolling); </script> <? }} / * เราจำเป็นต้องเพิ่มการกระทำนี้ในส่วนท้ายของหน้า 100 เป็นหมายเลขลำดับความสำคัญที่ correpond การดำเนินการในภายหลัง * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

แนวทางทางเลือก - การโหลดหน้าเว็บและประเภทโพสต์ที่กำหนดเอง

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

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

while (has_posts ()):

ดังนั้นเมื่อคุณพบแล้วคุณสามารถใช้รหัสมายากลนี้:

<div id = "content" role = "main"> <? php / * แสดงเฉพาะเพจที่ไม่มีที่สิ้นสุด! นี่คือเคล็ดลับ: คุณสามารถตั้งค่า post_type สำหรับสิ่งที่คุณต้องการได้ง่าย! บาง post_types อาจเป็น: portfolio, project, product เราสามารถเพิ่มประเภทการโพสต์ได้มากเท่าที่ต้องการโดยคั่นด้วยเครื่องหมายจุลภาคเช่น 'post', 'page', 'product' * / $ args = array (// ตั้งอาร์กิวเมนต์ 'post_type' => 'page', // Only Pages); query_posts ($ args); // โหลดข้อความถ้า (have_posts ()):?> <? php / * เริ่มลูป * /?> <? php while (have_posts ()): the_post (); // รหัสวนรอบ "ปกติ" เพื่อแสดงรายการเหล่านั้นหรือไม่?>

สรุป

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

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