ไม่ว่าคุณจะกำหนดค่าอะไรในฐานะลูกที่ถูกต้อง WordPress จัดการแท็ก p รวมทั้งการขึ้นบรรทัดใหม่ด้วยวิธีที่ไม่เหมือนใคร คุณอาจสังเกตเห็นในที่สุดถ้าคุณยังไม่ได้เมื่อเปลี่ยนจากตัวแก้ไขข้อความเป็นโปรแกรมแก้ไขภาพและกลับมาที่<p>แท็กของคุณจะถูกปล้นคล้ายกับสิ่งที่เกิดขึ้นในส่วนหน้า วิธีที่จะป้องกันสิ่งนี้ไม่ให้เกิดขึ้นคือการให้<p>แท็กเป็นคลาสที่กำหนดเอง
<p class="text">This p tag won't get removed"</p>.
แม้ว่า↑ this ↑จะป้องกันแท็ก p ของคุณจากการถูกปล้น แต่มันจะไม่แก้ไขปัญหาของคุณเนื่องจากมาร์กอัปของคุณในส่วนหน้ายังคงมีปัญหา คุณสามารถปิดการใช้งาน wpautop ถ้าคุณทำเช่นนั้นและมี P รวมในเด็กที่ถูกต้องนี้จะแก้ไข ISSSUE
ตัวเลือกที่ 1: ปิดใช้งาน Autop และตั้งค่า Children ที่ถูกต้อง
remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){
$settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
return $settings;
}
ฉันควรเตือนคุณว่าสิ่งที่สองที่คุณเปลี่ยนจากตัวแก้ไขHTMLกลับไปเป็นTinyMCE HTML ของคุณจะถูกทำลาย วิธีแก้ปัญหาคือการปิดการใช้งานTinyMCEทั้งหมดสำหรับโพสต์บางประเภทเช่นเดียวกับในตัวเลือก 2 ด้านล่าง
ตัวเลือก 2: ปิดใช้งาน Auto P, TinyMCE และตั้งค่า Children ที่ถูกต้อง
remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){
$settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
return $settings;
}
add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup');
function disable_wyswyg_to_preserve_my_markup( $default ){
if( get_post_type() === 'post') return false;
return $default;
}
สำหรับคนส่วนใหญ่แม้ว่า ↑ this ↑นี้ จะไม่ใช่ตัวเลือก
แล้วมีทางเลือกอื่นอะไรอีกบ้าง? หนึ่งแก้ปัญหาฉันได้สังเกตเห็นการทำงานคือการใช้แท็กช่วงที่มีชั้นเรียนและให้แน่ใจว่ามีไม่มีพื้นที่สีขาวระหว่างแท็ก HTML ของคุณ หากคุณทำสิ่งนี้คุณสามารถใช้ตัวเลือกที่หนึ่งด้านบนและหลีกเลี่ยงการปิดการใช้งาน TinyMCE ด้วยกัน เพียงจำไว้ว่าคุณจะต้องเพิ่ม CSS บางอย่างในสไตล์ชีทของคุณเพื่อแสดงการขยายอย่างถูกต้อง
ตัวเลือก 3: ตัวเลือก 1 + แท็กช่วงสไตล์
HTML
<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Some amazing descriptive text</span></a>
CSS ในสไตล์ชีท
.noautop {
display: block;
}
ตัวเลือก 4: ใช้รหัสย่อเครื่องมืออัปโหลดสื่อบันทึกในตัว
ตอนแรกฉันลืมรหัสนี้ แต่รหัสย่อ [คำบรรยายภาพ]จะมีลักษณะเช่นนี้:
[caption id="attachment_167" align="alignnone" width="169"]
<img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
awesome caption
[/caption]
ผลลัพธ์จะมีลักษณะดังนี้:
<figure id="attachment_167" style="width: 169px" class="wp-caption alignnone">
<img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
<figcaption class="wp-caption-text">Some amazing descriptive text</figcaption>
</figure>
หากคุณไม่ต้องการแท็กรูปคุณสามารถใช้ปลั๊กอินเช่นรหัสย่อเนื้อหาที่กำหนดเองที่ให้คุณทำสิ่งนี้:
[raw] <p>this content will not get filtered by wordpress</p> [/raw]
เหตุใดเครื่องมือแก้ไขจึงไม่ทำงานตามที่ฉันต้องการ
ฉันใช้เวลานับไม่ถ้วนเพื่อพยายามให้เรื่องนี้ทำงานได้ดีในช่วงสองสามปีที่ผ่านมา บางครั้งฉันจะหาวิธีแก้ปัญหาที่ทำงานได้อย่างสมบูรณ์ แต่ WordPress จะผลักดันการอัปเดตที่ทำให้ทุกอย่างยุ่งอีกครั้ง ทางออกเดียวที่ฉันพบว่าทำงานได้อย่างสมบูรณ์ตามความเหมาะสมทำให้ฉันได้รับคำตอบที่ดีที่สุด
ตัวเลือกที่ 5: มาร์กอัปตัวแก้ไข HTML ที่สงวนไว้
ดังนั้นช่วยให้คุณปวดหัวและไปกับสิ่งนี้ ตามค่าเริ่มต้นมาร์กอัปตัวแก้ไข HTML ที่สงวนไว้จะมีผลกับหน้าใหม่เท่านั้น หากคุณต้องการเปลี่ยนหน้าเว็บที่สร้างไว้แล้วคุณต้องไปที่www.example.com/wp-admin/options-writing.phpและแก้ไขการตั้งค่าปลั๊กอิน นอกจากนี้คุณยังสามารถเปลี่ยนพฤติกรรมการขึ้นบรรทัดใหม่ที่เป็นค่าเริ่มต้น
หมายเหตุ: หากคุณตัดสินใจที่จะใช้สิ่งนี้ตรวจสอบให้แน่ใจว่าคุณได้ตรวจสอบเธรดการสนับสนุนเมื่อมีการเปิดตัวอัปเดต WordPress ใหม่ ในบางครั้งการเปลี่ยนแปลงจะทำให้เกิดความยุ่งเหยิงดังนั้นจึงเป็นการดีที่สุดที่จะตรวจสอบให้แน่ใจว่าปลั๊กอินใช้งานได้กับเวอร์ชันที่ใหม่กว่า
เครดิตพิเศษ: การดีบักปัญหาของคุณ / แก้ไขตัวเลือก TinyMCE อื่น ๆ
หากคุณต้องการตรวจสอบและแก้ไขการกำหนดค่า TinyMCE ของคุณอย่างง่ายดายด้วยตนเองเช่นเดียวกับตัวกรองคุณสามารถติดตั้งการกำหนดค่าTinyMCE ขั้นสูงได้ มันช่วยให้คุณดูทั้งหมดในตัวเลือกที่ TinyMCE การกำหนดค่าและแก้ไขพวกเขาจากอินเตอร์เฟซที่เรียบง่าย คุณยังสามารถเพิ่มตัวเลือกใหม่ได้เช่นเดียวกับตัวกรอง ทำให้เข้าใจได้ง่ายขึ้น
ตัวอย่างเช่นฉันมีทั้งที่และ HTML Editor Markup Plus ที่เก็บรักษาไว้ ภาพหน้าจอด้านล่างเป็นของหน้าผู้ดูแลระบบขั้นสูง TinyMCE ในขณะที่ภาพหน้าจอตัดส่วนที่เป็น 90% ออกไปจริงๆคุณสามารถดูได้ว่าเด็ก ๆ ที่ถูกต้องสามารถแก้ไขได้และเพิ่มมาร์กอัป HTML Editor Markup Plusใด
นี่เป็นวิธีที่มีประโยชน์อย่างมากไม่เพียง แต่ปรับแต่งเอดิเตอร์ของคุณอย่างสมบูรณ์ แต่ยังเห็นสิ่งที่เกิดขึ้น คุณอาจจะสามารถเข้าใจได้ว่าอะไรเป็นสาเหตุของปัญหาของคุณ หลังจากดูพารามิเตอร์ด้วยตัวเองในขณะที่เปิดใช้งานมาร์กอัป HTML Editor ที่สงวนไว้ฉันเห็นตัวเลือกเพิ่มเติมที่สามารถเพิ่มลงในตัวกรองแบบกำหนดเองได้
function fix_tiny_mce_before_init( $in ) {
// You can actually debug this without actually needing Advanced Tinymce Config enabled:
// print_r( $in );
// exit();
$in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
$in[ 'force_p_newlines' ] = FALSE;
$in[ 'remove_linebreaks' ] = FALSE;
$in[ 'force_br_newlines' ] = FALSE;
$in[ 'remove_trailing_nbsp' ] = FALSE;
$in[ 'apply_source_formatting' ] = FALSE;
$in[ 'convert_newlines_to_brs' ] = FALSE;
$in[ 'verify_html' ] = FALSE;
$in[ 'remove_redundant_brs' ] = FALSE;
$in[ 'validate_children' ] = FALSE;
$in[ 'forced_root_block' ]= FALSE;
return $in;
}
add_filter( 'tiny_mce_before_init', 'fix_tiny_mce_before_init' );
น่าเสียดายที่วิธีนี้ใช้ไม่ได้ผล อาจมีบาง regex หรือ JavaScript ที่เกิดขึ้นเมื่อมีการปรับปรุงการโพสต์และ / หรือสลับระหว่างบรรณาธิการ หากคุณดูที่ซอร์สโค้ด HTML Editor ที่เก็บรักษาไว้คุณจะเห็นว่า JavaScript บางตัวทำงานกับผู้ดูแลระบบดังนั้นคำแนะนำสุดท้ายของฉันคือการตรวจสอบว่าปลั๊กอินทำงานอย่างไรหากคุณต้องการเพิ่มฟังก์ชันการทำงานนี้ในธีมของคุณ
อย่างไรก็ตามขอโทษสำหรับทุกคนที่ได้รับมาไกลขนาดนี้ในคำตอบของฉัน แค่คิดว่าฉันจะแบ่งปันประสบการณ์ของตัวเองที่เกี่ยวข้องกับโปรแกรมแก้ไข WordPress ดังนั้นคนอื่นหวังว่าจะไม่ต้องใช้เวลาหลายชั่วโมงในการคิดออกเหมือนที่ฉันทำ!