ใหม่ WP_Customize API - มันทำงานอย่างไรภายใต้ประทุน?

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

ดูเหมือนว่า WP จะเก็บการเปลี่ยนแปลงชั่วคราวไว้ที่ใดที่หนึ่งและนำไปใช้กับไซต์หากไซต์นั้นถูกดูในโหมด "ปรับแต่ง"

แต่ไซต์จะรู้ได้อย่างไรว่าอยู่ในโหมดกำหนดเอง เพราะฉันไม่เห็นข้อโต้แย้งแบบสอบถามใด ๆ ต่อท้ายลิงค์หรืออะไรทำนองนั้น

ที่นี่มีไม่กี่บิตที่ใช้ แต่สั้น ๆ ของมันคือรหัสนี้ในcustomize-preview.js:

this.body.on( 'click.preview', 'a', function( event ) {
    event.preventDefault();
    self.send( 'scroll', 0 );
    self.send( 'url', $(this).prop('href') );
});

event.preventDefault ป้องกันไม่ให้ลิงก์ทำงานได้จริง รหัสต่อไปนี้จะส่งข้อความกลับขึ้นไปบอกให้ a) เลื่อนกลับไปที่ด้านบนของหน้าและ b) เปลี่ยน URL

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

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

มีรหัสที่คล้ายกันอยู่ที่นั่นเพื่อป้องกันการส่งแบบฟอร์มจากการทำงานเลย (ไม่ทำอะไรเลย) และอื่น ๆ

class-wp-customize-setting.phpตัวกรองสำหรับการสกัดกั้นและการจัดการค่าปรับแต่งที่อยู่ใน preview()ฟังก์ชั่นเพิ่มฟิลเตอร์ที่จำเป็นในการจัดการค่าเข้าที่_preview_filter()ฟังก์ชั่นเป็นตัวกรองที่ มันใช้เวลาเพียงแค่get_option()หรือget_theme_mod()โทรแจ้งให้ทราบเมื่อพวกเขาควรจะเป็นตัวเลือกการแก้ไขและส่งกลับค่าการปรับเปลี่ยนแทน

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

wp_customize: on
theme: themename
customized: {json-encoded-options-here}
customize_messenger_channel: preview-1

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