Dieser Artikel wurde beigesteuert von PSDtoWP.net

Vielleicht wäre es am besten, hier mit dem Warum zu beginnen. Etwa ein Viertel aller Websites läuft auf WordPress, der Online-Blogging-Plattform. Dies macht es mit Abstand zu einem der beliebtesten Open-Source-Content-Management-Systeme auf dem Planeten.

Die überwiegende Mehrheit der Webdesigner verwendet immer noch Photoshop, um eine Website zu entwerfen, obwohl es Alternativen gibt. Dies bedeutet, dass viele Website-Designer Wege finden müssen, wie Sie PSD-Dateien in ein responsives WordPress-Theme konvertieren können!

Nun, das mag ziemlich einfach erscheinen. Das Konvertieren einer PSD-Datei in eine WordPress-Website ist jedoch nicht gerade einfach. Es erfordert viel mehr als nur Photoshop-Kenntnisse! Um Ihre PSD-Datei in ein responsives Theme zu verwandeln, das auf WordPress verwendet werden kann, benötigen Sie Kenntnisse über Front-End-Webentwicklungssprachen wie HTML, CSS und JavaScript sowie die Backend-Programmiersprache PHP.

Nun, da das Warum aus dem Weg ist, ist es Zeit, mit dem Wie fortzufahren! Obwohl das Wie sicherlich nicht einfach ist, kann es dennoch in fünf ziemlich einfach zu verstehenden Schritten erreicht werden!

Erster Schritt: Erstellen Sie das Webdesign

Fahren Sie mit Schritt zwei fort, wenn Sie Ihre Website bereits entworfen haben.

Das Erstellen einer Website umfasst viel mehr als nur das Erstellen eines Logos und das Einfügen eines Menüs, einer Seitenleiste, einer Fußzeile und des Inhalts. Die Teile in diesem Puzzle müssen in erster Linie erstellt werden, und der Prozess dieser Erstellung ist etwas, das nicht jeder so leicht tun kann.

Das Webdesign, das Sie erstellen, muss die perfekte Balance zwischen Form und Funktion sein, ein Webdesign, das eine großartige Benutzererfahrung bietet.

Forschung

Um ein Webdesign zu erstellen, das die Kriterien Aussehen und Funktionalität erfolgreich erfüllt, müssen Sie ernsthaft recherchieren. Zunächst einmal, wer ist Ihre Zielgruppe und was will Ihre Zielgruppe? Dies sind offensichtlich Schlüsselaspekte Ihrer Forschung.

Von anderen lernen

Ein weiterer Aspekt des Webdesigns, den Sie erforschen müssen, sind die Techniken, die Ihre Konkurrenten angewendet haben. Diese Konkurrenten sind wahrscheinlich besser etabliert als Sie, so dass Sie sicherlich viel von dem Design lernen können, das sie verwenden! Sobald Sie Ihre Nachforschungen angestellt haben und eine gute Vorstellung davon haben, wie Ihre Website aussehen soll, sollten Sie über die Funktionalität nachdenken. Welche Funktionen soll Ihr Webdesign besitzen?

Wireframe

Wenn Sie alles geklärt haben, schreiben Sie es auf Papier. Zeichnen Sie & Skizzieren Sie, wie Ihre Website aussehen soll, um eine visuelle Hilfe zu erhalten, wenn Sie sich vorwärts bewegen!

Design

Sobald Sie die physischen Skizzen / Wireframes erstellt haben, können Sie in den Kapitänsstuhl steigen und Photoshop starten. Das erste, was Sie tun müssen, bevor Sie ernsthaft beginnen, ist sicherzustellen, dass Sie ein spaltenbasiertes Raster wie XXgrid verwenden. Dadurch sieht Ihr Design wirklich aufgeräumt und ausgerichtet aus! Dies gilt nicht nur für die Ästhetik. Die Verwendung eines spaltenbasierten Rasters zum Erstellen eines ausgerichteten Designs erleichtert Ihnen oder Ihrem Front-End-Entwickler, der HTML und CSS entwickelt, die Erstellung eines optimierten, reaktionsschnellen Layouts für Tablets und Smartphones!

