Eine super detaillierte Reise durch den Redesign-Prozess einer kompletten Website. Diese sehr Website, um genau zu sein.
Es ist Zeit, unser *Design* tatsächlich in WordPress zu übertragen. Fangen wir am besten von oben nach unten an und beginnen mit dem Header. Abgesehen davon, dass es ein logischer Startpunkt ist, bedeutet dies, dass wir uns Dinge wie den `<head>` ansehen werden...
Der große Umzug nach WordPress ist im Gange! Wir schließen die Datei header.php ab und wechseln zu index.php. index.php ist für unsere Homepage zuständig. Die erste Zeile dieser Datei ist eine PHP-Funktion get_header(), die im Wesentlichen nur ...
Wir fahren fort, Code von unserem statischen Mockup auf unsere WordPress index.php-Seite zu portieren. Wir optimieren "den Loop" ein wenig, um genau das auszugeben, was wir wollen.
Wir gehen weit genug auf der Seite nach unten, wo WordPress-Funktionen wie `get_sidebar()` angezeigt werden ...
Wir beginnen damit, einige Bildpfade zu korrigieren. Ich mache immer eine Unterscheidung bei der Verwendung von Bildern innerhalb eines WordPress-Themes. **Gehört dieses Bild zu diesem speziellen Theme? Oder wäre es sinnvoll, es in einem beliebigen Theme zu verwenden** ...
Wenn wir uns entscheiden müssten, ist die Ansicht eines einzelnen Blog-Posts wahrscheinlich die wichtigste Vorlage auf der Website. Wir haben ein statisches Mockup einer Blog-Post-Seite, also arbeiten wir daran, es in WordPress zu übertragen. ...
Ich habe mich darauf gefreut, mit dem Galeriebereich der Website zu beginnen. Es ist einer der Bereiche, die in Version 9 besonders schlecht waren. Er wird zwar nicht sehr stark besucht, aber vielleicht können wir das ändern. Ich genieße ...
Wir haben den Galeriebereich in WordPress eingerichtet, er gibt das aus, was wir brauchen, aber es gibt noch fast keine Formatierung auf der Seite.
Wir beginnen damit, den Code im ... durchzugehen.
Wir machen uns daran, den Balken unter dem Galerie-Header zu erstellen. Dieser Balken hat eine beträchtliche Aufgabe. Er sagt den Leuten, wo sie sich befinden und was sie betrachten (Brotkrümel, auf einfache Weise). Er wird auch Paginierung, eine Schaltfläche und ... enthalten.
In diesem Video nehmen wir eine Reihe von Anpassungen an dem Balken vor, den wir mit den meisten Funktionen der Galerie eingerichtet haben. Design ist doch alles, oder?
Wir passen etwas Polsterung an, damit die Dinge übereinstimmen ...
Jeder Screenshot (oder jedes Video) in der Galerie hat eine eigene, individuelle Seite. Sie erreichen sie ganz einfach, indem Sie auf das Bild selbst klicken. Wir wollen diese Seite so überzeugend wie möglich gestalten. Wir werden daran in ... arbeiten.
In diesem Screencast verbringen wir etwas Zeit damit, darüber nachzudenken, wie eine einzelne Galerie-Screenshot-Seite aussehen wird. Es gibt einige Daten, von denen wir bereits wissen, dass wir sie haben. Wir haben einen Titel. Wir haben eine Beschreibung. ...
Hier haben wir ein Photoshop-Mockup, von dem wir ausgehen können, während wir die Vorlage für die individuelle Galerie-Seite weiter erstellen.
Zuerst haben wir die Links "Nächste" und "Vorherige" gestylt. Sie befinden sich in einer absolut positionierten Box im ...
Wir haben all diese Zeit in unserem statischen Mockup damit verbracht, clevere JavaScript zu erstellen, die die Bilder in der Galerie "sanft laden" würden. Jetzt, wo wir die echte Galerie mit echten Bildern haben, ist das weg.
Im Grunde müssen wir ...
Der Suchbereich im Header "funktioniert" in dem Sinne, dass er gestaltet ist und man ihn öffnen und schließen kann und all das. Aber er sucht noch nicht wirklich. Das ist ziemlich wichtig, oder?
Auf dieser Website verwenden wir Google ...
Alle unsere Google Custom Search Engines sind eingerichtet (wir haben eine für jeden Bereich der Website eingerichtet). Unsere Benutzeroberfläche für die Suche ist bereit. Wir haben Vorlagen für jede Unterseite mit Suchergebnissen bereit zum ...
Die Suche funktioniert! Nur die Vorlage, auf der man landet, ist noch nicht ganz richtig. Wir müssen die Vorlage optimieren, damit sie richtig aussieht und zum Stil der Website passt.
Die Vorlage, die die Suche zu Beginn verwendet, ist ziemlich ...
Der Almanac wurde in Version 9 eingeführt und nie ganz fertiggestellt. Er wird aber jeden Tag besser. Also werden wir in Version 10 so gestalten, dass er als "fertig" angenommen wird.
Wir schauen uns das bestehende Design von Version 9 an, ...
Dies ist eine besonders **EMPIRE STRIKES BACK** thematisierte Episode der v10 Redesign-Serie!
Alles beginnt gut. Wir beginnen damit, einige Dinge von unserem statischen Mockup in unsere WordPress-Vorlage zu übertragen. Wir haben den Header, der in ... funktioniert.
Dies ist eine besonders **RETURN OF THE JEDI** thematisierte Episode der v10 Redesign-Serie!
Wir sind mit dem letzten Screencast völlig besiegt zurückgeblieben. Wir haben versucht, wp_list_pages() zu verwenden, um eine Navigation für die Homepage unseres Almanac-Bereichs auszugeben. ...
Nachdem wir uns durch das Hinzufügen der richtigen Inhalte für die Homepage des Almanachs gekämpft haben, können wir nun mit der tatsächlichen Formatierung mit CSS beginnen.
Wir haben uns für eine Schreibschrift für einige Teile dieses Designs entschieden. Wir schauen uns ... an.
Wir springen hier nur ein kleines bisschen vorwärts. Dies ist eine ziemlich umfassende Screencast-Serie, aber sie dauert nur etwa 40 Stunden und natürlich ist dieses eigentliche Projekt eher ein paar hundert Stunden. In diesem Fall ist der Sprung ...
In diesem Screencast schließen wir den Almanac-Bereich ab. Es gibt eine ziemlich klare Hierarchie im Almanac. Sie lautet
Startseite Almanac Startseite Eigenschaft oder Selektor Buchstabenseite
Jeder dieser Schritte hat eine eigene Ansicht. Bisher ...
Zeit, sich dem Snippets-Bereich zu widmen! Das heißt, dem eigentlichen Inhaltsbereich. Wir haben bereits den Header eingerichtet. Der Snippets-Bereich ist sehr beliebt. Ohne tief in die Analyse einzutauchen, weiß ich aus den sozialen Medien und ...
Wir haben jetzt ein Photoshop-Design für die Homepage des Snippets-Bereichs. Sie ist viel besser zu durchsuchen als zuvor, behält aber den Regenbogen-Geist bei, den sie vorher hatte. Jetzt können wir uns damit befassen, tatsächlich ...
Wir haben alle benötigten Inhalte auf dieser Seite ausgegeben und den Header platziert. Jetzt können wir die Inhalte mit CSS in das Design einarbeiten, das wir in Photoshop haben.
Eine Sache, die wir gemacht haben, war die ...
Wir sind dem Abschluss des Baus der Homepage des Snippets-Bereichs der Website ziemlich nahe. Sofort beginnen wir mit der Optimierung von Dingen und bringen mehr Zeug in Form.
Wir haben eine seltsame Erfahrung, bei der das absolut positionierte Pseudo-Element nicht ...
Da das Design für den Snippets-Bereich "fertig" ist, können wir uns nun mit der Interaktivität (lies: JavaScript) befassen.
Wir fügen ein super lausiges Rollover für die Links links hinzu, nur damit wir etwas haben, aber wir wissen, dass wir das ändern werden ...
Wir beginnen damit, uns einige der mühsamen Arbeiten anzusehen, die ich im Hintergrund erledigt habe, um einige Dinge fertigzustellen, die erledigt werden mussten. Wie das Hinzufügen der restlichen wp_list_pages()-Aufrufe, um den Rest der ... auszugeben.
Ich freue mich sehr darauf, am Kommentarbereich für diese Website zu arbeiten. CSS-Tricks beherbergt einige exzellente Diskussionen, dank all der großartigen Leute. Die Gestaltung des Kommentarbereichs ist wichtig, da er diese großartigen Diskussionen hervorheben und ... beibehalten muss.
Wir tauchen hier in Photoshop ein und gestalten den Kommentarbereich. Das heißt, die einzelnen Kommentare selbst (im Gegensatz zum Kommentarformular).
Wir schnappen uns einen Avatar, mit dem wir arbeiten können. Wir werden den Gravatar-Dienst ... verwenden.
Das Design für die Kommentare mag sehr einfach aussehen. Und das ist es auch! Aber ich denke, einfach ist in diesem Fall effektiv. Kommentare sind ein so wichtiger Teil von CSS-Tricks, dass ich möchte, dass sie sehr gut lesbar und komfortabel sind.
Jetzt gehen wir ...
Ganz am Ende des letzten Screencasts haben wir festgestellt, dass unser Photoshop-Design, so einfach es auch ist, ein Problem hat, das mit Code zu schwer zu überwinden sein wird. Antworten auf Kommentare leben innerhalb derselben ...
In diesem Screencast springen wir zurück zu Photoshop und gestalten das Kommentarformular selbst. Das heißt, die Eingabefelder und das Textfeld, die Benutzer ausfüllen müssen, um einen Kommentar zu hinterlassen. Dies wird standardmäßig am Ende des Kommentars platziert ...
In diesem Screencast werden wir das Kommentarformular in HTML/CSS erstellen. Die Markup für das Kommentarformular befindet sich in der Datei comments.php in unserem Theme. Wir suchen nach dem `
Wir werden eine neue Werbezone auf der Website hinzufügen, die von Google AdSense betrieben wird. Wir haben vor einiger Zeit eine BuySellAds-Zone entfernt, also ist es nicht so, dass wir einfach nur neue Anzeigen einfügen, bis ...
Die letzten verbleibenden Header sind eingetroffen! Wir können diese nun fertigstellen und alle unsere benutzerdefinierten Header sind bereit. In diesem Screencast arbeiten wir an den benutzerdefinierten Headern für den Demo-Bereich, erstellt von John Neiner.
Interessanterweise, John ...
Nach der seltsamen Verwirrung im letzten Video darüber, welchen Header wir eigentlich gemacht haben, werden wir dieses Mal wirklich den benutzerdefinierten Header für die Angebotsseite implementieren! Dieser wurde von Meg Hunt erstellt.
Wie ...
In diesem Screencast fügen wir der Website ein neues Plugin hinzu, das uns die Möglichkeit gibt, die Themes auf der Live-Website zu wechseln, aber nur damit wir (als Administratoren) sie sehen können, nicht normale Besucher.
Bevor wir ... hinzufügen
Ich glaube, ich habe in einem früheren Video gesagt, dass wir alle Header fertiggestellt haben. Nur ein Scherz! Es ist noch einer übrig! Dieser ist für den Video-Bereich und wurde von Alyssa Nassner erstellt. Wir haben ihn zum Laufen gebracht ...
In diesem Screencast beginnen wir damit zu besprechen, wie wir den Mitgliedschaftsbereich von CSS-Tricks aufbauen werden. Ein Teil des Kickstarters, der diese ganze Sache erst ermöglicht hat, war das Versprechen, dass Kickstarter-Unterstützer Zugang zu einem privaten ... erhalten würden.
© .