Advertisement
  1. Code
  2. Theme Development

Erstellen eines Mobilen Ersten Ansprechbaren WordPress-Themas

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Die Themenerstellung ist das Herzstück von WordPress. Dies ist die Technik, mit der Sie maßgeschneiderte Websites für sich selbst oder Ihre Kunden erstellen. Sie ist eine wichtige Fähigkeit für alle, die mit WordPress entwerfen und entwickeln möchten.

Immer mehr WordPress-Themes sind jetzt ansprechbar - sie verenden CSS-Medienabfragen, um sich an unterschiedliche Bildschirmbreiten anzupassen, das Layout anzupassen und Design- und Schnittstellenänderungen vorzunehmen, damit Websites, die mit dem Theme erstellt wurden, auf einer Reihe von Geräten und Geräten leichter zu lesen und zu interagieren sind Bildschirmgrößen.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie ein Mobile First WordPress-Theme erstellen, das mit dem Styling für die kleinsten Bildschirme beginnt und nach oben funktioniert.


Was benötigen Sie für dieses Tutorial?

In diesem Tutorial werde ich ein WordPress-Theme mit minimalem Styling nehmen und es dann so stylen, dass es zuerst mobil ist. Das endgültige Design wird sehr einfach sein - die Idee ist, die Bausteine des Inhalts und des Layouts abzudecken, und Sie können anschließend Ihre eigenen Design-Goodies hinzufügen, wenn Sie möchten.

Um die Schritte in diesem Tutorial ausführen zu können, benötigen Sie Folgendes:

  • Ein Text- oder Code-Editor. Wenn Sie noch keinen haben, sind sowohl TextWrangler als auch Kompozer kostenlos.
  • Wenn Sie lokal entwickeln, MAMP, WAMP oder XAMPP, damit Sie PHP und MySQL ausführen und lokal mit WordPress arbeiten können.
  • Wenn Sie remote entwickeln, verwenden Sie einen FTP-Client wie FileZilla.
  • Eine lokale WordPress-Installation (oder eine Remote-Installation, die Sie gerne zum Testen verwenden)

Ich gehe davon aus, dass Sie bereits mit der Installation und Arbeit mit WordPress vertraut sind. Ich werde an einer Remote-WordPress-Installation arbeiten
und geben Sie Links, während ich weiter gehe.

Sofern Sie kein eigenes Thema haben, an dem Sie arbeiten, benötigen Sie auch den Startcode für das Tutorial. Sie können mein Thema unter http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/ sehen und den Code für das Thema in verschiedenen Phasen seiner Entwicklung von xxx herunterladen [wird basierend auf dem Nettuts+ Download-System hinzugefügt].


Bevor wir anfangen: Was ist zuerst mobil?

Mobile First ist ein Begriff, der zuerst von Luke Wroblewski geprägt wurde. Es bezieht sich auf die
Strategie, die Art und Weise, wie wir Websites und Themen gestalten, auf den Kopf zu stellen. Anstatt mit einem Desktop-Design zu beginnen und es dann für mobile Geräte anzupassen, arbeiten wir in die andere Richtung - wir entwerfen und codieren zunächst für mobile Geräte und fügen dann hinzu, was für größere Bildschirme erforderlich ist. Dies hat einige Vorteile:

  • Es ist schneller - Inhalte oder Stile, die auf kleinen Bildschirmen nicht benötigt werden, werden nicht an sie gesendet. Dies kann schneller sein, als es nur auszublenden oder zu überschreiben.
  • Es verändert die Art und Weise, wie wir Inhalte planen. Indem wir uns auf kleine Bildschirme konzentrieren, konzentrieren wir uns auf das, was wirklich wichtig ist, und nicht auf das, was wir einbeziehen, weil wir über ausreichend Platz verfügen. Das Entwerfen auf diese Weise kann sich drastisch auf das spätere Desktop-Design auswirken.

1. Unser Startthema

Auf das Startthema wird nur ein minimales Styling angewendet, und es gibt noch überhaupt kein Layout-Styling - das wird hinzugefügt, wenn wir das Tutorial durcharbeiten.

Die Elemente, die das Thema enthält, werden unten gezeigt:

01-theme-doctree.jpg01-theme-doctree.jpg01-theme-doctree.jpg

