WordPress 4.4 ist da – mit responsiven Bildern!

- zuletzt aktualisiert am 23. September 2016

Mit 4.4 steht seit heute Nacht die neueste Version von WordPress in den Startlöchern! Welche neuen Features dir das Bloggen künftig noch mehr erleichtern, erfährst du in diesem Artikel. 🙂

Responsive Bilder

Beginnen wir mit dem Feature, das ich mir wirklich herbeigesehnt habe! 🙂

Dass Layouts responsiv sind und sich an verschiedene Bildschirmgrößen anpassen, ist heutzutage Standard. Sidebars verdrücken sich in den Fußbereich, Menüs verschwinden und wollen erst bei Bedarf wieder ausgeklappt werden. So weit, so gut.

Aber ein Aspekt wird dabei oft vernachlässigt: die Bilder. Klar, je nach Bildschirmgröße werden die Dinger gnadenlos runter- und manchmal auch hochskaliert, sodass sie sich ordentlich ins Layout einfügen.
Aber eigentlich ist das nur eine Notlösung, denn: damit ein Foto auf dem iMac bildschirmfüllend super aussieht, braucht es einfach eine gewisse Größe. Und Größe ist bekanntlich Ladezeit. So eine riesige Datei für die Darstellung auf einem fuppeligen Handy herunterzuladen, ist schlichtweg Bullshit. Gerade, da wir hierzulande ja überall so hervorragend ausgebaute Netze haben… *hust*

Warum also stellen wir nicht alle längst verschiedene Versionen eines Fotos für verschiedene Geräte wie Smartphones oder Desktop-Rechner bereit?
Die Antwort ist banal: weil es umständlich ist.
Niemand will drölfzighundert verschieden große Versionen von einem einzigen Foto erstellen und den ganzen Murks dann auch noch von Hand in die Quellcode-Ansicht eines Blogpostings friemeln.

Genau hier setzt WordPress 4.4 (das übrigens den Namen „Clifford“ trägt) an und macht den Umgang mit responsiven Bildern einen ganzen Batzen einfacher. Und das Beste: du musst nichts dafür tun, das geht automatisch! 🙂

Wie #WordPress 4.4 den Umgang mit responsiven Bildern vereinfacht: Klick um zu Tweeten

Wenn du bisher ein Bild hochgeladen und in einen Artikel eingebunden hast, sah der dabei generierte HTML-Code ungefähr so aus:

<img 
width="1200" 
height="800" 
src="http://dein-blog.de/wp-content/uploads/2015/12/foto-1200x800.jpg" 
class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
alt="Ein tolles Foto" >
  • width und height definieren die Maße des Fotos
  • die src gibt die Adresse an
  • ein paar Klassen steuern das Aussehen
  • das alt-Attribut schließlich beinhaltet eine kurze Beschreibung des Motivs
  • Fertig ist die Laube. 🙂

Seit 4.4 ist sind nun die Attribute srcset und sizes hinzugekommen:

<img 
width="1200" 
height="800"
src="http://dein-blog.de/wp-content/uploads/2015/12/foto-1200x800.jpg"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
alt="Ein tolles Foto" 
srcset="http://dein-blog.de/wp-content/uploads/2015/12/foto-300x200.jpg 300w, http://dein-blog.de/wp-content/uploads/2015/12/foto-768x512.jpg 768w, http://dein-blog.de/wp-content/uploads/2015/12/foto-1024x683.jpg 1024w, http://dein-blog.de/wp-content/uploads/2015/12/foto.jpg 1200w" 
sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px">

Die sorgen dafür, dass unterschiedlich große Versionen deines Fotos parat gestellt werden.
Je nach Bildschirmgröße lädt der Browser die passende Version herunter und ignoriert die anderen. Dadurch wird für Smartphones Bandbreite gespart – deine Seite lädt schneller.

Und dafür musst du nichts anders machen als bisher – du lädst dein Bild einfach in die Mediathek, packst es an der gewünschten Stelle in deinen Artikel und fertig. Auch Artikelbilder werden entsprechend unterstützt.

Neues Standard-Theme: Twenty Sixteen

Es ist eine lieb gewonnene Tradition: Jahr für Jahr bringt WordPress ein neues Standard-Theme heraus, das diesmal erwartungsgemäß Twenty Sixteen betitelt wurde.