Bevor Sie mit dem nächsten Schritt fortfahren, denken Sie daran, dass Sie Ihre PSD-Designdateien in Ebenen organisieren müssen, d. H. Jeder Abschnitt sollte einen eigenen Ordner mit entsprechenden Titeln haben!

Schritt Zwei: Schneiden Sie die PSD

Sobald Sie ein Webdesign erstellt haben, mit dem Sie vollkommen zufrieden sind, ist es an der Zeit. Im Grunde, was Sie jetzt tun müssen, ist die PSD zu WordPress Prozess.

Websites werden heutzutage alle mit HTML5 und CSS3 erstellt. Diese sind weitaus besser als XHTML und CSS2, da anstelle aller Schaltflächen, Rahmen, Verläufe, abgerundeten Kanten und aller anderen Funktionen, die mit Bildern erstellt werden, sie als funktionale Teile der CSS3-Codierung erstellt werden. Daher wird das Schneiden der PSD-Datei im Grunde nur noch das Schneiden der Hintergrundbilder aus der PSD beinhalten!

Dazu müssen Sie die Datei entweder in Photoshop oder Illustrator öffnen, je nachdem, mit welcher Software Sie das Design erstellt haben. Wenn der Designer seine Arbeit richtig gemacht hätte, hätte er eine gut strukturierte Designdatei mit Ordnern und Ebenen erstellt, die es Ihnen leicht macht, das zu finden, was Sie brauchen. Studieren Sie das Webdesign und suchen Sie nach Bildern, von denen Sie glauben, dass sie geschnitten werden müssen. Dies sind im Grunde alle Bilder, die nicht mit CSS3 erstellt werden können, normalerweise das Logo und die Hintergrundbilder. Lesen Sie hier, wie Sie Bilder in Scheiben schneiden.

Sobald Sie diese Hintergrundbilder mit CSS ersetzen, werden Sie einen enormen Rückgang der Ladezeiten feststellen. Dies würde viele Benutzer auf Ihre Website locken, da der durchschnittliche Internetnutzer keine langen Ladezeiten aushalten kann!

Schritt drei: Erstellen Sie HTML, CSS3 und JavaScript (jQuery)

Sobald Sie die Bilder aus Ihrer PSD-Datei geschnitten haben, ist es Zeit, HTML5 und CSS3 zu erstellen. Als erstes müssen Sie einen neuen Ordner erstellen, in dem Sie einen Index erstellen.html und Stil.CSS. Erstellen Sie außerdem einen Unterordner mit dem Namen images oder img (je nachdem, was Sie bevorzugen) und platzieren Sie die extrahierten Bilder in diesem Ordner. Erstellen Sie einen anderen Ordner namens JavaScript oder js. Dies ist für später gedacht, sodass Sie alle JavaScript- und jQuery-Dateien an einem gut markierten Speicherort speichern können. Sobald Sie alle Ordner, Dateien und Unterordner erstellt haben, können Sie mit dem Erstellen von HTML5 und CSS3 beginnen.

HTML5

HTML5 ist eine relativ neue Sprache, die sowohl XHTML- als auch HTML-Funktionen besitzt. Diese Sprache wird im Wesentlichen verwendet, um die Grundstruktur des Dokuments sowie alle Elemente der Seite zu erstellen. HTML5 verfügt über separate Elemente für die verschiedenen Bereiche Ihrer Website, z. B. die <header>, die <nav>, die <side> sowie die <footer> Elemente (und vieles mehr), mit denen Sie ein übersichtliches, gut strukturiertes Dokument erstellen können, das universell lesbar ist. Hier sind einige ausgezeichnete Ressourcen, die Sie verwenden können, um Ihr Gedächtnis über HTML5 zu lernen oder aufzufrischen.

