5 Tipps zum Erstellen eines Retina-fähigen WordPress-Themes

Ein WordPress-Theme ist Retina-ready, wenn es die hohe Pixeldichte von Retina-Displays berücksichtigt und Bilder liefert, die für diese Displays angemessen groß sind. Es gibt ein paar Dinge zu beachten, wenn Sie ein WordPress-Theme retina-fähig machen: 1. Verwenden Sie hochauflösende Bilder. Retina-Displays haben eine 2- oder 3-mal höhere Pixeldichte als ein Standard-Display, sodass Ihre Bilder zwei- oder dreimal so groß sein müssen, um auf diesen Geräten scharf auszusehen. 2. Verwenden Sie ein ansprechendes Design. Ein ansprechendes Design stellt sicher, dass Ihr Design auf allen Geräten gut aussieht, einschließlich Retina-Displays. 3. Verwenden Sie ein Plugin wie WP Retina 2x. Dieses Plugin generiert automatisch hochauflösende Versionen Ihrer Bilder und stellt sie Retina-Geräten zur Verfügung. 4. Optimieren Sie Ihre Bilder. Stellen Sie sicher, dass Sie Ihre Bilder für schnellere Ladezeiten optimieren. 5. Verwenden Sie ein Caching-Plugin. Ein Caching-Plugin hilft dabei, das Laden Ihrer Seiten auf allen Geräten, einschließlich Retina-Displays, zu beschleunigen. Indem Sie diese Tipps befolgen, können Sie sicherstellen, dass Ihr WordPress-Theme retinafähig ist.

Da die Retina-Unterstützung für unsere WordPress-Themes in den kommenden Wochen verfügbar sein wird, wollte ich Ihnen mitteilen, wie wir sie erstellt haben. Durch die Renovierung Ihres Designs wird die Größe von Retina-Geräten (mit denselben Abmessungen) verdoppelt, indem Bilder doppelt so groß (aber mit denselben Abmessungen) gerendert werden. Um ein 100×200-Bild anzuzeigen, muss der Browser es auf 100×400 herunterkomprimieren. CSS-Hintergrundbilder und Sprite können nicht durch Retina.js ersetzt werden, da sie keine HTML-Tags verwenden. Symbole und Schaltflächen müssen aktualisiert werden, damit Ihre Website auf einem Retina-Display gestochen scharf und reaktionsschnell aussieht. Die Dokumentation für Font Awesome ist ausgezeichnet und es ist eine der robustesten Font-Icon-Bibliotheken. Die meisten Schriftsymbole werden einfach durch Hochladen der Dateien und Hinzufügen der @Font-face-Deklaration installiert.

Sie können dieser skalierbaren und anpassbaren Vorlage auch coole Schriftsymbole wie das Facebook-Logo hinzufügen. Der einfachste Weg, ein Retina-fähiges Favicon zu erstellen, ist die Verwendung eines einfachen Java-Skripts. Erstellen Sie einfach ein Photoshop-Dokument mit 32×32, fügen Sie Ihr Bild hinzu und speichern Sie es mit Photoshop als png24 (mit Transparenz).

Wie mache ich ein Bild Retina-ready?

Um ein Bild retinafähig zu machen, müssen Sie eine Version des Bildes erstellen, die doppelt so groß ist wie das Original. Dies kann in jeder Bildbearbeitungssoftware wie Photoshop erfolgen. Sobald Sie die größere Version des Bildes erstellt haben, müssen Sie es als separate Datei speichern. Wenn Sie das Bild auf Ihre Website hochladen, müssen Sie den Code verwenden, um den Browser anzuweisen, die größere Version des Bildes zu laden.

FooGallery kann auf der Registerkarte Bilder aktiviert werden, um retinafähige Bilder anzuzeigen. Wenn Sie Retina-Größen auswählen und auf Standardwerte auf alle Galerien anwenden klicken, werden für alle vorhandenen Galerien Bilder generiert, die im Retina-Format angezeigt werden können. Wenn Sie eine neue Galerie hinzufügen, werden automatisch Bilder in Retina-Größe generiert. Wenn das FooGallery-Bild auf einem normalen oder Retina-Bildschirm angezeigt wird, wird der HTML-Code des Bilds automatisch so optimiert, dass es mit 300 x 300 Pixel angezeigt wird. Wenn Sie Retina-Bildgrößen für Ihre Galerien aktiviert haben, stellen Sie sicher, dass alle Bilder, die Sie in FooGallery anzeigen, groß genug sind, um auf einem Retina-Gerät angezeigt zu werden. Wenn Sie beispielsweise ein 600600-Bild klar auf zweidimensionalen Retina-Geräten anzeigen möchten, müssen Sie Galeriebilder mit einer Auflösung von 12001.200 hochladen. Wenn Sie die Retina-Einstellungen 2x und 3x aktivieren, können Sie drei Versionen Ihres Daumens erstellen.