Der erste Gedanke, der mir beim Anblick eines frisch installierten Twenty Sixteens in den Sinn kam: urgh, eine Trauerkarte.
Dieser Eindruck entsteht durch den schwarzen Rahmen, der sich um die komplette Seite legt.

So sieht Twenty Sixteen out of the box aus - wie eine Trauerkarte, oder?

So sieht Twenty Sixteen out of the box aus – wie eine Trauerkarte, findest du nicht auch?

Von der Struktur her setzt Twenty Sixteen auf Altbewährtes: Content und Sidebar, darüber ein Header, der Platz bietet für eine Headergrafik. Akzente setzen die horizontalen schwarzen Striche in der Sidebar sowie die kräftige Typo der Überschriften.

Responsiv ist das Theme natürlich.

Das also ist das neuen Standard-Theme Twenty Sixteen: #wordpress Klick um zu Tweeten

Wie schon in früheren Versionen, kannst du die grundlegenden Einstellungen wie Titel, Linkfarbe oder Headergrafik direkt über Design » Anpassen vornehmen. Durch den Customizer siehst du die Änderungen auch gleich in einer Live-Vorschau.

Die schwarze Umrandung entpuppt sich hier übrigens als die Hintergrundfarbe der Seite und lässt sich leicht ändern.

Anpassen kannst du Twenty Sixteen komfortabel über den Customizer (Design » Anpassen)

Anpassen kannst du Twenty Sixteen komfortabel über den Customizer (Design » Anpassen)

WordPress als oEmbed-Provider

Nicht zuletzt sei noch auf ein weiteres Feature hingewiesen: eine erweiterte Funktionalität von oEmbed.

Wenn du bislang einen YouTube-Link als einfach Text in deinen Artikel eingefügt hast, wurde daraus dank purer Magie oEmbed direkt ein eingebettetes Video. Coole Sache, die dir das Hantieren mit Code erspart.

Jetzt geht WordPress einen Schritt weiter: du kannst darüber nicht nur fremde Inhalte in deinem Blog einbetten – sondern auch dein Blog kann über oEmbed an anderer Stelle eingebunden werden. Dafür setzt du im Fließtext einfach die Adresse zu einem Beitrag ein (das heißt, du bindest ihn also nicht über <a href="http://anderer-blog.de">Link</a> als Link ein).

Und dann, magic happens…:

In der Box: Link auf ein WordPress 4.4 - untere Zeile: Link auf ein WordPress 4.3

In der Box: Link auf ein WordPress 4.4 – untere Zeile: Link auf ein WordPress 4.3

Die Box mit der grauen Umrandung ist ein ganz simpler Link zu einem (lokal installierten) Testblog, auf dem bereits seit einigen Tagen WordPress 4.4 läuft.
In der Zeile darunter habe ich die (zu diesem Zeitpunkt noch nicht upgedatete) Live-Version von neontrauma.de verlinkt – das bleibt ein schnöder Textlink.

Angezeigt werden der Name des Blogs mitsamt Favicon, Titel, Beitragsbild, die ersten paar Sätze des Beitrags, die Anzahl der Kommentare sowie ein Link zum Einbetten.
So sieht das mit mehr Content aus:

Angezeigt werden neben dem Namen des Blogs der Beitragstitel, das Beitragsbild, die ersten paar Sätze, Anzahl der Kommentare sowie ein Link zum Einbetten

Angezeigt werden neben dem Namen des Blogs der Beitragstitel, das Beitragsbild, die ersten paar Sätze, Anzahl der Kommentare sowie ein Link zum Einbetten

Ein Blick unter die Haube verrät, dass das Einbetten über einen iFrame geschieht, in dem das jeweilige Blog geladen wird:

Die verlinkte Webseite wird in einem iFrame geladen

oEmbed: die verlinkte Webseite wird in einem iFrame geladen

Keine Frage, diese Einbettungen sehen nett aus und können nützlich sein. Eine Linkliste könnte durch die so generierten Vorschauen beispielsweise wesentlich interessanter und ansprechender werden. Andererseits werden diese Teaser vermutlich nochmal die Debatte anheizen, wie das hier denn nun mit dem Urheberrecht aussieht.

