Der TinyMCE-Editor bricht mein wunderschönes HTML

Dies ist so ziemlich ein genaues Duplikat von: Wie können Wordpress und TinyMCE <a> -Tags akzeptieren, die Elemente auf Blockebene umschließen, wie dies in HTML5 zulässig ist? und HTML5-, WordPress- und Tiny MCE-Problem - das Wickeln des Ankertags um div führt zu einer funky Ausgabe

Mein Problem ist, dass die vorgeschlagene Lösung ( tiny_mce_before_initFilter) mein Problem nicht zu lösen scheint. Ich habe HTML, das so aussieht:

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

Das ist in HTML5 vollkommen legal. Der WP-Editor mag es jedoch nicht und wandelt es um in:

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

Dies bricht natürlich mein Layout. Kennt jemand einen Weg, wie ich dieses Verhalten verhindern kann? Ich kann die visuelle Komponente des Editors nicht aufgeben und mich an einfachen Text halten. Anregungen sind willkommen.

Um ganz klar zu sein, wenn ich den folgenden Code verwende ( hier vorgeschlagen ), dürfen die <p>Tags in den Ankern verbleiben, aber es wird viel zusätzlicher Speicherplatz hinzugefügt, zusammen mit einer  Entität, die sich bei jedem Wechsel zwischen visuellem und Textmodus vervielfacht.

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

Unabhängig davon, was Sie als gültige untergeordnete Elemente konfiguriert haben, behandelt WordPress p-Tags sowie Zeilenumbrüche auf einzigartige Weise. Sie werden wahrscheinlich irgendwann bemerken, wenn Sie dies noch nicht <p>getan haben, dass beim Umschalten vom Texteditor zum visuellen Editor und zurück Ihre Tags entfernt werden, ähnlich wie im Frontend. Eine Möglichkeit, dies zu verhindern, besteht darin, den <p>Tags eine benutzerdefinierte Klasse zuzuweisen.

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

Während ↑ dieses ↑ verhindert , dass Ihr p-Tag entfernt wird, wird Ihr Problem nicht behoben, da Ihr Markup im Frontend immer noch durcheinander ist. Sie könnten wpautop deaktivieren. Wenn Sie dies tun UND p in gültigen Kindern enthalten haben, wird dies Ihre Ausgabe beheben .

OPTION 1: Deaktivieren Sie Autop und legen Sie gültige untergeordnete Elemente fest

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

Ich sollte Sie jedoch warnen, dass Ihr HTML-Code zerstört wird, sobald Sie vom HTML- Editor zurück zu TinyMCE wechseln . Eine Problemumgehung besteht darin, TinyMCE für bestimmte Beitragstypen wie in Option 2 unten vollständig zu deaktivieren .

OPTION 2: Deaktivieren Sie Auto P, TinyMCE und legen Sie gültige untergeordnete Elemente fest

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

Für die meisten Menschen ist ↑ dies ↑ jedoch keine Option.

Welche anderen Möglichkeiten gibt es? Eine Problemumgehung, die mir aufgefallen ist, besteht darin, ein span-Tag mit einer Klasse zu verwenden und sicherzustellen, dass zwischen Ihren HTML-Tags kein Leerzeichen vorhanden ist . Wenn Sie dies tun, können Sie Option 1 oben verwenden und vermeiden, TinyMCE insgesamt deaktivieren zu müssen. Denken Sie daran, dass Sie Ihrem Stylesheet auch CSS hinzufügen müssen, um die Spanne korrekt anzuzeigen.

OPTION 3: Option 1 + gestaltete Span-Tags

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

.noautop {
    display: block;
}

Option 4: Verwenden Sie den integrierten Shortcode für den Medien-Uploader

Ich habe diesen anfangs vergessen, aber der Shortcode [caption] sieht folgendermaßen aus:

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

Die Ausgabe sieht folgendermaßen aus:

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

