Ajax Load More เป็นปลั๊กอินเลื่อนแบบไม่มีที่สิ้นสุดของ WordPress สำหรับการโหลดโพสต์แบบ Lazy Loading โพสต์เดี่ยว หน้า ความคิดเห็น และอื่นๆ อีกมากมายด้วย Ajax Powered Queries

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

Ajax Load More เข้ากันได้กับการเลื่อนแบบไม่มีที่สิ้นสุดด้วยปลั๊กอินอีคอมเมิร์ซยอดนิยม เช่น WooCommerce และ Easy Digital Downloads

คุณสมบัติ

• ตัวสร้างรหัสย่อ— สร้างรหัสย่อ Ajax Load More ที่คุณกำหนดเองนั้นคล้ายคลึงกับพารามิเตอร์ WordPress ต่างๆ ในรหัสย่อสัญญาณเตือนที่ใช้งานง่ายของเรา (ดูพารามิเตอร์รหัสย่อ)
• พารามิเตอร์แบบสอบถาม— Ajax Load More ช่วยให้คุณสามารถสืบค้น WordPress มีความสามารถที่แตกต่างกันมากมาย ค้นหาตามประเภทโพสต์ รูปแบบการโพสต์ วันที่ หมวดหมู่ แท็ก การจัดหมวดหมู่ที่กำหนดเอง คำค้นหา ผู้เขียน และอีกมากมาย!
• เทมเพลตทวนสัญญาณ— แก้ไขและขยายฟังก์ชันการทำงานของ Ajax Load More โดยการสร้างเทมเพลตรีพีทเตอร์ของคุณเองเพื่อให้เข้ากับรูปลักษณ์ของเว็บไซต์ของคุณ (ดูภาพหน้าจอ)
• หลายอินสแตนซ์— คุณสามารถรวมบทความหลายบทความจาก Ajax Load More ไว้ในหน้า โพสต์ หรือเทมเพลตเดียวได้
• การกรองอาแจ็กซ์— วิธีการกรองแบบกำหนดเองของ Ajax Load More จะช่วยให้คุณสามารถกรองและอัปเดตผลลัพธ์การสืบค้น Ajax ของคุณได้
• ความเข้ากันได้หลายไซต์— จัดการเทมเพลตรีพีทเตอร์ในทุกไซต์ในเครือข่ายของคุณ
• แผงการตั้งค่า— ปรับแต่งเวอร์ชัน Ajax Load More ของคุณโดยอัปเดตการตั้งค่าปลั๊กอิน

