รายการบทความหน้าการแบ่งหน้า
1. โหลดไลบรารี jQuery
เนื่องจากเป็น Ajax ที่ขับเคลื่อนด้วย jQuery การโหลดไลบรารี jQuery จึงเป็นสิ่งจำเป็น
2. รูปแบบรายการบทความ
ในหน้ารายการบทความของคุณ (โฮมเพจ index.php, archive.php) คุณต้องตรวจสอบให้แน่ใจว่ามีโครงสร้างที่คล้ายกันดังนี้
<!-คอนเทนเนอร์ที่มีบทความทั้งหมด-> <div id = "เนื้อหา"> <!-คอนเทนเนอร์สำหรับแต่ละบทความ-> <div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div>
3. เพิ่มไปยังการนำทางเริ่มต้น
เนื่องจาก Ajax Paging ในแต่ละครั้งจะได้รับเนื้อหาของหน้าถัดไปคุณจะต้องเรียกการนำทางเริ่มต้นของ WordPress เท่านั้น เพิ่มรหัสต่อไปนี้ใน index.php ของคุณ (หรือหน้าบทความอื่น ๆ ) เพื่อสร้างการนำทาง WordPress เริ่มต้น
<div id = "pagination"> <? php next_posts_link (__ ('โหลดเพิ่มเติม')); ?> </div>4.AJAX รับหน้าถัดไป
เพิ่มรหัสต่อไปนี้ในไฟล์หัวข้อ JS ของคุณ
// ใช้ live () เพื่อให้ JS ยังคงใช้งานได้สำหรับเนื้อหาใหม่ที่ได้รับผ่าน ajax $ ("#pagination a"). live ("คลิก", function () {$ (นี่) .addclass ("โหลด") ข้อความ ("โหลด ... ") $ (data) .find ("#post. post"); undefined) {$ ("#pagination a"). attr ("href", nexthref);5. พลิกหน้าม้วนเทิร์นเทิร์น
หากคุณต้องการเปลี่ยนหน้าโดยอัตโนมัติเมื่อเมาส์เลื่อนไปที่ด้านล่างของหน้าคุณสามารถเปลี่ยนรหัสเป็นสไตล์ต่อไปนี้ได้
// bind scroll event $ (หน้าต่าง). -bind ("scroll", function () {// ตรวจสอบว่าแถบเลื่อนของหน้าต่างอยู่ใกล้กับด้านล่างของหน้าถ้า ($ (เอกสาร). scrolltop () + $ (หน้าต่าง). () (') ประเภท: "โพสต์", URL: $ (นี่) .attr ("href") + "#content", ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {result = $ (data) .find ("#content .post"); $ ("#content"). ภาคผนวก (result.fadein (300)); $ ("#pagination"). ลบ ();}}});}});6. เพิ่มการนำทาง CSS
เพิ่มส่วน CSS ไปยังการนำทางเพื่อทำให้สวยงาม คุณยังสามารถเตรียมไดอะแกรม GIF เพื่อระบุว่ากำลังโหลด ต่อไปนี้เป็นรูปแบบของทำนอง:
#pagination {padding: 20px 0 0 30px; } #PAGINATION .NEXTPOSTSLINK {WIDTH: 600PX; สี: #333; การตกแต่งข้อความ: ไม่มี; แสดง: บล็อก; Padding: 9px 0; TEXT-ALIGN: CENTER; ขนาดตัวอักษร: 14px; } #PAGINATION .NEXTPOSTSLINK: โฮเวอร์ {พื้นหลังสี: #CCCCCC; การตกแต่งข้อความ: ไม่มี; แนวชายแดน: 5px; -moz-Border-Radius: 5px; -webkit-Border-Radius: 5px; } #pagination .loading {พื้นหลัง: url ("images/loading.gif") 240px 9px ไม่ซ้ำ; สี: #555; } #pagination .loading: โฮเวอร์ {พื้นหลังสี: โปร่งใส; เคอร์เซอร์: ค่าเริ่มต้น; -แสดงความคิดเห็น
1. เตรียม
การโหลดไลบรารี jQuery ไม่ได้อธิบาย
2. Open WordPress แสดงความคิดเห็น Pagination
เปิด WordPress Backend - การตั้งค่า - การสนทนาตรวจสอบหน้าเพื่อแสดงความคิดเห็นใน "การตั้งค่าความคิดเห็นอื่น ๆ " ตั้งค่าจำนวนความคิดเห็น จำนวนความคิดเห็นที่นี่จะคำนวณเฉพาะความคิดเห็นหลักและการตอบกลับความคิดเห็นจะไม่ถูกคำนวณ ที่นี่ฉันกรอกข้อมูลจำนวนมากขึ้น (15) เนื่องจากการเพจแสดงความคิดเห็นมีรายละเอียดเกินไปและจะทำให้ผู้ใช้อ่านความคิดเห็นก่อนหน้านี้ไม่สะดวก
หลังจากเปิดการเพจแสดงความคิดเห็นในพื้นหลังให้เพิ่มรหัสต่อไปนี้ในตำแหน่งที่คุณต้องการเพิ่มการนำทางเพจในความคิดเห็น php (หากมีรหัสที่คล้ายกันในหัวข้อคุณไม่จำเป็นต้องเพิ่มอีกครั้งนอกจากนี้แท็ก NAV ในรหัสคือแท็ก HTML5 หากหัวข้อไม่ได้ใช้ HTML5
<nav id = "comments-navi"> <? php paginate_comments_links ('prev_text =? & next_text =?');?> </av>3. SEO ของความคิดเห็นเพจ
จากมุมมองของ SEO การแสดงความคิดเห็นจะทำให้เนื้อหาที่ซ้ำกัน (เนื้อหาของเพจนั้นเหมือนกันและคำหลักและคำอธิบายเหมือนกัน) ดังนั้นจึงเป็นเรื่องง่ายสำหรับบล็อกที่มีความคิดเห็นมากมายที่จะปรับลดสิทธิ์ของพวกเขาเพราะพวกเขามีเนื้อหาที่ซ้ำกันมากเกินไป ดังนั้นจึงจำเป็นต้องมีการรักษาบางอย่างใน SEO วิธีที่สะดวกและมีประสิทธิภาพที่สุดคือการใช้เมตาแท็ก เพิ่มรหัสต่อไปนี้ภายใต้เมตาแท็กดั้งเดิมของส่วนหัวของคุณ php เพื่อให้หน้าเว็บที่เพจจะถูกห้ามไม่ให้รวมอยู่ในเครื่องมือค้นหาและป้องกันไม่ให้เนื้อหาซ้ำซ้อน
<? php ถ้า (is_single () || is_page ()) {ถ้า (function_exists ('get_query_var')) {$ cpage = intval (get_query_var ('cpage')); $ commentPage = intval (get_query_var ('ความคิดเห็นหน้า')); } if (! empty ($ cpage) ||! ว่างเปล่า ($ commentPage)) {echo '<meta name = "Robots" content = "noindex, nofollow" />'; echo "/n"; -4. ความคิดเห็นของ AJAX
ตามข้างต้นมีความคิดเห็นเพจในหัวข้อ เพื่อให้บรรลุความคิดเห็นการเพจในอาแจ็กซ์คุณต้องใช้ JavaScript เพื่อร่วมมือกันเท่านั้น อย่างไรก็ตามก่อนหน้านี้คุณต้องเพิ่มองค์ประกอบก่อนรายการความคิดเห็นเพื่อระบุว่ารายการกำลังโหลดเมื่อแสดงรายการความคิดเห็นหน้าใหม่ สมมติว่าโครงสร้างโมดูลความคิดเห็นของเทมเพลตหัวข้อ comments.php มีดังนี้:
<div> <h3 id = "comments-list-title"> ความคิดเห็น </h3> <!-แสดงความคิดเห็นใหม่โหลด-> <div id = "การโหลด comments"> <span> การโหลด ... </span> </div> <!-รายการความคิดเห็น-> <ol> <li> id = "comments-navi"> <a href = "#"> 1 </a> ... </av> </div>
เพิ่มรหัส JS ต่อไปนี้ลงในไฟล์ JS ของคุณเพื่อใช้การแสดงความคิดเห็น
// ความคิดเห็นเพจเพจ $ body = (window.opera)? (document.compatmode == "css1compat"? $ ('html'): $ ('body')): $ ('html, body'); // ทริกเกอร์ paging เมื่อคลิกลิงก์นำทางเพจ $ .ajax ({type: "get", url: $ (this) .attr ('href'), beforesend: function () {$ ('#comments-navi') ลบ (); $ ('. comment_list') ลบ () $ ('#comments-list-title'). Offset (). Top-65}, 800); $ ('#loading-comments') หลังจาก (result.fadein (500));CSS สำหรับการโหลดแถบ (สำหรับการอ้างอิงเท่านั้น)
การคัดลอกรหัสมีดังนี้:
#การโหลด -Comments {แสดง: ไม่มี; ความกว้าง: 100%; ความสูง: 45px; ความเป็นมา: #A0D536; TEXT-ALIGN: CENTER; สี: #FFF; ขนาดตัวอักษร: 22px; ระดับความสูง: 45px; -