ด้วยการใช้เทคโนโลยี AJAX เพื่อวัตถุประสงค์ในการเพิ่มประสิทธิภาพกลไกค้นหา ฉันซ่อนเนื้อหาบางส่วนของไซต์จากเครื่องมือค้นหา (ซึ่งไม่ใช่การปิดบังหน้าเว็บจริง)
ฉันใช้สิ่งนี้ในทางเทคนิค เนื่องจากมีหลายคนที่ต้องการทำสิ่งเดียวกันซ้ำในบล็อก ฉันจะพยายามถ่ายทอดข้อมูลเกี่ยวกับวิธีการทำเช่นนี้
AJAX คือการโหลดเนื้อหาบางส่วนของหน้าแบบไดนามิกโดยใช้ JavaScript เหล่านั้น. ดูเหมือนว่าเนื้อหาส่วนนี้จะปรากฏบนไซต์ แต่ถ้าคุณดูซอร์สโค้ดของเพจก็ไม่มีอยู่ หรือหากคุณปิดใช้งานการสนับสนุน JavaScript ในเบราว์เซอร์ของคุณ เนื้อหานี้ก็จะมองไม่เห็นเช่นกัน
ตัวอย่างเช่น สามารถใช้คุณลักษณะนี้เพื่อลดจำนวนลิงก์ภายในบนไซต์สำหรับเครื่องมือค้นหา ทั้ง Google และ Yandex จะไม่จัดทำดัชนีเนื้อหาส่วนหนึ่งที่เชื่อมต่อผ่าน AJAX
เอาล่ะ เรามาฝึกซ้อมกันต่อ ฉันจะบอกวิธีการทำเช่นนี้บน WordPress โดยใช้ตัวอย่างรายการไฟล์เก็บถาวรรายเดือนซึ่งโดยปกติจะแสดงในแถบด้านข้าง
ฉันเสนอวิธีแก้ปัญหา 2 แบบ อันที่สองนั้นง่ายที่สุด
ตัวเลือกแรกajax_archives.php ) โดยมีเนื้อหาดังต่อไปนี้:
เข้าสู่ระบบผู้ดูแลระบบ WordPress ของคุณและสร้างหน้าใหม่ ตั้งชื่อตามที่คุณต้องการ เช่น "รายการเอกสารสำคัญ" ทางด้านขวาในบล็อก "คุณสมบัติของหน้า" เลือกเทมเพลต "รายการ AJAX ของไฟล์เก็บถาวร"
หากคุณเปิดหน้านี้ในเบราว์เซอร์ คุณจะเห็นว่ามีเพียงรายการที่เราต้องการและไม่มีอะไรอื่นที่ไม่จำเป็น นี่คือสิ่งที่เราจะโหลดบนเว็บไซต์ในตำแหน่งที่ถูกต้อง
ในตำแหน่งนั้นในไฟล์ sidebar.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:
เดือน - หัวเรื่อง
get_header(); และget_footer(); รับส่วนหัวและส่วนท้ายของเทมเพลตตามลำดับ get_sidebar(); ฉันตัดมันออกโดยตั้งใจเพื่อไม่ให้รบกวนการทำความเข้าใจโค้ด โค้ดที่เหลือแสดงรายการแบบเลื่อนลงเดือนและหมวดหมู่
บล็อกว่างคือคอนเทนเนอร์ที่จะแสดงผลลัพธ์การสืบค้น เช่น บันทึก
2. มาออกแบบรายการแบบเลื่อนลงโดยใช้ CSS โดยเพิ่มโค้ดต่อไปนี้ทันทีหลังจากเรียกส่วนหัว ():
#archive_browser >
ในขั้นตอนนี้ฉันได้รับสิ่งต่อไปนี้: 
3. เพิ่มโค้ด JavaScript ที่จะทำการร้องขอไปยังเซิร์ฟเวอร์และส่งออกไปยังบล็อก archive_pot (เราเพิ่มโค้ดหลังสไตล์ css):