Derzeit sieht das Thema auf einem Smartphone folgendermaßen aus (d. H. Bei einer Bildschirmgröße von 320 x 480 Pixel):

02-startingtheme-320px-screen.png

Da ich noch keine Breiten angewendet habe, sollte die Größe der Site auf kleinere Bildschirme geändert werden. Dies ist jedoch nicht der Fall, da das Smartphone sie so anzeigt, als wäre sie 960 Pixel breit. Das erste, was Sie tun müssen, ist, Smartphones anzuweisen, die Site in der tatsächlichen Breite des Bildschirms anzuzeigen.


2. Einstellen der Bildschirmbreite

Um Smartphones anzuweisen, sich in Bezug auf die Bildschirmbreite gut zu verhalten, füge ich wie folgt eine Zeile in den Abschnitt <head> in header.php ein:

Dadurch werden Smartphones angewiesen, die Seite in der Bildschirmbreite des Geräts anzuzeigen, anstatt ein virtuelles Ansichtsfenster mit einer Breite von 960 Pixel zu erstellen. Dies ist das Standardverhalten.

Jetzt sieht das Thema auf einem kleinen Bildschirm so aus:

03-startingtheme-correct-screen-width.png

Wenn Sie zuvor reaktionsschnelle Stylesheets erstellt haben, jedoch keine Mobile First-Stylesheets, ist dies eine Offenbarung. Erinnern Sie sich an all das zusätzliche Styling, das Sie Ihren Medienabfragen für kleine Bildschirme hinzugefügt haben? Sie werden nur sehr wenig davon benötigen, da eine Seite mit minimalem Layout-Styling auf Mobilgeräten bereits besser aussieht als auf dem Desktop, wie Sie auf diesem Screenshot mit einer Breite von 1024 Pixel sehen können:

04-starting-theme%20desktop.png04-starting-theme%20desktop.png04-starting-theme%20desktop.png

Aber ich muss noch etwas Layout-Styling für kleine Bildschirme hinzufügen, was der nächste Schritt ist.


3. Gestalten Sie die Hauptlayoutblöcke für kleine Bildschirme

Ich füge zunächst einige Breiten und Gleitkommazahlen für die Hauptelemente hinzu, um sicherzustellen, dass sie sich über den Bildschirm erstrecken. Ich füge einige Breiten und eine clear: both Deklaration zu den relevanten Elementen:

Um zu vermeiden, dass das Design in den kleinen Bildschirm gedrückt wird, füge ich einigen Elementen Polster hinzu:

Beachten Sie, dass dies die einzigen horizontalen Werte sind, die ich in Pixel definieren werde. Dies geschieht, weil ich nicht möchte, dass der Abstand mit zunehmender Bildschirmgröße zu groß wird.

Jetzt sieht die Site weniger überfüllt aus und die Hauptelemente werden untereinander angezeigt:

05-mobile-padding-applied.png

Als nächstes räume ich die Widget-Bereiche auf und verbessere die Navigation.


4. Fügen Sie zusätzliches Styling für kleine Bildschirme hinzu

Die Navigation muss sich über die Breite des Bildschirms erstrecken, und ich möchte jeden Menüpunkt zentrieren, daher füge ich dem Menü einige Stile hinzu:

Dies gibt mir ein viel schlauer aussehendes Menü:

06-centred-menu.png

Die Widget-Bereiche liegen alle ziemlich nahe beieinander und es ist schwer zu erkennen, wo einer endet und ein anderer beginnt. Ich werde einige Ränder und Polster hinzufügen, um das zu beheben:

Als nächstes die Fußzeilen-Widgets. Ich werde ihnen auch etwas Ähnliches tun:

Dies fügt eine gewisse Trennung zwischen meinen Widgets hinzu:

07-widgets-border.png

Ich habe jetzt ein einfaches Layout für mein Thema auf kleinen Bildschirmen mit einigen Farben, Rändern, Rändern und Polstern, um die Dinge voranzutreiben. Ich werde hier kein zusätzliches Styling hinzufügen, da dies das Thema auf Mobilgeräten verlangsamen könnte und ich glaube nicht, dass es auf kleinen Bildschirmen immer notwendig ist. Der nächste Schritt besteht also darin, Medienabfragen zu erstellen.