HTML-Ressourcen

W3Schools ist die Nummer eins Website für das Erlernen der Grundlagen von HTML5. Jedes Element und Attribut dieser Sprache wird anhand von Demos erklärt und gelehrt, was eine einfache Lernerfahrung ermöglicht.

Mozilla Developer’s Section – Die Leute hinter dem beliebten Browser Mozilla Firefox haben einen Entwicklerbereich auf ihrer Website. Sie können diesen Abschnitt verwenden, um viel über HTML5 durch die Tutorials zu lernen, die sie dort haben, ob Sie ein Anfänger oder ein fortgeschrittener Programmierer sind.

Web Design Tuts – Diese Website bietet viele verschiedene HTML5-Tutorials, von denen einige kostenlos und andere kostenpflichtig sind.

W3 – Diese Website ist verantwortlich für die Entwicklung aller offenen Webstandards, die erstellt wurden, um die Langlebigkeit des Webs zu gewährleisten. Hier finden Sie ausführliche Informationen zu HTML5 sowie zu den neuesten Entwicklungen.

W3 Validator – Sobald Sie Ihr HTML5 abgeschlossen haben, führen Sie es durch diesen Validator. Es wird Ihnen sagen, ob Ihr HTML5 die w3 Open Web Standards erfüllt!

CSS3

CSS bezieht sich auf Cascading Style Sheets, und CSS3 ist die neueste Version dieser Front-End-Sprache. CSS3 wird verwendet, um die nackten Knochen der mit HTML5 erstellten Elemente zu nehmen und sie zu formen, zu positionieren und zu stylen. Auf diese Weise können Sie ein konsistentes Webdesign erstellen, bei dem alle Elemente mit dem Gesamtdesign der Website übereinstimmen. Sobald Sie CSS3 verwendet haben, werden Sie feststellen, dass Ihr HTML5 viel sauberer und strukturierter ist, was es wiederum ermöglicht, viel schneller zu laden und von Suchmaschinen schneller indiziert zu werden. Im Folgenden finden Sie einige Ressourcen, die Ihnen helfen, Ihr Gedächtnis über CSS3 zu lernen oder aufzufrischen:

CSS–Ressourcen

W3 CSS – W3 ist auf den bekanntesten und renommiertesten Ressourcen für CSS3-Tutorials und Beispiele für die verschiedenen CSS3-Selektoren, Eigenschaften und Werte. Das Beste daran ist, dass jedes Tutorial hat eine ‚try it yourself‘ Seite, die Sie anwenden können, was Sie gelernt haben.

Learn CSS3 – Mozilla ist nicht nur der Schöpfer des Firefox-Browsers. Es ist auch ein ausgezeichneter Ort, um sich mit CSS3 vertraut zu machen und Ihr Wissen über die Sprache zu aktualisieren.

CSS Web Design Tuts – Diese Website enthält eine ganze Fülle von Tutorials, die Sie durchgehen können. Einige dieser Tutorials müssen bezahlt werden, andere sind jedoch völlig kostenlos und können Ihnen viel über CSS3-Selektoren, Eigenschaften und Werte beibringen.

W3 CSS – Diese Website ist ein großartiger Ort, um mit den neuesten CSS3-Nachrichten auf dem Laufenden zu bleiben, da dies die Community ist, die die CSS3-Webstandards entwickelt. Es ist auch ein großartiger Ort, um technische Informationen über die Sprache zu erhalten.

CSS Validator – Dies ist der Validator, über den Sie alle Ihre CSS3 ausführen sollten, bevor Sie die Website veröffentlichen. Dies ist, um sicherzustellen, dass Ihre CSS3 erfüllt die Web-Standards von W3!

Responsive Design