• ทบทวน- เลือกเทมเพลตทวนสัญญาณ (มี Add-on ให้เลือก) ค่าเริ่มต้น = 'ค่าเริ่มต้น'
• post_type- รายการประเภทโพสต์ที่คั่นด้วยเครื่องหมายจุลภาค ค่าเริ่มต้น = 'โพสต์'
• เหนียว_โพสต์— เก็บโพสต์ที่ติดหนึบไว้สำหรับรายการ Ajax ค่าเริ่มต้น=เท็จ
• โพสต์_ฟอร์แมต- ค้นหาตามรูปแบบการโพสต์ ค่าเริ่มต้น = เป็นโมฆะ
• หมวดหมู่- รายการหมวดหมู่ที่คั่นด้วยเครื่องหมายจุลภาคเพื่อรวมด้วยกระสุน ค่าเริ่มต้น = เป็นโมฆะ
• หมวดหมู่__และ— รายการหมวดหมู่ที่คั่นด้วยเครื่องหมายจุลภาคเพื่อรวมด้วย ID ค่าเริ่มต้น = เป็นโมฆะ
• หมวดหมู่__not_in— รายการหมวดหมู่ที่คั่นด้วยเครื่องหมายจุลภาคที่จะยกเว้นด้วย ID ค่าเริ่มต้น = เป็นโมฆะ
• แท็ก— รายการแท็กที่คั่นด้วยเครื่องหมายจุลภาค — รวมด้วยกระสุน ค่าเริ่มต้น = เป็นโมฆะ
• แท็ก__และ— รายการแท็กที่คั่นด้วยเครื่องหมายจุลภาครวมตาม ID ค่าเริ่มต้น = เป็นโมฆะ
• แท็ก__not_in— รายการแท็กที่คั่นด้วยเครื่องหมายจุลภาค — แยกตาม ID ค่าเริ่มต้น = เป็นโมฆะ
• อนุกรมวิธาน- ค้นหาตามชื่ออนุกรมวิธานที่กำหนดเอง ค่าเริ่มต้น = เป็นโมฆะ
• Taxonomy_terms- รายการคั่นด้วยเครื่องหมายจุลภาคของคำศัพท์อนุกรมวิธานที่กำหนดเอง (กระสุน) ค่าเริ่มต้น = เป็นโมฆะ
• Taxonomy_operator
• อนุกรมวิธาน_ความสัมพันธ์— ความสัมพันธ์เชิงตรรกะระหว่างอนุกรมวิธานแต่ละรายการเมื่อมีมากกว่าหนึ่งอนุกรมวิธาน (และ/หรือ) ค่าเริ่มต้น = 'และ'
• วัน- วันของสัปดาห์. ค่าเริ่มต้น = เป็นโมฆะ
• เดือน- เดือนของปี. ค่าเริ่มต้น = เป็นโมฆะ
• ปี- ปีที่โพสต์ ค่าเริ่มต้น = เป็นโมฆะ
• Taxonomy_operator— ตัวดำเนินการสำหรับการเปรียบเทียบข้อกำหนดอนุกรมวิธานกับ (IN/NOT IN) ค่าเริ่มต้น = 'ใน'
• meta_key- คีย์ฟิลด์ที่กำหนดเอง (ชื่อ) ค่าเริ่มต้น = เป็นโมฆะ
• meta_value- ค่าฟิลด์ที่กำหนดเอง ค่าเริ่มต้น = เป็นโมฆะ
• meta_compare— ตัวดำเนินการสำหรับเปรียบเทียบ meta_key และ meta_value เทียบกับ ค่าเริ่มต้น = 'ใน'
• meta_type- ประเภทฟิลด์ที่กำหนดเอง ค่าเริ่มต้น = 'CHAR'
• meta_relation— Vickory ที่มีรายการฟิลด์ที่กำหนดเองหลายรายการ (และ/หรือ) ค่าเริ่มต้น = 'และ'
• ผู้เขียน- คั่นรายชื่อผู้แต่งด้วยเครื่องหมายจุลภาคด้วย ID ค่าเริ่มต้น = เป็นโมฆะ
• post_in— คั่นรายการด้วยเครื่องหมายจุลภาคของรหัสโพสต์ในการสืบค้น ค่าเริ่มต้น = เป็นโมฆะ
• โพสต์__not_in— คั่นด้วยเครื่องหมายจุลภาค รายการรหัสโพสต์ที่จะแยกออกจากข้อความค้นหา ค่าเริ่มต้น = เป็นโมฆะ
• ค้นหา- ข้อความค้นหาแบบสอบถาม ('s') ค่าเริ่มต้น = เป็นโมฆะ
• กำหนดเอง_args- รายการค่าที่คั่นด้วยเครื่องหมายอัฒภาค: อาร์กิวเมนต์คู่ เช่น. tag_slug__and:การออกแบบการพัฒนา; event_display:ที่กำลังจะมีขึ้น ค่าเริ่มต้น = เป็นโมฆะ
• post_status- เลือกสถานะของโพสต์ ค่าเริ่มต้น = 'เผยแพร่'
• คำสั่ง— แสดงโพสต์ตามลำดับ ASC (จากน้อยไปหามาก) หรือ DESC (จากมากไปหาน้อย) ค่าเริ่มต้น = 'DESC'
• สั่งโดย— เรียงลำดับโพสต์ตามวันที่ ชื่อเรื่อง ชื่อ ลำดับเมนู ผู้เขียน รหัสโพสต์ หรือจำนวนความคิดเห็น ค่าเริ่มต้น = 'วันที่'
• ชดเชย- ชดเชยการสืบค้นเริ่มต้น (หมายเลข) ค่าเริ่มต้น = '0'
• โพสต์_ต่อ_เพจ— จำนวนโพสต์ที่จะโหลดพร้อมกับคำขอ Ajax แต่ละรายการ ค่าเริ่มต้น = '5'
• เลื่อน— โหลดโพสต์เพิ่มเติมเมื่อผู้ใช้เลื่อนหน้า (จริง/เท็จ) ค่าเริ่มต้น = 'จริง'
• scroll_distance— ยืนจากขอบหนึ่งไปอีกขอบหนึ่งถึงปืนยิงที่กำลังโหลดเสาขณะเลื่อน ค่าเริ่มต้น = '150'
• scroll_container- จำกัด Ajax Load การเลื่อนแบบไม่มีที่สิ้นสุดไปยังคอนเทนเนอร์หลัก ค่าเริ่มต้น = เป็นโมฆะ
• max_pages- จำนวนหน้าสูงสุดที่จะโหลดในขณะที่ผู้ใช้เลื่อน (เปิดใช้งานเมื่อเลื่อน = จริง) ค่าเริ่มต้น = '0'
• Pause_override— อนุญาตให้การเลื่อนแทนที่พารามิเตอร์หยุดชั่วคราวและทริกเกอร์การโหลดโพสต์เมื่อเลื่อน ค่าเริ่มต้น = เป็นโมฆะ
• หยุดชั่วคราว— ห้ามโหลดโพสต์จนกว่าผู้ใช้จะคลิกปุ่มโหลดเพิ่มเติม (จริง/เท็จ) ค่าเริ่มต้น = 'เท็จ'
• การเปลี่ยนแปลง- เลือกโพสต์ที่เปิดเผยการเปลี่ยนแปลง (จาง/ก่ออิฐ/ไม่มี) ค่าเริ่มต้น='จาง'
• transition_container- แสดงคอนเทนเนอร์การโหลด Ajax Load More (.alm-reveal) ค่าเริ่มต้น = 'จริง'
• transition_container_classes- เพิ่มคลาสให้กับ .alm-reveal transition div
• masonry_selector- ชื่อคลาสเป้าหมายของแต่ละรายการก่ออิฐ ค่าเริ่มต้น = เป็นโมฆะ
• masonry_animation— เลือกประเภทการเปลี่ยนการโหลดสำหรับรายการก่ออิฐ (ค่าเริ่มต้น/ซูมออก/เลื่อนขึ้น/เลื่อนลง/ไม่มี) ค่าเริ่มต้น = ค่าเริ่มต้น
• masonry_horizontalorder- รักษาลำดับแนวนอน ค่าเริ่มต้น=จริง
• รูปภาพ_โหลดแล้ว— รอให้โหลดรูปภาพทั้งหมดก่อนที่จะแสดงเนื้อหาที่โหลด ajax (จริง/เท็จ) ค่าเริ่มต้น = 'เท็จ'
• ทำลาย_หลัง— ลบ ajax โหลดฟังก์ชันเพิ่มเติมหลังจากโหลด 'n' จำนวนหน้าแล้ว ค่าเริ่มต้น = เป็นโมฆะ
• ความคืบหน้า_บาร์— แสดงตัวบ่งชี้แถบความคืบหน้าที่ด้านบนของหน้าต่างขณะโหลดเนื้อหา Ajax ค่าเริ่มต้น = 'เท็จ'
• ความคืบหน้า_bar_color- ป้อนสีเลขฐานสิบหกของแถบความคืบหน้า ค่าเริ่มต้น = 'ed7070'
• ปุ่ม_ฉลาก— ข้อความป้ายกำกับสำหรับปุ่มโหลดเพิ่มเติม ค่าเริ่มต้น = 'กระทู้เก่า'
— อัปเดตข้อความของปุ่มโหลดเพิ่มเติมในขณะที่เนื้อหากำลังโหลด ค่าเริ่มต้น = เป็นโมฆะ
• คอนเทนเนอร์_ประเภท— แทนที่ประเภทคอนเทนเนอร์ส่วนกลางที่ตั้งค่าไว้ในหน้าการตั้งค่า ALM ค่าเริ่มต้น = เป็นโมฆะ
• css_classes— เพิ่มคลาส CSS แบบกำหนดเองให้กับคอนเทนเนอร์ Ajax Load More ค่าเริ่มต้น = เป็นโมฆะ
• รหัส— ID เฉพาะสำหรับอินสแตนซ์ Ajax Load More
• ซ้อนกัน- นี่เป็นอินสแตนซ์ Ajax Load More ที่ไม่เปลี่ยนแปลง ค่าเริ่มต้น=เท็จ