5. Fügen Sie einige Medienabfragen hinzu

Für dieses Thema werde ich drei zusätzliche Bildschirmgrößen auswählen:

  • 600px breit und höher, einschließlich Tablets im Hoch- oder Querformat sowie Desktop-Bildschirmen
  • 800px breit und höher, einschließlich Tablets im Querformat und Desktops
  • 1025px breit und höher, was alle bis auf die kleinsten Desktop-Bildschirme umfasst. Ich gehe absichtlich ein Pixel über 1024px, damit große Tablets von dieser Medienabfrage nicht betroffen sind.

Möglicherweise haben Sie festgestellt, dass meine Medienabfragen nicht alle auf der Breite eines bestimmten Geräts basieren. Dies liegt daran, dass mit zunehmender Reichweite von Geräten und Bildschirmbreiten die Ausrichtung auf bestimmte Geräte weniger zuverlässig ist als das Festlegen von Medienabfragen an dem Punkt, an dem das Layout davon profitiert. Ich habe das Layout getestet, indem ich die Größe meines Browserfensters geändert habe. Bei einer Breite von 600 Pixel sieht es folgendermaßen aus:

08-mobile-first-theme-at-600px.png08-mobile-first-theme-at-600px.png08-mobile-first-theme-at-600px.png

Meiner Ansicht nach sieht das Design bei dieser Breite falsch aus und kann von einigen Layoutänderungen profitieren.

Zunächst füge ich meine Medienabfragen am Ende des Stylesheets hinzu:

Beachten Sie, dass ich die min-width und nicht die max-width verwendet habe, als würden Sie zuerst den Desktop gestalten und Medienabfragen für kleinere Bildschirme schreiben.

Als nächstes gehe ich zum Styling für Tablet-Geräte über.


6. Fügen Sie im Porträtmodus das Styling für Tablet-Geräte hinzu

Ich möchte mein Layout verbessern, um den Bildschirmbereich auf diesen größeren Bildschirmen besser zu nutzen, und ich werde auch einige CSS-Verläufe hinzufügen, um das Design etwas ausgefeilter zu gestalten.

Erstens das Layout. In meiner Medienabfrage für Bildschirme mit 600 Pixel und mehr füge ich hinzu:

Dies fügt Floats und einige Ränder hinzu, um die Bildschirmbreite besser zu nutzen:

09-tablet-widgets.png09-tablet-widgets.png09-tablet-widgets.png

Ich werde jetzt die Navigation ändern, da das aktuelle Layout neben jedem Element viel Platz frei lässt und viel Platz einnimmt. Ich füge das folgende Styling hinzu, um eine horizontale Navigationsleiste zu erstellen:

Ich werde dem Menü auch einen Farbverlauf für diese Bildschirmgröße und höher hinzufügen:

Abhängig von den Geräten und Browsern, auf die ich abziele, könnte ich einige dieser Browserpräfixe weglassen, aber ich habe sie für andere Benutzer meines Themas belassen.

Daher habe ich jetzt ein verbessertes Layout für Tablets im Hochformat, wie im Screenshot gezeigt:

10-tablet-navigation-gradient.png10-tablet-navigation-gradient.png10-tablet-navigation-gradient.png

7. Fügen Sie im Querformat den Stil für Tablet-Geräte hinzu

Ich werde nur eine Änderung für Bildschirme dieser Breite vornehmen: Ich werde die Seitenleiste rechts vom Inhalt verschieben, da der Inhalt etwas gestreckt aussieht, wenn er sich über den gesamten Bildschirm erstreckt. Zu diesem Zweck füge ich der Medienabfrage, die auf eine min-width von 800 Pixel abzielt, Folgendes hinzu:

Dies macht ein paar Dinge:

  • Dadurch wird die Seitenleiste rechts vom Inhalt verschoben
  • Es ändert die Größe der Seitenleiste und des Inhalts und fügt Floats und eine clear Eigenschaft für das Layout hinzu
  • Es entfernt Floats auf den Widgets, sodass sie sich jetzt in einer Spalte befinden
  • Es entfernt den border-top aus dem ersten Widget, das es nicht mehr benötigt

Das Thema sieht jetzt auf einem Tablet im Querformat so aus:

11-tablet-landscape.png11-tablet-landscape.png11-tablet-landscape.png

8. Fügen Sie Desktop Styling hinzu

Wenn ich mein responsives Thema auf herkömmliche Weise erstellt hätte, zuerst Desktop, würde ich zuerst an dieser Bildschirmgröße arbeiten, aber hier arbeite ich zuletzt damit. Möglicherweise haben Sie inzwischen bemerkt, dass dies die Dinge sehr effizient macht. Meiner Erfahrung nach erfordert das Entfernen des Desktop-Stils in Medienabfragen für Mobilgeräte viel mehr Arbeit als das Optimieren meines mobilen Layouts für den Desktop.

Ich werde das Fußzeilenlayout so anpassen, dass alle vier Fußzeilen-Widget-Bereiche nebeneinander liegen, und der Kopfzeile ein Hintergrundbild hinzufügen. Dieses Bild ist für den Inhalt nicht entscheidend, dient jedoch zur Dekoration. Daher bin ich mit der Tatsache zufrieden, dass es nicht in meinem Markup enthalten ist.

Zunächst das Layout. Neben dem Anpassen des Fußzeilenlayouts füge ich dem body-Tag einen Wert für die max-width hinzu, um zu vermeiden, dass das Layout über die gesamte Breite sehr breiter Bildschirme gestreckt wird:

Das obige Styling wird in die Medienabfrage für Bildschirme mit einer min-width von 1025 Pixel aufgenommen und führt Folgendes aus:

  • Fügt dem Körper max-width hinzu
  • Passt die Breite und den rechten Rand der aside elemente in der Fußzeile an
  • Passt den Rand für geradzahlige Widget-Bereiche entsprechend den anderen Widget-Bereichen auf 2% an
  • Wenn Sie die Klasse verwenden, die dem vierten Widget-Bereich im Thema (.fourth) zugewiesen ist, wird der Rand auf 0 reduziert. Ich habe hier absichtlich eine Klasse anstelle des nth-child verwendet, da dies für die browserübergreifende Arbeit erforderlich ist

Wie sieht mein Thema auf dem Desktop aus?

12-desktop-version.png12-desktop-version.png12-desktop-version.png

Nicht schlecht. Zum Schluss füge ich meinem Header ein Hintergrundbild hinzu.

Dadurch wird mein Bild als Hintergrund mit einigen Auffüllungen hinzugefügt, um Platz dafür zu schaffen:

13-final-desktop-banner-image.png13-final-desktop-banner-image.png13-final-desktop-banner-image.png

Der Vorteil dieses Ansatzes besteht darin, dass dieses Image nur von Desktop-Computern heruntergeladen wird. Da es sich nicht um das Kerndesign oder die Medienabfragen für kleinere Geräte handelt, werden diese nicht verlangsamt. Die Verwendung von Bildern als Hintergrund hat jedoch Nachteile, insbesondere in Bezug auf die Barrierefreiheit. Daher ist es wichtig, diese Technik nur zu verwenden, wenn das Bild nur für das Design bestimmt ist und nicht Teil des Inhalts ist. Alternativ hätte ich eine kleinere Version des Bildes in mein Markup einfügen und CSS verwenden können, um dies auszublenden und eine größere Version desselben Bildes als Hintergrund für größere Bildschirme anzuzeigen.


Zusammenfassung

Ich habe jetzt ein ansprechendes Mobile First-Thema. Indem ich mit kleinen Bildschirmen anfing und mich nach oben arbeitete, reduzierte ich die Menge an Code, die zum Erstellen meines reaktionsschnellen Designs erforderlich war, und konnte sicherstellen, dass kein großes Bild an mobile Geräte gesendet wird.

Da immer mehr Entwickler und Websitebesitzer verlangen, dass ihre Websites reaktionsschnell sind, wird es von unschätzbarem Wert sein, reaktionsschnelle WordPress-Themes erstellen zu können. In diesem Tutorial habe ich gezeigt, dass es kein lästiger Prozess sein muss und nicht zu lange dauern sollte. Natürlich können Sie den Prozess weiterentwickeln und mobile spezifische Inhalte oder zusätzliches Styling für bestimmte Geräte hinzufügen, aber das ist etwas für einen anderen Tag!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.