Das Internet hat seit seiner Gründung einen langen Weg zurückgelegt. Dies ist zum Teil auf das Aufkommen von Smartphones und Tablets und die Verbreitung dieser Art von Technologie in unserem täglichen Leben zurückzuführen. Aufgrund der immensen Beliebtheit dieser Geräte betrachtet ein erheblicher Teil der gesamten Internetnutzer Websites auf deutlich kleineren Bildschirmen als der durchschnittliche Laptop. Darüber hinaus interagieren sie mit diesen Websites nicht mit Cursorn, sondern mit ihren Fingern. Daher muss die moderne Website in der Lage sein, sich an die verschiedenen Arten von Geräten anzupassen, die es gibt. Hier kommt Responsive Design ins Spiel. Mit Responsive Design können Designer eine Website erstellen, die ihr gesamtes Layout basierend auf dem Gerätetyp anpassen kann, auf dem sie angezeigt wird.

Es ist eine gute Idee, vorher zu entscheiden, ob Ihre neue Website ein responsives Design haben soll oder nicht, bevor Sie mit der Erstellung von HTML5 und CSS3 beginnen. Dies liegt daran, dass Sie beim Codieren des responsiven Teils des Designs Ihrer Website mit CSS3-Medienabfragen arbeiten müssen. Mit diesen Medienabfragen können Sie verschiedene Texturen und Stile für verschiedene Bildschirmauflösungen definieren.

Denken Sie daran, niemals feste Breiten zu verwenden, sondern stattdessen Prozentsätze. Dies wird als flüssiges oder flüssiges Layout-Design bezeichnet, mit dem Sie Ihre Website nicht nur für die in Ihren Medienabfragen definierten Auflösungen, sondern auch für alle Auflösungen zwischen ihnen optimieren können. Dies ist ein großer Vorteil für Ihre Website, da die Smartphones, Tablets und Computer, die heute auf den Markt kommen, so viele verschiedene Größen und daher Auflösungen haben, dass Sie alle unterbringen müssen.

Responsive Resources

Hier sind einige großartige Ressourcen, die Sie verwenden können, um Ihr Gedächtnis aufzufrischen oder mehr über Responsive Design und alle damit verbundenen Codierungen zu erfahren:

Google Responsive – Dies ist eine großartige Ressource für diejenigen unter Ihnen, die neu im Responsive Design mit CSS3 Media Queries sind.

Prinzipien des responsiven Webdesigns – Lesen Sie diesen Artikel, um den Unterschied zwischen responsivem Webdesign und adaptivem Webdesign zu verstehen. Es hat einige großartige Beispiele, die Ihnen helfen, die Dinge im Detail zu verstehen!

Fluid Grids – Sie können diesen hervorragenden Artikel von Ethan Marcotte verwenden, um mehr über Fluid Grids und deren Verwendung zu erfahren. Versuchen Sie, die Beispiele im Artikel selbst zu verwenden!

Responsives Front-End-Framework

Wenn Sie nicht bereit sind, sich mit CSS3-Medienabfragen vertraut zu machen, oder wenn Sie einfach nicht genug Zeit dafür haben, versuchen Sie es stattdessen mit einem responsiven Front-End-Framework. Wenn Sie sich für die Verwendung eines Grid-Frameworks entscheiden, beachten Sie, dass Sie dasselbe Framework sowohl auf CSS als auch auf HTML anwenden müssen, da Sie mit vordefinierten Klassen und IDs arbeiten, um das mit HTML5 erstellte Framework mit CSS3 zu verbinden. Die Verwendung eines responsiven Front-End-Frameworks ermöglicht es Ihnen sicherlich, Ihre Website viel schneller zu entwickeln, aber auf der anderen Seite verlangsamt es auch die Ladezeiten Ihrer Website aufgrund der großen Menge an Code, die Sie nicht verwenden werden.

Einige der beliebtesten Front-End-Frameworks sind:

Bootstrap – Dieses responsive Framework ist relativ einfach zu implementieren und ein zusätzlicher Bonus ist, dass es ein CDN verwendet, um die Auswirkungen der Ladegeschwindigkeiten Ihrer Website zu reduzieren.