ตัวอย่าง Ajax โหลดรหัสย่อเพิ่มเติม

ตัวอย่างการสาธิต

• ค่าเริ่มต้น- ฟังก์ชั่นและสไตล์ที่แกะกล่อง
• ฟิลด์ที่กำหนดเองขั้นสูง— ข้อมูลฟิลด์แบบกำหนดเองขั้นสูงแบบเลื่อนไม่สิ้นสุดด้วย Ajax Load More
• ไฟล์แนบ- ไฟล์แนบโพสต์เลื่อนที่ไม่มีที่สิ้นสุด
• ทำลายทีหลัง— ลบฟังก์ชัน Ajax Load More หลังจาก 'n' จำนวนหน้า
• รายการกิจกรรม— การสั่งซื้อและแสดงรายการกิจกรรมตามวันที่ของฟิลด์ที่กำหนดเอง
• การกรอง— รีเซ็ตและกรองอินสแตนซ์ Ajax Load More
• เฟล็กซ์บ็อกซ์— การสร้างกริด Ajax Load More ที่ตอบสนองด้วย Flexbox
• เลื่อนไม่มีที่สิ้นสุด— ดูฟังก์ชันและสไตล์การโหลดใหม่
• โหลดรูปภาพแล้ว— ดาวน์โหลดภาพก่อนแสดงเนื้อหาที่โหลด Ajax
• ก่ออิฐ— การสร้างเค้าโครงตารางที่ยืดหยุ่นด้วย Masonry JS
• หลายอินสแตนซ์- รวม Ajax Load More หลายรายการในหน้าเดียว
• URL การเพจ- สร้าง URL การเพจที่ไม่ซ้ำกันสำหรับทุกๆ การค้นหา Ajax Load More ด้วยโปรแกรมเสริม SEO
• — โพสต์จะไม่โหลดจนกว่าผู้ใช้จะเริ่มต้น
• กระทู้ที่โหลดไว้ล่วงหน้า— โหลดชุดโพสต์เริ่มต้นล่วงหน้าสำหรับคำขอ Ajax ทั้งหมดไปยังเซิร์ฟเวอร์ได้อย่างง่ายดาย
• แถบความคืบหน้า— แสดงตัวบ่งชี้การโหลดแถบความคืบหน้าพร้อมกับคำขอ Ajax แต่ละรายการ
• ผลการค้นหา— ส่งคืนผลลัพธ์ตามคำค้นหา
• คอนเทนเนอร์เลื่อน- จำกัด Ajax Load More ให้กับคอนเทนเนอร์หลัก
• SEO และเพจจิ้ง— รวมส่วนเสริมทั้งสองนี้เข้าด้วยกันเพื่อสร้างระบบนำทางที่ทรงพลังเพียงระบบเดียว
• แกลเลอรี่ภาพสไลด์— สร้างแกลเลอรีด้วย Ajax Load More และโปรแกรมเสริมเพจจิ้ง
• เค้าโครงตาราง— Ajax Load More จะแสดงผลลัพธ์ที่ต้องการในรูปแบบตาราง

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