Wenn Sie keine Figuren-Tags möchten , können Sie ein Plugin wie einen benutzerdefinierten Inhalts-Shortcode verwenden , mit dem Sie Folgendes tun können:

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

Warum kann der Editor nicht einfach so arbeiten, wie ich es will?

Ich habe in den letzten paar Jahren unzählige Stunden damit verbracht, dies zum Laufen zu bringen. Gelegentlich werde ich eine Lösung finden, die perfekt funktioniert, aber dann wird WordPress ein Update veröffentlichen, das alles wieder durcheinander bringt. Die einzige Lösung, die ich jemals gefunden habe, um vollständig so zu funktionieren, wie sie sollte, führt mich zu der besten Antwort, die ich habe.

Option 5: Erhaltenes HTML-Editor-Markup Plus

Sparen Sie sich also die Kopfschmerzen und machen Sie einfach mit. Standardmäßig wirkt sich Markup Plus für den konservierten HTML-Editor nur auf neue Seiten aus. Wenn Sie bereits erstellte Seiten ändern möchten, müssen Sie unter www.example.com/wp-admin/options-writing.php die Plugin-Einstellungen bearbeiten. Sie können auch das Standardverhalten für Zeilenumbrüche ändern.

Hinweis: Wenn Sie sich für diese Option entscheiden, überprüfen Sie den Support-Thread, wenn ein neues WordPress-Update gestartet wird. Gelegentlich wird eine Änderung die Dinge durcheinander bringen, daher ist es am besten sicherzustellen, dass das Plugin auf den neueren Versionen funktioniert.

Zusätzliches Guthaben: Debuggen Ihres Problems / Bearbeiten anderer TinyMCE-Optionen

Wenn Sie überprüfen wollen und einfach bearbeiten Sie Ihre TinyMCE Konfigurationen manuell, wie Sie mit Filtern tun, können Sie installieren erweiterte TinyMCE Config . Sie können ALLE konfigurierten TinyMCE-Optionen anzeigen und über eine einfache Oberfläche bearbeiten. Sie können auch neue Optionen hinzufügen, wie Sie es mit den Filtern tun würden. Es macht die Dinge viel einfacher zu verstehen.

Zum Beispiel habe ich sowohl das als auch den Preserved HTML Editor Markup Plus. Der folgende Screenshot zeigt die Administrationsseite der erweiterten TinyMCE-Konfiguration. Während der Screenshot 90% von dem abschneidet, was wirklich da ist, können Sie sehen, dass die gültigen untergeordneten Elemente zum Bearbeiten verfügbar sind und welche den Preserved HTML Editor Markup Plus hinzugefügt haben.

Dies ist eine äußerst hilfreiche Methode, um nicht nur Ihren Editor vollständig anzupassen, sondern auch zu sehen, was los ist. Möglicherweise können Sie sogar herausfinden, was Ihr Problem damals verursacht hat. Nachdem ich die Parameter selbst überprüft hatte, während das Markup für den konservierten HTML-Editor aktiviert war, sah ich einige zusätzliche Optionen, die einem benutzerdefinierten Filter hinzugefügt werden konnten.

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

Leider hat diese Methode nicht funktioniert. Es gibt wahrscheinlich einen regulären Ausdruck oder JavaScript, der beim Aktualisieren des Beitrags und / oder beim Wechseln zwischen Editoren auftritt. Wenn Sie sich den Quellcode des konservierten HTML-Editors ansehen, können Sie sehen, dass er auf der Administratorseite JavaScript-Arbeit leistet. Mein letzter Rat wäre daher, zu überprüfen, wie das Plugin funktioniert, wenn Sie diese Funktionalität in Ihr Thema aufnehmen möchten.

Wie auch immer, entschuldigen Sie jeden, der in meiner Antwort so weit gekommen ist. Ich dachte nur, ich würde meine eigenen Erfahrungen mit dem WordPress-Editor teilen, damit andere hoffentlich nicht stundenlang versuchen müssen, dies herauszufinden, wie ich es getan habe!