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_init
Filter) 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;
}
quelle
Antworten:
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
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
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
CSS im Stylesheet
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:
Die Ausgabe sieht folgendermaßen aus:
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:
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.
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.
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!
quelle
<span>
Tags gelandet. Ich hasse es, dass mein Markup jetzt vom Leerraum abhängig ist, aber es war vorerst der Weg des geringsten Widerstands. Ich habe es versucht,<figcaption>
aber es ist ein Element auf Blockebene, und TinyMCE hat nicht zugelassen, dass die<a>
Tags es umschließen, also war ich wieder auf dem ersten Platz. Nochmals vielen Dank für alle Ideen.<figure>
. Ich habe völlig vergessen, dass der eingebaute Untertitel-Shortcode dies standardmäßig tut!