WENIGER – Dies ist eher ein adaptives CSS-Grid-Framework als ein responsives, mit dem Sie ein adaptives Layout erstellen können.

Foundation – Dies ist ein Front-End-Grid-Framework mit einer Dateigröße, die absolut winzig ist, um die Auswirkungen auf die Ladegeschwindigkeit Ihrer Website zu minimieren.

JavaScript (vs CSS3)

JavaScript ist derzeit eine der beliebtesten Programmiersprachen der Welt. Dies liegt an der Tatsache, dass es von einer Vielzahl von Browsern unterstützt wird und auch an der Tatsache, dass es Bibliotheken wie jQuery und Backend-Systeme wie Node enthält.js sowie Frameworks wie AngularJS. Kein Wunder, dass so viele Entwickler auf diese Programmiersprache schwören! In letzter Zeit ist JavaScript jedoch veraltet, da viele seiner Funktionen von CSS3-Animationen übernommen wurden, mit denen Sie Übergänge zwischen Stilen animieren können.

Javascript–Ressourcen

W3 – Dies ist ein ausgezeichneter Ausgangspunkt, wenn Sie JavaScript noch nicht kennen, dank des hervorragenden Tutorials, das auf dieser Website verfügbar ist.

jQuery – Sobald Sie etwas Erfahrung mit JavaScript haben, können Sie Bibliotheken wie diese verwenden, um viel einfacher zu programmieren. jQuery ist die beliebteste JavaScript-Bibliothek von einer Meile.

NodeJS – Wenn Sie Backend-Systeme bevorzugen, aber gleichzeitig JavaScript lieben, besuchen Sie diese Website.

AngularJS – Kombinieren Sie die gewaltigen Kräfte von HTML und Java mit diesem Framework und erhalten Sie einige dynamische Ansichten.

Schauen Sie sich unbedingt die folgenden Ressourcen an, bevor Sie JavaScript zum Animieren von Elementen auf Ihrer Website verwenden, während Sie wahrscheinlich auch CSS3 verwenden können:

CSS3–Animationen – Für unsere CSS3-Tutorials wenden wir uns erneut an w3schools. Lesen Sie die Demos auf dieser Website, um alle verschiedenen CSS3-Animationen zu verstehen.

Mozilla Animations – Erweitern Sie Ihr Wissen über CSS3-Animationen mit den neun Beispielen und Beispielen, die Mozilla bereitgestellt hat.

Schritt vier: Erstellen Sie die WordPress-Theme-Dateien

Nachdem Sie Ihre PSD-Designs erfolgreich in HTML5, CSS3 und JavaScript konvertiert haben, ist es Zeit für die Hauptkonvertierung: Verwandeln Sie Ihren HTML-Code in ein vollständig ansprechendes WordPress-Theme. Denken Sie daran, der WordPress-Vorlagenhierarchie zu folgen, um sicherzustellen, dass Ihre Themen tatsächlich funktionieren. Die allgemeine Reihenfolge ist, mit header zu beginnen.php, gefolgt von index.php, Fußzeile.php und Stil.CSS. Sie werden diese vier Vorlagen auf allen Seiten Ihrer Website verwenden.

Sobald Sie die Funktionsweise der Vorlagenhierarchie vollständig verstanden haben, müssen Sie die HTML-Dateien in Teile zerlegen. Sie können beginnen, indem Sie einen Ordner im Themenordner erstellen, den Sie in Ihrer WordPress-Installation finden, dessen Adresse /wp-content/themes / ist. Erstellen Sie den Dateiheader.php in diesem Ordner. Mit dieser Datei deklarieren Sie den Dokumenttyp sowie alle Elemente, die in die Kopfzeile Ihrer Seite gehören, z. B. Metas, Titel, Stylesheets, Javascripts usw. Wenn Sie damit fertig sind, erstellen Sie eine Fußzeile.php und fügen Sie alle Fußzeilenelemente in Ihr HTML-Dokument ein. Wenn das Design Ihrer Website eine Seitenleiste enthält, erstellen Sie eine Datei mit dem Namen Sidebar.php als auch und umfassen alle relevanten Codierung in dieser Datei.

