Editor Visual Wordpress Mengupas Perubahan HTML

Ketika saya menggunakan editor WordPress HTML untuk menambahkan ikon icomoon seperti ini:

<span class="icon-shield"></span>

dan kemudian beralih ke editor visual dan kemudian kembali ke editor HTML, ikonnya hilang. Saya mencoba memasukkan sedikit Javascript ini untuk memperbaikinya. Saya melihat wp_enqueue_scripts dan meletakkan ini di functions.php, tetapi masih tidak memperbaiki masalah.

function oakwood_tinymcefix() {
    wp_enqueue_script( 'tiny_mce' );
    echo '<script type="text/javascript">'
   , 'tinymce.init({
            ...
            extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
        });'
   , '</script>';
}
add_action( 'admin_enqueue_scripts', 'oakwood_tinymcefix' );

Bagaimana saya bisa memperbaikinya?

Latar Belakang

Masalah ini berkisar pada penghapusan <span></span>elemen kosong di TinyMCE saat menyimpan posting atau beralih di antara tab editor Visualdan Text. Masalahnya melekat pada fungsionalitas inti (seperti versi trunk 4.0-alpha-20140602) dan tidak dapat diubah melalui API WordPress standar, seperti yang disebutkan dalam tiket # 26986 . Tiket merinci alasan di balik pengaturan dan ditandai sebagai wont-fix, yang berarti bahwa taruhan terbaik Anda adalah salah satu dari "work-arounds" yang tercantum di bawah ini.

Perilaku WordPress / TinyMCE Default

Secara default, instance TinyMCE dari WordPress dikonfigurasikan sedemikian rupa sehingga sejumlah tag kosong atau tag yang hilang atribut tertentu dihapus dalam upaya untuk menghilangkan markup yang tidak melakukan apa pun.

Dari dokumen MDN<span> :

Elemen HTML adalah wadah inline umum untuk konten ungkapan, yang secara inheren tidak mewakili apa pun. Ini dapat digunakan untuk mengelompokkan elemen untuk keperluan penataan (menggunakan atribut class atau id), atau karena mereka membagikan nilai atribut, seperti lang. Ini harus digunakan hanya ketika tidak ada elemen semantik lain yang sesuai.

Seperti <span>yang dimaksudkan untuk mengelompokkan elemen / konten sebaris, kontributor inti WordPress telah memutuskan bahwa elemen tersebut harus tidak relevan ketika tag kosong dan karenanya menghapusnya dari konten.

Bekerja-Sekitar

Untuk sebagian besar, cara yang tepat untuk memodifikasi konfigurasi TinyMCE adalah dengan menghubungkan ke tiny_mce_before_initfilter tetapi spanperilaku penghapusan kosong tidak dapat dimodifikasi dengan cara ini. Untuk melakukannya kemungkinan diperlukan peretasan ke file inti, dan karena itu saya belum memberikan solusi apa pun untuk dipertimbangkan.

Ideal: Berikan <span>Teks Pembaca Layar

Pembaca layar adalah bagian dari perangkat lunak yang mencoba menafsirkan konten di layar untuk membantu para tuna netra. Saat memproses halaman web, sebagian besar pembaca layar menonaktifkan CSS (dan Javascript) sepenuhnya atau hanya memproses sub-set, sehingga hal-hal yang biasanya disembunyikan oleh CSS pada akhirnya akan diproses seolah-olah itu terlihat. Web-devs secara tradisional mengeksploitasi perilaku ini atas nama aksesibilitas dengan membuat kelas CSS yang dapat diterapkan pada elemen yang akan menyembunyikan mereka dari semua orang yang memiliki CSS diaktifkan, sesuatu seperti :

.screen-reader-text {
    position: absolute !important;
    height: 1px;
    width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Dengan kelas ini tersedia (stylesheet tema Anda kemungkinan memiliki kelas yang sama), di dalam rentang ikon Anda, Anda dapat menambahkan rentang "pembaca layar" kedua yang tidak akan (atau setidaknya tampak) di-render di layar tetapi akan memberikan pembaca layar alternatif yang dapat diakses untuk ikon Anda, mirip dengan cara kerja altatribut pada <img>:

<span class="icon-shield"><span class="screen-reader-text">Security</span></span>

Di atas akan menampilkan ikon Anda ketika CSS diaktifkan, dan pembaca layar akan menafsirkan "Keamanan" di tempatnya.

Berikan <span>Konten Yang Tidak Terlihat

Untuk mencegah agar <span>tidak dihapus, Anda dapat menambahkan konten yang tidak ditampilkan secara eksplisit:

• Menambahkan karakter spasi antara tag pembuka dan penutup sudah cukup. Namun, saat ruang kosong kosong dilucuti, Anda perlu menambahkan karakter melalui  entitas HTML. Karakter ini akan dikonversi menjadi ruang normal setelah Anda beralih tab atau menyimpan, namun tidak akan dihapus dari markup. Perhatikan bahwa ini dapat memengaruhi ukuran rentang Anda, seperti halnya jika Anda menempatkan satu huruf di elemen:

  <span class="icon-shield">&nbsp;</span>

• Dengan asumsi Anda bekerja dengan set karakter UTF-8, Anda dapat menggunakan karakter "soft-hyphen" melalui entitas HTML ­. Tidak seperti itu  , karakter soft-hypen dibuat seolah-olah itu tidak memakan ruang, dan seharusnya tidak mempengaruhi ukuran rentang Anda:

  <span class="icon-shield">&shy;</span>

Gunakan Elemen Alternatif

Sementara TinyMCE WordPress dikonfigurasikan untuk menghapus <span>elemen yang kosong , ada sejumlah tag lain yang dikonfigurasi secara default untuk memungkinkan yang ada tanpa konten. Dalam komentar tiket # 26.986 , TobiasBg merekomendasikan menggunakan<i> ( <em>, <b>, dan <strong>adalah beberapa kemungkinan lain). Lihat pertanyaan Stack Overflow ini untuk mengetahui lebih lanjut tentang praktik menggunakan <i>ikon.

<i class="icon-shield"></i>

Buat Mesin Virtual TinyMCE Anda Sendiri

Ini mungkin solusi paling rumit dan umumnya tidak masuk akal yang tersedia, dan karena itu saya tidak akan memberikan implementasi. Dengan menggunakan plugin, seharusnya dimungkinkan untuk memuat contoh terpisah dari skrip TinyMCE, konfigurasikan sesuai keinginan Anda (di luar opsi yang ditampilkan WordPress), dan ganti editor default (atau sembunyikan dan tambahkan metabox pengganti). Meskipun memungkinkan Anda untuk menonaktifkan penghapusan bentang kosong, jumlah waktu yang diperlukan untuk menyempurnakan implementasi seperti itu kemungkinan akan jauh lebih besar daripada manfaatnya.