วันนี้ฉันอยากจะบอกคุณว่า วิธีสร้างหน้าเก็บถาวรแบบไดนามิก. “ไดนามิก” หมายความว่าอย่างนั้น เมื่อคุณเลือกเดือนผลลัพธ์จะปรากฏในหน้าเดียวกันสำหรับความช่วยเหลือเพิ่มเติม AJAX - Javascript เนื่องจากไลบรารี jQuery มี API แบบง่ายสำหรับการทำงานกับ Ajax เราจึงใช้เฟรมเวิร์กนี้ ก่อนหน้านั้น ถ้าไม่มี jQuery เราจะเป็นยังไงในวันนี้? แม้ว่า vikorist มักจะหนาแน่นและโครงการของคุณก็มีการเชื่อมต่ออยู่แล้ว

ก่อนที่จะเขียนบทความนี้ ฉันได้สร้างหน้าเก็บถาวรแบบไดนามิกสำหรับบล็อกนี้ และอยากจะชื่นชมมัน (สาธิต)

หากต้องการใช้ไฟล์เก็บถาวรแบบไดนามิก เราต้องผ่าน 4 ขั้นตอน:

ฉันจะแสดงให้คุณเห็นถึงการสร้างหน้าเก็บถาวรแบบไดนามิกโดยใช้ธีม WordPress พื้นฐาน: “twentyten”

1. ปลั๊กอิน jQuery สำหรับ WordPress

ตัวเลือกที่ถูกต้องสำหรับการเชื่อมต่อสคริปต์ jQuery คือการใช้ฟังก์ชัน wp_enqueue_script() การเชื่อมต่อดังกล่าวจะปกป้องคุณจากข้อขัดแย้งกับการเชื่อมต่อกับสคริปต์ในปลั๊กอิน สคริปต์จะเชื่อมต่อหนึ่งครั้ง

คุณต้องแทรกโค้ดนี้ลงในไฟล์ function.php

ตัวเลือกที่ 2

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