Sobald Sie die Erstellung aller Elemente Ihrer Website in diesen Dateien abgeschlossen haben, müssen Sie mit der Erstellung Ihrer Homepage beginnen. Es gibt mehrere Möglichkeiten, dies zu tun. Sie können beispielsweise einfach einen Index erstellen.php, Startseite.php oder page-home.php, jede dieser Dateien wird für das geeignet sein, was Sie versuchen zu tun, so dass die endgültige Wahl ganz bei Ihnen liegt. Nachdem Sie mit dem Erstellen einer der drei Vorlagen für Ihre Homepage fertig sind, fügen Sie alle hinzu .PHP-Dateien, die Sie gerade erstellt haben. Nachdem Sie oben, unten und seitlich fertig sind, fügen Sie das HTML5 Ihrer Homepage dazwischen ein und Sie haben die Homepage Ihrer Website erfolgreich erstellt. Befolgen Sie einfach den gleichen Vorgang für alle Seiten Ihrer Website und Sie können mit dem nächsten und letzten Schritt fortfahren.

Fünfter Schritt: Verwenden Sie die in WordPress integrierten Tags und Funktionen

Sobald Sie das Thema für Ihr WordPress erfolgreich erstellt haben, müssen Sie nun sicherstellen, dass Sie Ihre Website im Admin-Bereich bearbeiten können, anstatt die Themendatei jedes Mal ändern zu müssen, wenn Sie etwas ändern möchten. Möglicherweise ist die beliebteste WordPress-Funktion, um alle Ihre Inhalte über das Admin-Panel bearbeitbar zu machen, das Hinzufügen der Funktion add_meta_box. Richten Sie einfach Meta-Boxen für den Inhalt auf jeder Seite ein und schon kann es losgehen!

Das Erstellen der Kernfunktionen Ihrer Website ist mit WordPress ziemlich einfach. Zum Beispiel kann die Anzeige von Informationen wie Links auf Ihren Websites einfach mit WordPress-Funktionen erfolgen. Überprüfen Sie einfach die Funktionsreferenzseite für WordPress, um alle verfügbaren Funktionen anzuzeigen.

Ähnlich bietet WordPress auch Template-Tags an. Dies sind im Wesentlichen Funktionen selbst, mit dem einzigen Unterschied, dass sie speziell für bestimmte Themen erstellt wurden, die sie effizienter machen.

WordPress-Menü

Wenn Sie sich im Admin-Bereich Ihrer Website anmelden, möchten Sie wahrscheinlich die Menüelemente in Menüs und Erscheinungsbild ändern, damit Sie sie nicht über das Admin-Bereich bearbeiten müssen. Alles, was Sie tun müssen, ist, die Menüliste der Vorlagendatei durch eine Zeile PHP zu ersetzen.

Es kann Situationen geben, in denen eine innere Seite eine andere Kopf- oder Fußzeile hat. Um diese Funktionalität zu Ihrer Website hinzuzufügen, müssen Sie lediglich bedingte Tags hinzufügen. Mit diesen können Sie für ausgewählte Seiten oder Beiträge unterschiedlichen Code anwenden.

Sobald Ihre WordPress-Website auf Ihrem Entwicklungsserver läuft, müssen Sie sie nur noch auf Ihrem Live-Server installieren. Hier ist ein Artikel, in dem ausführlich erklärt wird, wie Sie eine WordPress-Site Schritt für Schritt verschieben. Befolgen Sie einfach alle sechs Schritte zur Verfügung gestellt und Sie werden Ihre Website und läuft auf einem Live-Server in kürzester Zeit.