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_init
filter) 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;
}
sumber
Jawaban:
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
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
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
CSS dalam Stylesheet
Opsi 4: Gunakan kode pendek pengunggah media bawaan
Saya awalnya lupa yang ini, tetapi kode pendek [caption] akan terlihat seperti ini:
Outputnya akan terlihat seperti ini:
Jika Anda tidak ingin tag angka, Anda dapat menggunakan plugin seperti shortcode konten khusus yang memungkinkan Anda melakukan ini:
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.
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.
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!
sumber
<span>
tag. Saya benci bahwa markup saya sekarang tergantung pada ruang putih, tapi itu adalah jalur yang paling tidak tahan untuk saat ini. Saya mencoba<figcaption>
tetapi ini adalah elemen level blok, dan TinyMCE tidak mengizinkan<a>
tag untuk membungkusnya, jadi saya kembali ke titik awal. Sekali lagi terima kasih atas semua idenya.<figure>
. Saya benar-benar lupa bahwa shortcode teks bawaan melakukan ini secara default!