ฟังก์ชั่น my_scripts_method() ( wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); wp_enqueue_script("j ) ;) add_action("wp_enqueue_scripts", "my_scripts_method");

ตัวเลือกที่ 3

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

2. ภาพ Zavantazhivo ก่อน-zavantazhuvach

ในช่วงระยะเวลาคูลดาวน์ เมื่อเซิร์ฟเวอร์ถูกขอให้ใช้ AJAX เราจะต้องแสดงภาพเพื่อแจ้งให้ลูกค้าทราบว่าเกิดอะไรขึ้น ภาพดังกล่าวมีผู้สวดเป็นพื้นหลังมากกว่าหนึ่งครั้ง มีข้อความอีกทางหนึ่งแทนภาพดังกล่าวคือข้อความ “ความหลงใหล...”

หากเรามีรูปภาพแบบนี้ให้ดาวน์โหลดจากที่นี่: Animated gif (บริการนี้เป็นประโยชน์) เปลี่ยนชื่อเป็น ajax-loader.gif และวางไว้ในโฟลเดอร์รูปภาพซึ่งอยู่ในแค็ตตาล็อก ของธีม WordPress ของเรา ด้วยเหตุนี้ เราจึงได้ภาพต่อไปนี้: http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif ด้านล่างรหัส mi yogo vikoristovamo u

3. สร้างเทมเพลตเพจปกติ

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

เทมเพลตไฟล์เก็บถาวรคือชื่อของเทมเพลตของเรา ซึ่งเราใช้ในแผงผู้ดูแลระบบ WordPress เมื่อสร้างเพจ

มาสร้างไฟล์ใหม่สำหรับโฟลเดอร์ชื่อ tpl_archive.php และใส่โค้ดคำแนะนำที่นั่น จากนั้นไปที่แผงผู้ดูแลระบบ WordPress และสร้างเพจถาวรโดยจดจำและสร้างเทมเพลต

ตอนนี้เราจะจัดเก็บไฟล์นี้พร้อมรหัสที่จำเป็น

1. ก่อนอื่นเราต้องแสดงรายการที่ปรากฏขึ้นเราสามารถสร้างมันขึ้นมาได้โดยใช้ฟังก์ชัน WordPress เพิ่มเติม: wp_get_archives() และ wp_dropdown_categories():

get_header(); get_footer(); เห็นได้ชัดว่าต้องลบส่วนหัวและส่วนท้ายของเทมเพลต get_sidebar(); ฉันแน่ใจว่าฉันไม่ได้เข้าไปยุ่งเกี่ยวกับโค้ดที่สมเหตุสมผลใดๆ แก้ไขโค้ดเพื่อแสดงรายการเดือนและหัวข้อ

บล็อคว่าง

2. มาออกแบบรายการที่อยู่ใน CSS กันดีกว่าฉันจะเพิ่มรหัสนี้ให้ใครได้ทันทีหลังจากคลิกส่วนหัว ():

ในขั้นตอนนี้ฉันพบสิ่งต่อไปนี้:


3. รหัสโดดาโมจาวาสคริปต์ซึ่งจะถูกดาวน์โหลดไปยังเซิร์ฟเวอร์และแสดงในบล็อก archive_pot (โค้ดจะถูกเพิ่มหลังสไตล์ css):

มาแจกแจงรหัส:
ทุกอย่างที่อยู่ตรงกลาง $("#archive_browser select").change(function())(...) จะถูกถามเมื่อเปลี่ยนรายการที่หลุดออกไป

/images/ajax-loader.gif - ไปที่ไฟล์รูปภาพ (ต้องการ...) ซึ่งสามารถใช้งานได้ในช่วงระยะเวลาดาวน์โหลด

/scripts/archive_getter.php – ไปที่ไฟล์เก็บถาวรซึ่งเราจะสร้างในขั้นตอนต่อไป

$.โพสต์(...); - ฟังก์ชั่น jQuery ที่สร้างคำขอจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์โดยใช้เทคโนโลยี AJAX

รหัสใหม่สำหรับเทมเพลตหน้าโพสต์

ไฟล์สำหรับเทมเพลตเพจปกติ (เราสร้างไฟล์ในโฟลเดอร์หัวข้อและคัดลอกโค้ดที่นั่น):

4. การสร้างไฟล์คอมไพเลอร์

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

มาสร้างโฟลเดอร์สคริปต์ในไดเร็กทอรี สร้างไฟล์ archive_getter.php (/wp-content/themes/twentyten/scripts/archive_getter.php) และจำไฟล์นี้ด้วยโค้ดต่อไปนี้:

การวิเคราะห์โค้ดเล็กน้อย:

เราเน้นที่แกน WordPress เป็นหลัก (การตั้งค่า ฟังก์ชัน ปลั๊กอินทั้งหมด) เพื่อให้ฟังก์ชัน WordPress พร้อมใช้งาน เราจำเป็นต้องเรียก query_posts() ซึ่งเราใช้ในไฟล์นี้เพื่อแยกข้อมูล

ฉันคิดว่า if(($year=="") && ($month=="") && ($cat=="-1"))(...) เราตรวจสอบว่ามีข้อมูลใด ๆ ที่เราสามารถใช้ได้ในภายหลัง ฟังก์ชัน query_posts() เนื่องจากไม่มีฟังก์ชันอื่น จึงจะแสดงคำเตือน

query_posts("posts_per_page=-1&cat=$cat&monthnum=$month&year=$year"); และทุกสิ่งที่อยู่ต่ำกว่าวงจรหลักของ WordPress

แกนและนั่นคือด้านพร้อม!

เกิดอะไรขึ้นกับฉัน (แต่รูปภาพคือสิ่งสำคัญ มันเป็นก้นที่มีชีวิต):

การเพิ่มประสิทธิภาพเนื้อหา (ปุ่มแสดง) wordpress (ajax)

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

ในการสร้างการปรับปรุงเนื้อหาแบบไดนามิก เราจำเป็นต้องมีไฟล์สองไฟล์:

ไฟล์สคริปต์ jquery.cookie จะต้องอยู่ในโฟลเดอร์ js ซึ่งอยู่ในโฟลเดอร์ที่มีเทมเพลตของคุณ เนื่องจากไม่มีโฟลเดอร์ดังกล่าว จึงต้องสร้างไฟล์เหล่านั้นขึ้นมา ถัดไป คุณต้องเพิ่มเส้นทางไปยังสคริปต์ในไฟล์ header.php

//วางไว้ระหว่างแท็ก

หลังจากที่คุณเขียนคำแนะนำสำหรับสคริปต์แล้ว คุณจะต้องส่งไฟล์ index.php หรือไฟล์อื่น ๆ หากคุณวางแผนที่จะสร้างการโปรโมตโพสต์แบบไดนามิก จำเป็นต้องเพิ่ม id = "วนซ้ำ"ที่ตู้คอนเทนเนอร์ คลาส = "โพสต์"ที่จุดตรวจ id = "การแบ่งหน้า"คุณต้องการวางปุ่ม "แสดงเพิ่มเติม" ไว้ที่นั่น รหัสมีลักษณะดังนี้:

ผลลัพธ์:

ในการรันสคริปต์คุณต้องมีไลบรารี jquery คุณสามารถเชื่อมต่อไลบรารีได้เช่นนี้

เทมเพลตสำหรับทดสอบการปรับปรุงเนื้อหา

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

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

• ยานเดกซ์ กามาเน็ตส์ - 410014625168542
• เว็บมันนี่- R429373694729

อะไรอยู่เบื้องหลังเทคโนโลยี AJAX เพิ่มเติม? โดยใช้วิธีการเพิ่มประสิทธิภาพการค้นหาโดยรวบรวมชิ้นส่วนแทนไซต์จากระบบเสียง (ซึ่งโดยทางนั้นไม่ใช่การปิดบัง)

ฉันใช้งานมันในทางเทคนิค มีคนจำนวนมากที่ต้องการทำซ้ำในบล็อกของพวกเขา ฉันจะพยายามถ่ายทอดข้อมูลเกี่ยวกับวิธีการทำ

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

ความเป็นไปได้ดังกล่าวสามารถได้รับชัยชนะได้เช่นกัน เปลี่ยนจำนวนข้อความภายในบนเว็บไซต์สำหรับระบบเสียง ทั้ง Google และ Yandex ไม่ได้จัดทำดัชนีส่วนหนึ่งของเนื้อหาที่เชื่อมต่อผ่าน AJAX

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

ฉันกำลังเทศนา 2 ตัวเลือกการตัดสินใจ. อีกอันหนึ่งที่ง่ายที่สุด

ตัวเลือกแรก

ajax_archives.php) ด้วยขั้นตอนถัดไป:

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

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

