Die Nutzung von HTML5 halte ich persönlich für sinnvoll und ich mag die neuen Möglichkeiten, auch im Bereich der Semantik.
WordPress hat eine Besonderheit beim Ausliefern von Inhalten, die aus dem Editor kommen – das Setzen von Breaks und Absätzen. Historisch bedingt kümmert sich WordPress darum und nicht der TinyMCE; gleiches gilt bei der Integration von Bildern oder anderen Elementen dieser Art.
Um die Nutzung von HTML5 sauber abzubilden musste in einem Projekt der p-Tag durch den figure-Tag ersetzt werden und so ist folgender kleiner Filter entstanden.
Als kleiner Hintergrund zum figure-Tag lasse ich das folgenden Zitat stehen oder ihr nutzt das Web mit seinen vielfältigen Antwortformen.
HTML5 <figure> Tag
Viele Medien können nicht von Suchmaschinen oder behinderten Menschen erfasst werden. Um diese Medien textlich zugänglich zu machen, kann man sie per <figure> Tag an eine Beschreibung binden.
Robert Agthe
Ich bin nicht sonderlich begabt bei Regex-Ausdrücken und würde mich freuen, wenn es Verbesserungen und Ideen zur Lösung gibt, da diese Art des öfteren genutzt wird und die Nutzung von HTML5 geht voran. Inwieweit WordPress darauf reagiert, ist aktuell nicht abzusehen und an dieser Stelle konnte ich auch keinen Filter erkennen, so dass man ohne einen Regex an diese Stelle kommt und die Vorgabe von WordPress ändert. In diesem Zusammenhang gibt es einige Themen, die einer Überarbeitung von WordPress bedarf um den Editor sauber mittels HTML5 zu nutzen; im Basis Theme habe ich in der HTML5 Version schon einige Sachen integriert.
// unautop for images
function fb_unautop_4_img( $content ) {
$content = preg_replace(
'/<p>\\s*?(<a rel=\"attachment.*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s',
'<figure>$1</figure>',
$content
);
return $content;
}
add_filter( 'the_content', 'fb_unautop_4_img', 99 );
Eine Baustelle von vielen. Für Xtreme One habe ich die WordPress Gallery komplett neu geschrieben, damit sie voll HTML5 tauglich ist.
Sehr schön, wusste ich noch nicht. Danke dir! Kleiner Hinweis: "sauber statt "sauer" und "Ausdrücken" statt "Asdrücken" - da hat deine Tastatur wohl einige Zeichen beim Tippen verschluckt?
Vielen Dank, sofort gefixt; die Tastatur ist wohl weniger schuld; eher meine Kontrolle und Zeit.
Das kannst du aber auch anders machen:
Funktioniert bei mir bestens.
@Alex: vielen Dank für diese Lösung, die den Shortcode der Caption angeht; dies habe ich hier im Beitrag nicht berücksichtigt, es geht rein um das Ersetzen von p bei Bildern in figure. Aber passt super, wenn man auch die caption beachten muss.
$html = apply_filters( 'image_send_to_editor', $html, $id, $caption, $title, $align, $url, $size, $alt );in wp-admin/includes/media.php (Zeile 103 - 115)Ich denke das ist der Filter den du gesucht hast. Ist aber auch gut versteckt und die Funktionen sind seit v2.5 immer noch undokumentiert.
@Ralf: schaue ich mir an, oder du
WP Basis braucht ihn ja auch. Danke dir!
@Ralf: der Filter ist dafür nicht da. Er gibt das Markup aus der Thickbox an den Editor, also noch ohne p, lediglich a, img und caption-themen. Der p-Tag wird erst im Anschluss gesetzt. Habe es eben mal schnell getestet, schade
add_filter( 'image_send_to_editor', 'fb_unautop_4_img', 20, 8 );
function fb_unautop_4_img( $html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
var_dump($html);exit;
$id = ( 0 < (int) $id ) ? 'attachment_' . $id : '';
}
Ist natürlich auch wieder "nur" ein Workaround. Eine vollständigere HTML5-Unterstützung seitens WP ist da vorzuziehen. Aber du hast ja schon Recht, bis das soweit ist, muss man sich eben anderweitig zu helfen wissen...
@Frank: Jein. Du ersetzt ja das p-Tag durch ein figure-Tag. Das ist aber nicht in jeden Fall gewünscht bzw. richtig. Ich habe mir gerade mal Beispiele zum figure-Tag auf verschiedenen Seiten angeschaut.
<figure>
<img src="/library/graphics/html.gif" width=50 height=50 alt="Your HTML Guide" border="0">
</figure>
oder
<figure>
<img src="/library/graphics/html.gif" width=50 height=50 alt="Your HTML Guide" border="0">
<figcaption>Your HTML Guide for About.com</figcaption>
</figure>
Im einfachsten Fall bastelst du dir also zwei figure-Tags um das bestehende html. Oder du ergänzt das ganze um einen figcaption-Tag und füllst diesen mit den alt-Attribut oder title.
function add_figure_tag( $html ){
return '<figure>'.$html.'</figure>';
}
function add_figure_and_figcaption( $html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
$out_pattern = '<figure>%1$s%2$s</figure>';
$figcaption_pattern = '<figcaption>%1$s<figcaption>';
$output = '';
$figcaption = '';
$figcaption_text = '';
if( isset( $alt ) && '' != $alt )
$figcaption_text = $alt;
elseif( isset( $title ) && '' != $title )
$figcaption_text = $title;
else
$figcaption_text = '';
if( '' != $figcaption_text )
$figcaption = sprintf( $figcaption_pattern, $figcaption_text );
$output = sprintf( $out_pattern, $html, $figcaption );
return apply_filters( 'add_figure_and_figcaption', $output );
}
add_filter( 'image_send_to_editor', 'add_figure_and_figcaption', 20, 8 );
ODER
add_filter( 'image_send_to_editor', 'add_figure_tag', 20, 1 );
(den Code oben habe ich von scratch so hingenudelt. Bitte nicht ungetested übernehmen!!)
Die zweite Funktion ist etwas aufwendiger und würde, sofern vorhanden, das alt-Attribut bzw. den Title des Bildes als figcaption ausgeben.
Soll ein bestimmter Absatz mit in den figure-Tag, würde sich eher ein shortcode anbieten. Ansonsten würde jeder Absatz mit einem Bild in ein figure-Tag umgewandelt werden und das ist wohl nicht Sinn der Sache.
@Ralf: aber wenn ich figure einsetze, dann will ich den p-Tag doch nicht mehr haben. Das Problem bleibt, den figure über den Filter rien zu holen, ist ok, aber das wp_autop() erstellt mir dann halt aus der Figure wieder ein Absatz. Ist natürlich ein THema für html, nicht Wp-spezifisch.
Wie sehen deine Texte in einem Browser aus der kein HTML5 unterstützt und in denen du alle p-Tags entfernt hast?? Oder bei einem Theme das den figure-Tag ganz anders styled als ein p-Tag?
Schau dir mal dieses HTML an ( https://gist.github.com/1214866 ). Mit oder ohne p-Tags ist egal, sieht beides gleich aus.
Allerdings kannst du z.B. ein Theme vollkommen zerpflücken wenn figure-Tags eingefügt werden die nicht mit
margin: 0; padding: 0;formatiert sind.Wenn es wirklich darauf ankommt figure-Tags einzufügen und p-Tags zu eliminieren, dann halt die Funktion wp_autop kopieren, anpassen (figure aus der Liste $allblocks entfernen), den Filter wpautop entfernen und die eigene Funktion als Ersatz zu den Filtern hinzufügen.
@Ralf: mittels HTML5 ist der p-Tag unsinnig, weil der Absatz einfach keinen sematischen Wert hat, es handelt sich nur im Figure. Daher hast du recht, dass man dann wpautop() neu erstellen müsste, was ich bereits getan habe. In WP Basis html5 ist sie vorhanden, ist aber eben immer ein gewisses Risiko, da sie recht umfangreich ist.
Ah ein super Tipp, gleich gefixt! Danke.
Ah ein super Tipp, gleich gefixt! Danke.
super beschrieben, danke dir
Ich sollte zwar eigentlich mit php ein wenig vertrauter sein, aber warum selber denken, wenn Ihr es für mich tut 
Lieben dank
@Frank:
- wpautop: Wäre vielleicht mal ein Ticket wert das man die Elemente die mit p-Tags eingeschlossen werden filtern könnte.
-p-Tag: Semantisch hat der p-Tag keinen Wert. Technisch jedoch schon. Denk an Browser die HTML5 nicht richtig darstellen können. Und nicht nur Browser, sondern auch Scripte die HTML-Seiten konvertieren (z.B. nach PDF). Alle Programme die den figure-Tag nicht kennen würden ins Schleudern kommen.
Ich würde lieber noch ein paar Jahre einen semantisch unsinnigen p-Tag in kauf nehmen als Gefahr zu laufen das die Seite falsch verarbeitet wird.
- figure-Tag: Auch hier sehe ich ein Problem den Tag mit der Gießkanne zu verteilen. So würdest du den figure-Tag ggf. semantisch falsch verwenden nur weil ein Bild im Absatz vorkommt.
Besser wäre es wenn man beim Bild-Upload auswählen könnte ob das Bild in einem Kontext zum dazugehörigen Text steht und dementsprechend mit einen figure-Tag verwendet werden soll. Der einfachste Fall wo du semantisch unkorrektes HTML5 erstellen würdest, wäre ein Beitrag der nur aus einem Bild ohne weiteren Text besteht.
PS: Schade das es eine Zweierdiskussion geworden ist. Ich hätte dazu gerne noch eine andere Meinungen gelesen.
@Ralf: Ein Patch wäre vermutlich einfacher als die Diskussion dazu
Das Problem neue Elemente aus HTML5 hast du eh, dies umgehe ich aktuell immer mit Javascript und ja, ich sperre eventuell einen kleinen Teil aus, der kein JS und einen älteren Browser hat. Daher ist die Klärung mit dem Kunden im Vorfeld so wichtig. Mir pers. machen die Möglichkeiten von HTML5 mehr Freude und die Resultate und der Mehrwerit für die Nutzer ist es meines Erachtens wert, dass man einen Teil ignorieren muss. Ansonsten würde ich eher auf xhtml setzen, also aufwendig zu filtern.
Wichtig ist mit trotzdem dein Filter, da so recht stabile Sachen möglich sind und man eben das p in Kauf nimmt. Die Idee mit dem Patch für wpautop ist aber trotzdem eine gute Idee.
Diskussion haben sich eh zurück gezogen, zumindest in den Blogs, wo ich lese, sind die eher gering - schade. Vermutlich sind die Leute so mit sich oder den vielen Social Möglichkeiten beschäftigt.
Gute tipp,hab gefixt und mit validator.w3.org/check gemacht,
da hats ja Validation Output: 5 Errors gemeldet element "figure" undefined.
Bei HTML5 Validation Output: 9 Errors
woran liegt das?
@viktor37: weil nur wenige Validatoren html5 richtig validieren können, daher kennt er auch das Element nicht. schaue mal bei http://html5.validator.nu/
Danke Frank für deine schnelle antwort und link,
HTML5 läuft wohl noch bei vielen Validatoren in Testphase.
Ich beschäftige mich noch nich allzulange mit WP und muss immer was neueres dazu Lernen.
Dank solchen Blogs wie deins gelingt das auch.
MfG Viktor
Sehr geehrter Herr Bültge,
wieder einmal ein nützlicher Artikel, wir haben nun schon einiges von Ihnen nutzen können. An dieser Stelle mal vielen Dank für die Veröffentlichungen, die uns schon viel Zeit und Arbeit gespart haben.
@Viktor37 kann dir ebenfalls http://html5.validator.nu/ empfehlen, alles andere ist meist noch sehr "Beta". Wenn jemand was besseres hat, bitte hier posten, Danke.
LG
Valentine aus Stuttgart
Womöglich verstehe ich das falsch, aber den p-Tag brauche ich nicht zu ersetzen, weil ich ihn ohnehin niemals verwende. Mir war nach einigen Versuchen die Wirkung immer suspekt und habe mir lieber mit mehreren br-Tags beholfen, als zu riskieren, dass Zeilenabstände willkürlich interpretiert werden. Der figure-Tag ist interessant, aber wie schon ein Vorredner sagte, muss man abwarten, dass HTML5 überall korrekt interpretiert wird.
Ich kenne mich nicht aus mit alle dem Zeug, aber darf ich fragen: Was passiert denn, wenn man nichts macht? Wird dann mein Blog irgendwann nicht mehr richtig angezeigt?
Kein Sorge; die werden trotzdem angezeigt; dies ist für Leute interessant; die sich mit der Nutzung von Tags und dessen Semantik auseinander setzen.
HTML 5 ist eine super Entwicklung. Mir gefällt auch die Implementation für den mobilen Bereich. Mit der Zeit werden die Websites auf dem Smartphone unter HTML5 laufen und der Flashplayer kann dann mit der Technik substituiert werden. So dürften die Websites flüssiger dargestellt werden können. Es gibt so viele Möglichkeiten, auf die ich mich schon sehr freue, wenn die Umstellung so langsam in Gang kommt.