Editorul TinyMCE îmi strică HTML-ul - Soluții WordPress

Indiferent de ce ați configurat ca elemente copil valide, WordPress gestionează tag-urile p precum și întreruperile de linie într-un mod foarte particular. Probabil veți observa într-un final, dacă nu ați observat deja, că atunci când treceți de la editorul de text la cel vizual și înapoi, tag-urile dvs. <p> sunt eliminate, similar cu ceea ce se întâmplă pe frontend. O metodă de a preveni acest lucru este atribuirea unei clase personalizate tag-urilor <p>.

<p class="text">Acest tag p nu va fi eliminat"</p>.

În timp ce ↑ acest lucru ↑ va preveni eliminarea tag-ului p, nu va rezolva problema dvs., deoarece markup-ul dvs. pe frontend încă va fi afectat. Puteți DEZACTIVA wpautop. Dacă faceți acest lucru ȘI includeți p în elementele copil valide, acest lucru VA REZOLVA PROBLEMA DVS..

OPȚIUNEA 1 : Dezactivați Autop și Setați Elemente Copil Valide

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

Trebuie să vă avertizez, totuși, că în momentul în care treceți de la editorul HTML înapoi la TinyMCE, HTML-ul dvs. va fi distrus. O soluție este dezactivarea completă a TinyMCE pentru anumite tipuri de postări, ca în opțiunea 2 de mai jos.

OPȚIUNEA 2 : Dezactivați Auto P, TinyMCE și Setați Elemente Copil Valide

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

Pentru majoritatea oamenilor, totuși, ↑ această ↑ opțiune nu este fezabilă.

Deci, care sunt celelalte opțiuni? O soluție pe care am observat că funcționează este utilizarea unui tag span cu o clasă și asigurarea că nu există spațiu alb între tag-urile HTML. Dacă faceți acest lucru, puteți folosi opțiunea unu de mai sus și evitați dezactivarea completă a TinyMCE. Amintiți-vă că va trebui să adăugați și niște CSS în fișierul dvs. de stiluri pentru a afișa corect tag-ul span.

OPȚIUNEA 3: Opțiunea 1 + Tag-uri Span Stilizate

HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Text descriptiv uimitor</span></a>

CSS în Fișierul de Stiluri

.noautop {
    display: block;
}

Opțiunea 4: Utilizați shortcode-ul încorporat pentru încărcarea media

Inițial am uitat de aceasta, dar shortcode-ul [caption] va arăta astfel:

[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" />
    legendă minunată
[/caption]

Rezultatul va arăta astfel:

<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">Text descriptiv uimitor</figcaption>
</figure>

Dacă nu doriți tag-uri figure, puteți folosi un plugin precum custom content shortcode care vă permite să faceți asta:

[raw] <p>acest conținut nu va fi filtrat de wordpress</p> [/raw]

De ce nu poate editorul să funcționeze pur și simplu așa cum doresc eu?

Am petrecut nenumărate ore încercând să rezolv această problemă în ultimii ani. Ocazional, voi găsi o soluție care funcționează perfect, dar apoi WordPress va lansa o actualizare care strică totul din nou. Singura soluție pe care am găsit-o să funcționeze complet așa cum ar trebui, m-a condus la cel mai bun răspuns pe care îl am.

Opțiunea 5 : Preserved HTML Editor Markup Plus

Așadar, economisiți-vă durerea de cap și folosiți pur și simplu acest lucru. În mod implicit, Preserved HTML Editor Markup Plus afectează doar paginile noi. Dacă doriți să modificați paginile deja create, trebuie să accesați www.example.com/wp-admin/options-writing.php și să editați setările plugin-ului. De asemenea, veți putea schimba comportamentul implicit al noilor linii.

Notă: Dacă decideți să folosiți acest lucru, asigurați-vă că verificați firul de suport când este lansată o nouă actualizare WordPress. Ocazional, o modificare poate strica lucrurile, așa că este mai bine să vă asigurați că plugin-ul funcționează pe versiunile mai noi.

Bonus: Depanarea Problemei Dvs. / Editarea Altor Opțiuni TinyMCE

Dacă doriți să inspectați și să editați ușor configurațiile TinyMCE manual, așa cum faceți cu filtrele, puteți instala advanced TinyMCE config. Acesta vă permite să vizualizați TOATE opțiunile TinyMCE configurate și să le editați dintr-o interfață simplă. De asemenea, puteți adăuga noi opțiuni, la fel cum ați face cu filtrele. Acest lucru face totul mult mai ușor de înțeles.

De exemplu, am atât acest lucru, cât și Preserved HTML Editor Markup Plus. Captura de ecran de mai jos este din pagina de administrare a Advanced TinyMCE Config. Deși captura de ecran taie 90% din ceea ce este de fapt acolo, puteți vedea că afișează elementele copil valide disponibile pentru editare și pe cele pe care Preserved HTML Editor Markup Plus le-a adăugat.

Aceasta este o metodă extrem de utilă nu numai pentru personalizarea completă a editorului dvs., ci și pentru a vedea ce se întâmplă. S-ar putea chiar să reușiți să descoperiți ce a cauzat problema dvs. După ce am analizat parametrii în timp ce Preserved HTML Editor Markup era activ, am văzut câteva opțiuni suplimentare care ar putea fi adăugate unui filtru personalizat.

function fix_tiny_mce_before_init( $in ) {

    // Puteți depana acest lucru fără a avea nevoie de Advanced Tinymce Config activat:
    // 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' );

Din păcate, această metodă nu a funcționat. Probabil există niște regex sau JavaScript care se întâmplă la actualizarea postării și/sau la comutarea între editori. Dacă aruncați o privire la codul sursă al Preserved HTML Editor, puteți vedea că acesta face niște lucrări JavaScript pe partea de administrare, așa că ultimul meu sfat ar fi să verificați cum funcționează plugin-ul dacă doriți să adăugați această funcționalitate în tema dvs.

Oricum, îmi pare rău pentru cei care au ajuns până aici în răspunsul meu. Am crezut că ar fi bine să împărtășesc propriile experiențe în lucrul cu editorul WordPress, astfel încât alții să nu mai petreacă ore încercând să rezolve această problemă, așa cum am făcut eu!