มีไฟล์ แถบด้านข้าง.php

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

ตอนนี้เป็นไปไม่ได้ที่จะเพิ่มสคริปต์เล็กๆ ลงในไซต์ ซึ่งเป็นเนื้อหาที่มีคุณค่า สร้างไฟล์ js (เช่น scripts.js

(function($) ( $(function() ( $("#archives").load("http://YOUR_DOMAIN/ajax_archives/"); )) ))(jQuery)

แทนที่ http://YOUR_DOMAIN/ajax_archives/ ด้วยที่อยู่ด้านบนเพจที่คุณสร้างขึ้น

header.php :

อีกทางเลือกหนึ่ง

ตัวเลือกนี้ง่ายกว่ามากเพราะว่า ไม่จำเป็นต้องสร้างหน้าเพิ่มเติมที่นี่

สร้างไฟล์ php ใหม่สำหรับคุณพ่อของคุณด้วยเทมเพลต WordPress (เช่น ajax_archives.php) ด้วยขั้นตอนถัดไป:

โค้ดแถวแรกสุดช่วยลดความจำเป็นในการสร้างหน้าใหม่

มีไฟล์ แถบด้านข้าง.phpหากคุณต้องการขยายรายการไฟล์เก็บถาวร ให้ใส่โค้ด html ต่อไปนี้:

หาก jQuery ยังไม่ได้เชื่อมต่อกับไซต์ของคุณ ไฟล์ดังกล่าว header.phpก่อนรหัสเพิ่มรหัสต่อไปนี้:

สร้างไฟล์ js ใหม่ (เช่น scripts.js) และแทรกลงในโค้ดที่ไม่เหมาะสมใหม่:

(function($) ( $(function() ( $("#archives").load("http://YOUR_DOMAIN/wp-content/themes/FOLDER_WITH_TEMPLATE/ajax_archives.php"); )) ))(jQuery)

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

ฝ่ายอักษะ อำนาจ แค่นั้นเอง คุณสามารถดูผลลัพธ์ได้

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

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

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

เพิ่มรายการโดยอัตโนมัติตามเวลาเลื่อน

ครก 1

ขั้นแรก คุณจำเป็นต้องรู้ว่าคุณต้องการแนะนำความก้าวหน้าอัตโนมัติหรือไม่ โดยส่วนใหญ่ คุณจะต้องติดตั้งทางลัดเพื่อลบวงจรออกจากการนำทางแบบย้อนกลับ เช่น ฉันมีไฟล์ที่เล็กกว่า เนื้อหา.php. ดังนั้นคุณก็ทำได้ แต่ - ดัชนี.php, ไฟล์เก็บถาวร.php, ลูป.php, Category.php, ค้นหา.phpฯลฯ ไฟล์เหล่านี้อาจมีการนำทาง WordPress มาตรฐานหรือฟังก์ชันที่กำหนดเอง นำไปใช้กับสถิติ

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

max_num_pages > 1) : ?>

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