Wenn du verhindern möchtest, dass jemand dein Blog auf diese Weise bei sich einbindet, hilft dir übrigens das Plugin Disable Embeds weiter.

Fazit

Neben dem neuen Standard-Theme Twenty Sixteen bringt WordPress 4.4 vor allem zwei Features mit: die automatische Bereitstellung responsiver Bilder sowie die Möglichkeit, dein eigenes Blog mittels oEmbed auf anderen Seiten einzubinden.
eine detaillierte Beschreibung aller Änderungen findest du wie immer im WordPress-Blog.

Was hältst du von den Neuerungen?

    Kommentare

  1. Melissa am 9. Dezember 2015 um 8:42:

    Erst einmal danke, dass du die Neuerungen vorgestellt hast. Das oEmbed interessiert mich jetzt irgendwie weniger, aber das mit den Bilder ist verdammt cool!

  2. Wiwi am 9. Dezember 2015 um 8:09:

    Responsive Bilder sind schon eine feine Sache! Da hat WordPress wirklich mal was Feines gemacht und ist mit der Zeit gegangen! Das Design ist nicht so mein Geschmack, lässt sich aber sicherlich gut ausbauen.
    Mit der Einbettung kann man sicherlich auch fein arbeiten. 🙂
    Liebe Grüße,
    Wiwi

  3. Jenny am 9. Dezember 2015 um 11:16:

    Vielen vielen Dank das du die Neuerungen so toll erklärst, ich würde sonst wahrscheinlich nicht so viel merken 😉

    Liebe Grüße
    Jenny

  4. Birgit am 9. Dezember 2015 um 13:17:

    super hast du das erklärt, danke!

    Was aber passiert mit bestehenden Bildern in einem Blog, einem Theme, was das „srcset“ betrifft?

    Und gibt es für das „Disable Embeds“-Plugin auch eine Nicht-Plugin-Variante? 😀 … ich meine, da gab’s mal ein Meta-Tag dafür, oder? Keine Ahnung, wie sich das nannte …

    • Anne am 9. Dezember 2015 um 15:21:

      Hallo Birgit,

      wenn ich mich nicht irre, werden auch für früher eingebundene Bilder entsprechende Versionen hinterlegt. Also, die srcset- und sizes-Attribute werden auf jeden Fall gesetzt und zumindest hier auf neontrauma.de sind da auch entsprechend verschieden große Bolder hinterlegt. Wobei ich mir gerade nicht sicher bin, ob beim Hochladen in die Mediathek nicht immer schon verschiedene Größen generiert wurden… gute Frage.

      Bezüglich des oEmbeds – guck dir mal die Files des Plugins an, das hier müsste eigentlich auch funktionieren, wenn du es in deine functions.php packst: https://github.com/swissspidy/disable-embeds/blob/master/disable-embeds.php

      Liebe Grüße
      Anne

      • Birgit am 9. Dezember 2015 um 15:41:

        Das sieht gut aus, ich probiere mal, ob ich es über die functions.php hinbekomme.

        Hast du keine Probleme entdeckt, wenn ein Theme … ich sage mal … Bilder irgendwie auf responsive „trimmt“, dass das Theme dann mit WP 4.4. rumzickt?

        • Anne am 9. Dezember 2015 um 16:08:

          Bis jetzt noch nicht. Wobei ich in meinem Test-WordPress nur relativ wenige Bilder habe, aber hier auf neontrauma.de habe ich bis jetzt bei der stichprobenartigen Kontrolle nichts gefunden. Gib Bescheid, wenn du da irgendwelche Probleme entdeckst!

  5. Carolin am 9. Dezember 2015 um 13:39:

    Die Neuerung mit den responsiven Bildern ist ja echt klasse und tatsächlich sehr sinnvoll. 🙂

  6. Julia am 9. Dezember 2015 um 17:17:

    Kann man diese Umwandlung der Links auch bei Bedarf abstellen?

    Und wie groß sind denn deine Bilder wenn du sie hochlädst?

    • Anne am 10. Dezember 2015 um 7:43:

      Hallo Julia,

      mh, du meinst, dass bei dir im Blog eingefügte Links zu YouTube etc. nicht umgewandelt werden? Ja, schau mal hier: http://notes.pandaweb.de/wordpress/oembed-fuer-wordpress-deaktivieren/ Das sollte helfen, wenn du es in deine functions.php packst. (Diese Funktionalität, über oEmbed selber Content statt Links einzubetten, gibt es ja schon seit 2012 oder sogar noch länger. Neu hinzugekommen ist jetzt der umgekehrte Weg, sprich dass dein Blog woanders eingebettet werden kann. Wie du das unterbinden kannst, habe ich ein paar Kommentare weiter oben erwähnt. 🙂 )

      Meine Bilder lade ich immer mit einer maximalen Kantenlänge von 1000px hoch. Damit fahre ich immer ganz gut… Ausnahmen wären, falls ich sowas verwenden würde, nur vollformatige Hintergrundfotos, die würde ich größer lassen, damit sie nicht pixelig werden.

  7. Alltagsheldin am 10. Dezember 2015 um 14:37:

    Danke für die ausführliche und gute Erklärung! Die responsive-Bilder finde ich ja an sich super. Aber: Ich nutze dafür ein Plugin (nextgen gallery), weil man da so schön Ordner anlegen kann und alles (oder geht das auch in der eigenen Mediathek?). Da muss ich vermutlich auf das Update des Plugin-Schreiberlings warten, oder?
    Ich war schon öfter am Überlegen zur Mediathek zu wechseln (alleine schon, um auch über die App am iPad und iPhone Fotos hochladen zu können), aber nach über 4 Jahren Bloggerei wäre das eine ziemliche Mammutaufgabe…

    • Anne am 11. Dezember 2015 um 7:40:

      Hej,

      mittlerweile bin ich mit der Mediathek sehr zufrieden, die hat in den letzten Jahren deutlich an Funktionsumfang zugelegt. Du kannst einstellen, wie die Bilder beim Upload sortiert werden sollen (bspw. in monats- und jahresbasierte Verzeichnisse). Die NextGen Gallery habe ich früher in meinem Musikmagazin verwendet, weil die Mediathek damals noch nicht so ausgereift war. Mittlerweile vermisse ich da aber gar nichts mehr – auch Galerien lassen sich damit wunderbar realisieren.

  8. Nora am 10. Dezember 2015 um 15:15:

    Hallo Anne,

    danke für dein interessantes Resümee. Gerade das mit den responsiven Bildern finde ich einfach genial. Wurde auch Zeit…
    Falls du noch ein Weihnachtsgeschenk (für dich?) brauchst, bei mir läuft noch bis 16.02. die Verlosung eines Foto-Kreativ-Kalenders bzw. Notizbuchs: http://foto-paletti.de/allgemein/interview-mit-jana-maenz-und-beatrix-rautenberg-und-verlosung/
    LG Nora

  9. Stephan 黒 am 15. Dezember 2015 um 21:20:

    Hallo Anne,

    toll dass du die WordPress 4.4 Neuerungen vorgestellt hast.
    Hätte ich deinen Artikel nicht gelesen wären sie wahrscheinlich an mir vorbeigegangen 🙂

    Den Ausbau von Responsiven Bildern finde ich wichtig,

    Das man andere Blogs jetzt besser einbetten kann, könnte im Einzelfall ganz spannend sein. Die Idee eine Linkliste mit Blogs etwas aufzuarbeiten ist eine Anwendungsmöglichkeit. Ich habe auf meinem Blog z.B. noch eine Liste mit allen Fotografie-Blogs aus 2013. Die wollte ich immer mal updaten, wäre sicherlich nett wenn neben dem Blog-Link auch ein Auszug aus dem entsprechenden Blog eingebunden ist….
    Mal schauen sobald ich auf 4.4 umgestellt bin werde ich mit dem feature mal etwas rumspielen.

    LG Stephan

    • Anne am 16. Dezember 2015 um 8:06:

      Hallo Stephan,

      ja, das kenne ich von mir selber… bei der Vielzahl an Tools, die man so benutzt, kann man sich ja auch nicht selber bei jedem einzelnen mit jedem Update beschäftigen. Daher bin ich selber ein Fan davon, wenn solche Neuerungen vorgestellt werden. 🙂

  10. […] siehst du übrigens gerade das neue oEmbed-Feature von WordPress in Aktion, das ich neulich vorgestellt habe. […]

  11. […] siehst du übrigens gerade das neue oEmbed-Feature von WordPress in Aktion, das ich neulich vorgestellt habe. […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.