Machen Sie Ihre Website Retina-fähig

Beim Anzeigen einer Retina-fähigen Website wird das Bild mit einer höheren Auflösung angezeigt als auf einem Display mit Standardauflösung auf einem High-Definition-Gerät. Diese höhere Auflösung ermöglicht eine detailliertere Darstellung des Bildes, wodurch es leichter zu verstehen und zu sehen ist.
Wenn Sie beabsichtigen, retinafähige Software für Ihre Website zu verwenden, wird empfohlen, so weit wie möglich skalierbare Vektorgrafiken (SVG) zu verwenden. Dieses Grafikformat ist XML-basiert und verfügt über qualitativ hochwertige Bilder. Zum Anzeigen von SVG-Bildern, XML-Dateien oder Mobiltelefonen, die diese Dateien anzeigen, kann über Internetbrowser zugegriffen werden.
Es wird empfohlen, vor der Verwendung ein retinafähiges Bild zu verwenden. Sie können dies erreichen, indem Sie ein Bild mit 1920 × 1920 Pixeln verwenden, was als „2x“ bekannt ist. Da das Bild mit einer Breite von 640 Pixeln auf der Website verbleibt, erhöhen Sie die Dichte des Pixels, indem Sie ein Bild verwenden, das doppelt so groß ist.
Wenn Sie ein Bild verwenden, das nicht retinafähig ist, optimieren Sie es für die Anzeige auf der Retina. Dies kann erreicht werden, indem ein Bild mit 4-facher Auflösung verwendet wird, das auch als „4-fache Auflösung“ bezeichnet wird. Trotz der Breite der Grafik von 1024 Pixeln erscheint sie dennoch auf Ihrer Website, da sie viermal so groß ist.

Was ist ein Retina-fähiges WordPress-Theme?

Ein Retina-fähiges WordPress-Theme ist ein Theme, das für die Arbeit mit Geräten mit einem hochauflösenden Retina-Display entwickelt wurde. Das bedeutet, dass das Design auf Geräten wie iPhone und iPad scharf und klar aussieht. Retina-fähige Themen werden immer beliebter, da immer mehr Menschen Retina-Geräte verwenden.

Bitte finden Sie die Liste unten, wenn Sie nach reaktionsschnellen oder Retina-fähigen WordPress-Designs suchen. Diese Themen sind im Großen und Ganzen einfach zu verwenden, sehen auf Desktops, Tablets und Smartphones gut aus und erfordern keinen großen Aufwand von Ihrer Seite. Sie können jeden beliebigen Seitenersteller verwenden, um ein beliebiges Layout mit ihnen zu erstellen. Inovado, ein Retina-fähiges WordPress-Theme, bietet eine Fülle leistungsstarker Anpassungsoptionen. Ein weiteres Premium-WordPress-Theme ist Superhero, das für Unternehmer und Startups entwickelt wurde. Dieses WordPress-Theme ist dank eines sauberen Grid-Systems retinafähig und reaktionsschnell. Wiz, ein vielseitiges Thema, kann von Unternehmen jeder Größe, Start-ups und kleinen Organisationen verwendet werden.

Ein Design-Anpasser macht es einfach, das Pin Maker – Responsive WordPress Blog -Design einzurichten und anzupassen. Dieses WordPress-Theme hat HTML5 / CSS3-Inhalte und basiert auf Twitter Bootstrap. Es ist Retina-fähig, Cross-Browser-kompatibel und vollständig reaktionsschnell. Das Prothoma – Business WordPress Theme kann von einer Vielzahl von Unternehmen verwendet werden, einschließlich Digitalagenturen und Unternehmen. Pin Auto Spa ist ein WordPress-Theme mit automatischer Detaillierung. Dieses Retina-fähige WordPress-Theme ist ideal für Autowaschbetriebe, Autoreparatur- und Mechanikwerkstätten sowie Autodienste. Legatus ist eine ideale Wahl für Blogs, Online-Magazine, Online-Zeitungen und andere Publikationen, da es responsives Design bietet.

