Editor TinyMCE melanggar HTML indah saya

Ini adalah duplikat yang persis sama dari: Bagaimana membuat Wordpress dan TinyMCE menerima <a> tag yang membungkus elemen tingkat blok sebagaimana diizinkan dalam HTML5? dan masalah HTML5, WordPress dan Miny Tiny - membungkus jangkar tag di sekitar hasil div dalam output yang funky

Masalah saya adalah solusi yang disarankan ( tiny_mce_before_initfilter) sepertinya tidak menyelesaikan masalah saya. Saya memiliki HTML yang terlihat seperti ini:

<a href="#">
    <img src="path/to/file.jpg" />
    <p>Some amazing descriptive text</p>
</a>

Ini sangat legal di HTML5. Namun, editor WP tidak menyukainya dan mengubahnya menjadi:

<a href="#">
    <img src="path/to/file.jpg" />
</a>
<p>Some amazing descriptive text</p>

Ini, tentu saja, merusak tata letak saya. Adakah yang tahu cara saya bisa mencegah perilaku ini? Saya tidak bisa melepaskan komponen Visual editor dan tetap menggunakan teks biasa. Setiap saran dipersilahkan.

Untuk lebih jelasnya, ketika saya menggunakan kode di bawah ini ( disarankan di sini ), <p>tag diizinkan untuk tetap berada di dalam jangkar tetapi banyak ruang tambahan ditambahkan bersama dengan  entitas yang bertambah banyak setiap kali Anda beralih antara mode Visual dan Teks.

add_filter('tiny_mce_before_init', 'modify_valid_children');

function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

Terlepas dari apa yang telah Anda konfigurasikan sebagai anak yang valid, WordPress menangani tag p dan juga jeda baris dengan cara yang sangat unik. Anda mungkin akan melihat, jika Anda belum melakukannya, bahwa ketika beralih dari editor teks ke editor visual dan kembali bahwa <p>tag Anda dilucuti, mirip dengan apa yang terjadi di frontend. Cara untuk memblokir ini agar tidak terjadi adalah dengan memberi <p>tag pada kelas khusus.

<p class="text">This p tag won't get removed"</p>.

Meskipun ↑ ini ↑ akan menjaga agar tag p Anda tidak dilucuti, itu tidak akan memperbaiki masalah Anda karena markup Anda di frontend masih terhapus. Anda bisa LUMPUHKAN wpautop. Jika Anda melakukan itu DAN memiliki p termasuk dalam anak-anak yang valid, ini AKAN TETAP MASALAH ANDA .

OPSI 1: Nonaktifkan Autop dan Set Valid 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;
}

Saya harus memperingatkan Anda bahwa begitu Anda beralih dari editor HTML kembali ke TinyMCE, HTML Anda akan hancur. Solusinya adalah untuk menonaktifkan TinyMCE sama sekali untuk jenis posting tertentu seperti pada opsi 2 di bawah ini.

OPSI 2: Nonaktifkan Auto P, TinyMCE, dan Set Valid 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;
}

Bagi kebanyakan orang, ↑ ini ↑ bukan pilihan.

Jadi opsi apa lagi yang ada? Salah satu solusi yang saya perhatikan adalah menggunakan tag rentang dengan kelas dan pastikan tidak ada spasi putih di antara tag HTML Anda . Jika Anda melakukan ini, Anda dapat menggunakan opsi satu di atas dan menghindari harus menonaktifkan TinyMCE bersama-sama. Ingatlah bahwa Anda juga harus menambahkan beberapa CSS ke stylesheet Anda untuk menampilkan rentang dengan benar.

OPSI 3: Opsi 1 + Tag Rentang Bergaya

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 dalam Stylesheet

.noautop {
    display: block;
}

Opsi 4: Gunakan kode pendek pengunggah media bawaan

Saya awalnya lupa yang ini, tetapi kode pendek [caption] akan terlihat seperti ini:

[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]

Outputnya akan terlihat seperti ini:

