โหลดโพสต์ล่าสุดตามหมวดหมู่ผ่านเมนู WordPress โดยใช้ jQuery load

jQuery

หากคุณเคยเยี่ยมชมบล็อกขนาดใหญ่บางแห่งเช่น Mashableคุณอาจสังเกตเห็นว่าพวกเขามีระบบเมนูที่ดีมากที่เลื่อนลงมาและให้คุณมองเห็นโพสต์บล็อกล่าสุดจากแต่ละหมวดหมู่ เพื่อให้แน่ใจว่าหน้าจะไม่ใช้เวลาในการโหลดอย่างถาวร พวกเขาโหลดเนื้อหานั้นโดยใช้ Ajax... และโหลดล่วงหน้าหลังจากโหลดหน้าเสร็จแล้วเท่านั้น

เมนูย่อยของ WordPress Ajax

เราต้องการทำเช่นเดียวกันที่นี่ Martech Zone. เพื่อให้ข้อมูลเชิงลึกเกี่ยวกับหมวดหมู่ที่เรามี ฉันต้องการแสดงบางโพสต์ภายในแต่ละหมวดหมู่ เรามีความรอบรู้ที่ WordPress, WordPress API และ jQuery แต่มันไม่ได้จนกว่าฉันจะพบบทความเกี่ยวกับ เรียกโพสต์ตามหมวดหมู่โดยใช้ jQuery ว่าเรามีทางออกที่ดี

หมายเหตุ: วิธีการหนึ่งของพวกเขาซึ่งฉันไม่เชื่อว่าเป็นวิธีแก้ปัญหาที่ดีคือการส่งสตริง query_post ทั้งหมดผ่าน JavaScript... สำหรับฉันดูเหมือนว่าคุณกำลังเปิดใจสำหรับการแฮ็ก! ฉันได้แก้ไขสคริปต์สำหรับไซต์นี้เพื่อส่งเฉพาะพารามิเตอร์ที่จำเป็นภายในคำสั่ง query_posts

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

ในการติดป้ายกำกับรายการเมนูอย่างถูกต้องเราได้รวมรหัสจาก WPreso เพิ่มหน้า / โพสต์คลาส slug ในคลาสรายการเมนู.

ปัญหาเดียวเท่านั้น… ใช้ได้กับเพจหรือโพสต์ แต่ไม่ได้ผลสำหรับ Category! ดังนั้นเราจึงอัปเดตคำขอสำหรับกระสุนด้วย:

$ slug = get_cat_slug ($ id);

และเพิ่มฟังก์ชั่นจาก WPRecipes เคล็ดลับ WordPress: รับหมวดหมู่กระสุนโดยใช้รหัสหมวดหมู่เพื่อดึงหมวดหมู่ slug กลับมาเป็นแอตทริบิวต์ข้อมูลในเมนูการนำทาง

ดังนั้น ... ต้องขอบคุณความพยายามร่วมกันของ 3 ไซต์ WordPress และการปรับแต่งโดยกูรู jQuery ของเราที่ DK New Media, Stephen Coley (เพื่อปรับเมนูให้เรียบ) เรามีระบบเมนูย่อยที่ดีมาก!

งานทั้งหมดเสร็จสิ้นภายในไฟล์ธีมของเรา เราโหลดตัวกรองเมนูการนำทางใน functions.php เพิ่มเมนูย่อย div ลงในไฟล์ header.php ของธีม เพิ่มเทมเพลตเมนูย่อยลงในไฟล์ของเรา และโหลดไฟล์เมนูย่อย JavaScript ในส่วนหัวของเรา - ตรวจสอบให้แน่ใจว่าโหลด jQuery แล้วในธีมของเรา เช่นกัน หวังว่าคุณจะพอใจกับงาน มันเป็นการอัพเดทที่สนุกสำหรับไซต์!

8 คอมเมนต์

  1. 1

    คุณแสดงหรือขายรหัสนี้ที่ไหนสักแห่ง? ฉันพยายามทำให้มันใช้งานได้ แต่ฉันคิดไม่ออกว่าจะใส่ลงใน wp_nav_menu ด้วยวอล์คเกอร์อย่างไร…

    • 2
      • 3

        ขอบคุณสำหรับคำตอบ :). มันใช้งานได้ดีสำหรับหมวดหมู่แรกของฉัน แต่สำหรับหมวดนี้ฉันไม่สามารถหาวิธีทำซ้ำกระบวนการสำหรับแต่ละหมวดหมู่ย่อย (ระดับ 2 ของเมนูของฉัน) และเพื่อหยุดไม่ให้ทำงานในระดับ 1 ของ เมนูของฉัน: /

  2. 6
  3. 8

คุณคิดอย่างไร?

ไซต์นี้ใช้ Akismet เพื่อลดสแปม เรียนรู้วิธีการประมวลผลข้อมูลความคิดเห็นของคุณ.