Aktivieren Sie Retina-Bilder für eine übersichtliche Website

Klicken Sie nach der Installation des Plugins im WordPress-Adminbereich auf die Registerkarte „Darstellung“. Eine Option „ Retina-Bilder “ befindet sich im Abschnitt „WP Retina 2x“ der Seite. Um Retina-Bilder zu aktivieren, gehen Sie auf die Schaltfläche „Aktivieren“.

Wie füge ich ein Retina-Bild zu WordPress hinzu?

Das Hinzufügen eines Retina-Bildes zu WordPress ist ein zweistufiger Prozess: Zuerst müssen Sie Ihrer Medienbibliothek ein Bild mit höherer Auflösung hinzufügen, und dann müssen Sie der Datei functions.php Ihres Themes eine Codezeile hinzufügen. Um Ihrer Medienbibliothek ein Bild mit höherer Auflösung hinzuzufügen, laden Sie einfach eine Kopie Ihres Bildes hoch, die doppelt so groß ist wie Ihr normales Bild. Wenn Ihr normales Bild beispielsweise 400 x 300 Pixel groß ist, sollte Ihr Retina-Bild 800 x 600 Pixel groß sein. Sobald Sie Ihr Retina-Bild in Ihrer Medienbibliothek haben, müssen Sie der Datei functions.php Ihres Designs eine Codezeile hinzufügen. Diese Codezeile weist WordPress an, das Retina-Bild Retina-Geräten bereitzustellen: add_filter( 'wp_get_attachment_image_src', 'retina_support_src' ); function retina_support_src( $image ) { $image[0] = str_replace( '.jpg', '@2x.jpg', $image[0] ); gib $bild zurück; } Wenn dieser Code vorhanden ist, stellt WordPress das Retina-Bild automatisch jedem Retina-Gerät bereit, das Ihre Website besucht.

WordPress Retina-Bilder

Angenommen, Sie möchten Tipps zum Erstellen von Retina-Bildern für WordPress: Wenn Sie Bilder für Ihre WordPress-Website erstellen, achten Sie darauf, Versionen zu erstellen, die doppelt so groß sind wie Ihre Standardbilder. Wenn Ihr Standardbild beispielsweise 400 Pixel breit ist, erstellen Sie ein Retina-Bild mit einer Breite von 800 Pixel. Benennen Sie Ihre Bilder nach dem, was sie sind, und hängen Sie dann „@2x“ an den Namen der Retina-Bilddatei an. Wenn Ihr Standardbild also „logo.jpg“ heißt, würde Ihr Retina-Bild „[email protected]“ heißen. Achten Sie darauf, Ihre Retina-Bilder zu komprimieren, damit sie Ihre Website nicht verlangsamen. Das ist es! Indem Sie diese einfachen Tipps befolgen, können Sie sicherstellen, dass Ihre Bilder auf allen Geräten, einschließlich Retina-Geräten, großartig aussehen.

Wenn Sie keine Retina-Bilder implementieren, wird Ihre Website für alle Benutzer langsamer. Die Fläche der Pixel ist die gleiche wie in einem Standardbild, was zu schärferen und helleren Bildern führt. Wenn ein modernes Nicht-Apple-Gerät das @2x-Bild anzeigt, wird es als größeres Bild behandelt. Retina-Bilder werden mit WP Retina 2X generiert, dem am weitesten verbreiteten Retina-Bildgenerator für WordPress-Sites. Der Dienst bietet auch normale Bilder für Benutzer ohne Retina-Bildschirme. Woher wissen Sie, ob ein Bild auf einem dedizierten Display verfügbar ist, wenn Sie kein Apple-Gerät haben, um es zu testen? Chrome-Entwicklungstools können Sie dabei unterstützen.

Skalierbare Vektorgrafiken – Der beste Weg, um Retina-Bilder für Ihre Website zu erstellen.

Das WordPress-Retina-Bild ist ein hochauflösendes Bild, das auf einem 4K-Monitor, einem Windows 10-Laptop oder einem Tablet angezeigt werden kann. Sie können ganz einfach ein Retina-Bild Ihrer Website erstellen, indem Sie, wann immer möglich, Scalable Vector Graphics (SVG) verwenden. Wenn es um die Optimierung von Bildern für Retina-Displays geht, können Sie sie maximieren, indem Sie ein optimiertes Bild mit einer Breite von 1920 × 130 Pixel verwenden.