<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>

Jika Anda tidak ingin tag angka, Anda dapat menggunakan plugin seperti shortcode konten khusus yang memungkinkan Anda melakukan ini:

[raw] <p>this content will not get filtered by wordpress</p> [/raw]

Mengapa editor tidak bisa bekerja sesuai keinginan saya?

Saya telah menghabiskan banyak waktu untuk mencoba agar ini bekerja dengan baik selama beberapa tahun terakhir. Kadang-kadang saya akan datang dengan solusi yang bekerja dengan sempurna, tetapi kemudian WordPress akan mendorong pembaruan yang mengacaukan semuanya lagi. Satu-satunya solusi yang saya temukan benar-benar berfungsi sebagaimana mestinya, menuntun saya ke jawaban terbaik yang saya miliki.

Opsi 5: Markup Plus Editor HTML yang Dipelihara

Jadi selamatkanlah diri Anda dari sakit kepala dan lakukan saja ini. Secara default, Editor HTML Markup Plus yang dipelihara hanya memengaruhi halaman baru. Jika Anda ingin mengubah halaman yang sudah dibuat, Anda harus mengunjungi www.example.com/wp-admin/options-writing.php dan mengedit pengaturan plugin. Anda juga dapat mengubah perilaku baris baru default.

Catatan: Jika Anda memutuskan untuk menggunakan ini, pastikan Anda memeriksa utas dukungan saat pembaruan WordPress baru diluncurkan. Terkadang, perubahan akan mengacaukan segalanya sehingga yang terbaik adalah memastikan plugin berfungsi pada versi yang lebih baru.

Kredit Ekstra: Melakukan debug Masalah Anda / Mengedit Opsi TinyMCE Lainnya

Jika Anda ingin memeriksa dan mengedit konfigurasi TinyMCE Anda secara manual, seperti yang Anda lakukan dengan filter, Anda dapat menginstal konfigurasi TinyMCE tingkat lanjut . Ini memungkinkan Anda melihat SEMUA opsi TinyMCE yang dikonfigurasi dan mengeditnya dari antarmuka yang sederhana. Anda juga dapat menambahkan opsi baru seperti yang Anda lakukan dengan filter. Itu membuat banyak hal lebih mudah untuk dipahami.

Sebagai contoh, saya memiliki keduanya dan Markup Plus Editor HTML yang dipelihara. Tangkapan layar di bawah ini dari halaman admin Advanced TinyMCE Config. Meskipun tangkapan layar memotong 90% dari apa yang benar-benar ada, Anda dapat melihatnya memperlihatkan anak-anak yang valid yang dapat diedit dan yang ditambahkan oleh Editor HTML yang Dipelihara Markup Plus .

Ini adalah cara yang sangat membantu tidak hanya sepenuhnya menyesuaikan editor Anda, tetapi juga melihat apa yang terjadi. Anda mungkin bisa mengetahui apa yang menyebabkan masalah Anda. Setelah melihat sendiri parameternya sementara Markup Editor HTML yang Dipelihara diaktifkan, saya melihat beberapa opsi tambahan yang dapat ditambahkan ke filter khusus.

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' );

Sayangnya metode ini tidak berhasil. Mungkin ada beberapa regex atau JavaScript yang terjadi ketika memperbarui pos dan / atau beralih di antara editor. Jika Anda melihat kode sumber Editor HTML yang Dipelihara Anda dapat melihat bahwa kode itu berfungsi JavaScript di sisi admin sehingga saran terakhir saya adalah memeriksa cara kerja plugin jika Anda ingin menambahkan fungsionalitas ini dalam tema Anda.

Ngomong-ngomong, maaf untuk siapa saja yang sampai sejauh ini dalam jawabanku. Hanya berpikir saya akan berbagi pengalaman saya sendiri berurusan dengan editor WordPress, jadi orang lain mudah-mudahan tidak perlu menghabiskan berjam-jam mencoba untuk mencari tahu ini seperti yang saya lakukan!