รปภหากหลังจากโปรโมตโปรโมชันแล้ว หากเป็นการดีกว่าถ้าทำงานในด้านหมวดหมู่ แทนที่จะทำงานด้านการค้นหา คุณสามารถลองแทนที่โค้ดแถวที่ 4 ด้วยโค้ดใหม่สองอัน:

// แทนที่ var true_posts = "query_vars); ?>"; // ใน $str = serialize($wp_query->query_vars); var true_posts = "";

คร็อก 2

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

#load_more_gs( width: 53px; padding:50px 0; Margin:0 auto; ) .cssload-container( position:relative; ) .cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool : แน่นอน; ด้านบน: 50%; ซ้าย: 50%; เส้นขอบ: 1px RGB ทึบ (255,255,255); เส้นขอบซ้ายสี: rgb (0,225,255); รัศมีเส้นขอบ: 974px; -ขอบรัศมี: 974px; -webkit-เส้นขอบ-รัศมี: 974px; -moz-border-รัศมี: 974px; ) cssload-rotate 1150ms เชิงเส้นไม่มีที่สิ้นสุด -o-animation: cssload-rotate 1150ms เชิงเส้นไม่มีที่สิ้นสุด; -ms-animation: cssload-rotate 1150ms เชิงเส้นไม่มีที่สิ้นสุด; หมุนอนันต์เชิงเส้น 1150ms; ) .cssload-whirlpool::before ( เนื้อหา: ""; ระยะขอบ: -22px 0 0 -22px; cssload-rotate 1150ms linear infinite; -ms-animat ion: cssload-rotate 1150ms linear infinite; -webkit-animation: cssload- หมุน 1150ms เชิงเส้นไม่มีที่สิ้นสุด -moz-animation: cssload-rotate 1150ms เชิงเส้นไม่มีที่สิ้นสุด; ) .cssload-whirlpool::after (เนื้อหา: ""; ระยะขอบ: -28px 0 0 -28px; ความสูง: 55px; ความกว้าง: 55px; ภาพเคลื่อนไหว: cssload-rotate 2300ms อนันต์เชิงเส้น -ms-animation: cssload-rotate 2300ms อนันต์เชิงเส้น -webkit-animation: cssload-rotate 2300ms อนันต์เชิงเส้น -moz-animation: cssload-rotate 2300ms อนันต์เชิงเส้น หมุน (360deg); )) @-o-keyframes cssload-rotate ( 100% ( -o-transform: หมุน(360deg); ) ) @-ms-keyframes cssload-rotate ( 100% ( -ms-transform: หมุน(360deg); ) ) @- webkit-keyframes cssload-rotate ( 100% ( -webkit-transform: หมุน (360deg); ) ) @-moz-keyframes cssload-rotate ( 100% ( -moz-transform: หมุน (360deg) ; ) )

ครอก 3

ตอนนี้เราต้องการสคริปต์แอนิเมชั่นแบบอะซิงโครนัส มีสองทิศทางที่นี่ หรือแทรกสคริปต์ในส่วนท้ายของคุณ โดยบีบลงในแท็ก:

หรือสร้างไฟล์ เช่น - moreload.jsเพิ่มสคริปต์ใหม่แล้วเชื่อมต่อไปที่ชั้นใต้ดินเพื่อระบุเส้นทางที่ถูกต้องดังนี้:

หรือเพิ่มรหัสไปที่ ฟังก์ชั่น.php:

ฟังก์ชั่น loadmore_scripts_gs() ( wp_enqueue_script("moreload", get_template_directory_uri() . "/js/moreload.js", array("jquery"), null, true); ) add_action("wp_enqueue_scrip

ครก 4

ตอนนี้สคริปต์เอง ซึ่งจะถูกคัดลอกและวางตามวิธีที่คุณเลือก

JQuery(function($)( $(window).scroll(function())( var bottomOffset = 2000; var data = ( "action": "loadmore", "query": true_posts, "page" : current_page ); ถ้า ($(document).scrollTop() > ($(document).height() - BottomOffset) && !$("body").hasClass("กำลังโหลด"))( $.ajax(( url:ajaxurl, ข้อมูล: ข้อมูล พิมพ์:"POST", beforeSend: function(xhr)( $("body").addClass("loading"); ), Success:function(data)( if(data) ( $("#load_more_gs") ). $("body").removeClass("loading"); current_page++; ) else ( $("#load_more_gs").remove(); ) )));

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

แถว 19.24 มีบล็อกที่มี ID load_more_gsจากนั้นคุณจะต้องเปลี่ยนชื่อบล็อก ซึ่งจะต้องทำงานไม่เพียงแต่ในลูปและสไตล์เท่านั้น แต่ยังรวมถึงในสคริปต์ด้วย

ครก 5

ฟังก์ชั่น true_load_posts())( $args = unserialize(stripslashes($_POST["query"])); $args["paged"] = $_POST["page"] + 1; // side กำลังมา $args[" post_status" ] = "เผยแพร่", $q = new WP_Query($args);

" rel="บุ๊กมาร์ก" title="!}!}">

รหัสนี้จำเป็นต้องเปลี่ยนแปลงตามความต้องการของคุณ คุณต้องแทนที่แถว - 9, 10, 11 ด้วยโค้ด HTML ที่คุณมีอยู่ในช่วงกลางของวงจรในไฟล์ใด ๆ ที่คุณสร้าง CROC No. 1 หากคุณไม่มี HTML แต่เป็น PHP สำหรับเขียนรายการนามธรรมคุณจะต้องแทนที่ 8, 9, 10, 11, 12 แถว นี่คือโค้ดที่ระบุถึงการแสดงภาพขนาดย่อ ชื่อโพสต์ ข้อความทีเซอร์ และอื่นๆ หากคุณไม่ทำอะไรเลย ทุกอย่างจะบิดเบี้ยวและหยุดชะงักเนื่องจากการออกแบบโพสต์ของคุณ

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

เพิ่มบันทึกเมื่อกดปุ่ม - แสดง

ครก 1

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

//ซึ่งมีรอง

บ่งชี้- ข้อความปุ่มนี้สามารถเปลี่ยนแปลงได้ตามที่คุณต้องการ

คร็อก 2

ตอนนี้เราได้เพิ่มสไตล์ใหม่สำหรับปุ่มแล้ว หากคุณเพิ่มสไตล์ให้กับวิธีแรก คุณสามารถลบสไตล์เหล่านั้นได้

#loadmore_gs( พื้นหลัง:#63a63e; สี:#fff; padding:5px 0; text-align:center; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px; width: 150px;ระยะขอบ:0 อัตโนมัติ;เคอร์เซอร์:ตัวชี้;

ครอก 3

เหมือนกับวิธีก่อนหน้าทุกประการ หากคุณได้ลองแล้ว ให้ข้ามไป ถ้าไม่เช่นนั้น ก็ทำงานเหมือนกับวิธีแรก

ครก 4

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

JQuery(function($)( $("#loadmore_gs").click(function())( $(this).text("Zavantazhenya..."); var data = ( "action": "loadmore", " แบบสอบถาม ) ": true_posts, "page" : current_page ); text("Indicative").before(data); current_page++; if (current_page == max_pages) $("#loadmore_gs").remove(); ) else ( $ ("#loadmore_gs").ลบ(); ) ) )); )); ));

ที่นี่คุณสามารถปรับแต่งข้อความของปุ่มหรือเปลี่ยนชื่อ ID ที่คุณต้องการเปลี่ยนได้ แถวที่ 3 มีคำว่า - สิ่งนี้จะเกิดขึ้นหากคุณกดปุ่มและเครื่องวิเคราะห์ AJAX จะทำงานของคุณให้เสร็จสิ้น

แถวที่ 15 มีข้อความ - บ่งชี้ข้อความนี้จะปรากฏขึ้นหลังการนำทาง หากคุณเปลี่ยนข้อความจากข้อความแรก ให้เปลี่ยนที่นี่

ครก 5

Obluvach ปราศจากสิ่งเดียวกันโดยไม่มีการเปลี่ยนแปลงดังนั้นจึงสามารถข้ามช่วงเวลานี้ไปได้ไม่เช่นนั้นหากคุณไม่สนใจให้ฆ่าเขาจากวิธีก่อนหน้า

สำหรับวิธีอื่นเพียงทำตาม เช่นเดียวกับข้อแรก เนื่องจากกฎทั้งหมดของ Wikonan นั้นถูกต้อง ผลลัพธ์ที่ได้จะไม่เสียไป

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

นั่นคือทั้งหมดเพื่อประโยชน์ในการเคารพ 🙂