Share
Wenn die meisten Leute über WordPress nachdenken, denken sie über Blogs nach. Wenn Sie sich die Titelseite von WordPress.org ansehen, wird auch viel über das Bloggen gesprochen. Was sie Ihnen nicht sagen, ist, dass WordPress auch ein sehr leistungsfähiges CMS ist. Sie müssen es nur richtig einrichten. Es kann auch ein bisschen schwierig sein, sich einzurichten und so zu arbeiten, wie Sie es möchten. Hier komme ich ins Spiel. In dieser dreiteiligen Tutorial-Serie werde ich Sie durch die drei Schritte der Verwendung von WordPress als CMS führen.
Dieses Tutorial enthält einen Screencast für Tuts + Premium-Mitglieder.
Der erste Teil wird ein einfaches Layout in Photoshop entwerfen. Teil zwei beinhaltet das Codieren der Website als statische HTML-Vorlage. Der letzte Teil führt Sie durch die Einrichtung von WordPress und die Anwendung unseres neuen Designs auf das Vorlagensystem.
Wenn Sie ein erfahrener Web-Entwickler sind, sind diese ersten beiden Teile zwar für Sie ein Peanuts, aber tun Sie sich selbst einen Gefallen und überfliegen Sie einfach den Inhalt. Sie wissen nie, Sie können etwas Neues oder eine andere Art, Dinge zu tun, aufgreifen.
Sie haben wahrscheinlich das Lesen satt, also machen wir uns die Hände schmutzig!
Öffnen Sie Photoshop und erstellen Sie eine neue leere Leinwand. Normalerweise wähle ich einfach 1024 x 768 aus dem Dropdown-Menü.
Ich habe eine schnelle Farbpalette erstellt und diese als oberste Ebene gesperrt. Auf diese Weise kann ich darauf verweisen, ohne mir Sorgen zu machen, dass ich es im Kampf verlieren könnte.
Füllen Sie Ihren Hintergrund mit der hellsten Farbe und machen Sie sich bereit, einige Hilfslinien zu erstellen.
Wir werden Leitfäden erstellen, mit denen wir das Erscheinungsbild unserer Website vorab gestalten können, bevor wir mit der Erstellung von grafischen Elementen beginnen. Wenn Sie keine Lineale eingeschaltet haben, drücken Sie ⌘-R, um sie einzuschalten.
Wenn Sie mit der Maus über das Lineal fahren, klicken Sie auf den Cursor und bewegen Sie ihn weg. Daraufhin ändert sich der Mauszeiger. Eine horizontale oder vertikale Linie folgt der Maus. Dies ist ein Leitfaden. Lass los um weiter zu erstellen.
Wir werden die Seitenleiste, den Header und den Hauptinhalt gestalten. Lass deine Führer wie meine aussehen oder etwas wie meine. Wir haben sowohl die Seitenleistenränder als auch die Polsterung angelegt, die wir einschließen möchten.
Jede Site benötigt ein Logo. Das Logo wird direkt über der Seitenleiste angezeigt. Wenn Sie ein Logo haben, platzieren Sie es jetzt dort, andernfalls erstellen wir ein Sprechblasenlogo. Warum? Ich mag Sprechblasen.
Ich habe ein wenig soliden Schlagschatten direkt darunter hinzugefügt. Geben wir unserer Website einen Namen. Ich werde es Gear'd nennen und ein kleines Gear-Icon verwenden.
Unsere Benutzer benötigen einen Weg, um auf unserer Website zu navigieren. Wir werden unsere Navigation über unserem Hauptinhalt platzieren und nach rechts ausrichten. Nehmen Sie unser Textwerkzeug heraus und schreiben Sie einige Navigationselemente aus.
Wir werden so tun, als würden wir eine Dienstleistung verkaufen. Nehmen wir an, dass gear'd eine Web-App ist und Benutzer sich anmelden können, um verschiedene Mitgliedschaften zu erwerben.
Unsere Navigation umfasst Informationen, Pläne und Preise, FAQ und Kontakt. Wir möchten, dass der Benutzer weiß, auf welcher Seite er sich gerade befindet. Wir können also einen aktiven sowie einen Hover-Status für unsere Navigationsschaltflächen festlegen.
Dafür habe ich gerade ein abgerundetes Quadrat mit einer helleren Textoption erstellt. Der Schwebeflugzustand hat eine helle Farbe, die etwas größer als die Hintergrundfarbe ist.

Unsere Web-App bietet einige Mitgliedschaftsstufen, durch die der Benutzer navigieren kann. Wir möchten nicht wirklich 100 verschiedene Hauptnavigationselemente haben, weil es hässlich ist. Hier kommt die Sidebar ins Spiel.
Nehmen wir das gleiche Styling an, das wir für die Hauptzustände der Navigation, den Hover-Status und den aktiven Status verwendet haben, und wenden Sie sie auf einige Navigationsleisten in der Seitenleiste an. Die Sidebar-Navigation wird unsere sekundäre Navigation für die Hauptseite enthalten, auf der wir uns befinden. Dazu gehören Informationen zu Preisen und zur Anmeldung oder verschiedene Bereiche von Informationen oder Kontakt.
Die Seite sieht etwas leer aus, wir können einige Inhalte hinzufügen.
Wir haben darunter einige Kopfzeilentexte sowie Mini-Kopfzeilentexte hinzugefügt. Nur ein weiterer visueller Hinweis darauf, wo sich der Benutzer gerade befindet.
Als Nächstes haben wir eine abgerundete Box über die gesamte Breite unseres Inhaltsbereichs hinzugefügt und ein Bild darin eingefügt.
Zuletzt haben wir unseren Haupttext hinzugefügt.
Unsere Seite fängt an, gut zusammen zu kommen. Wir haben alle Elemente außer einem hinzugefügt, unserer Fußzeile.
In unserer Fußzeile werden unser Copyright sowie einige weitere Seiten aufbewahrt, für die nicht wirklich viel Navigationsbereich erforderlich ist.
Fügen Sie einen Zeilenumbruch hinzu, um die Seite ein wenig aufzuteilen, und fügen Sie den Copyright-Text hinzu und richten Sie ihn ganz nach links aus.
Allgemeine Geschäftsbedingungen und Datenschutzbestimmungen sind einige Seiten, auf die der Benutzer zugreifen kann, die jedoch nicht unbedingt in Ihr Gesicht geworfen werden müssen. Das Schöne an einer Fußzeile ist, dass wir dem Benutzer zwar diese Informationen zur Verfügung stellen können, diese aber gut verstecken können: P
Wir haben gerade eine einfache Site erstellt, die wir jetzt in eine HTML- und CSS-Vorlage konvertieren können. Fühlen Sie sich frei, die Vorlage aufzufrischen, aber aus Gründen der Schnelligkeit und Benutzerfreundlichkeit werden wir von hier aus weitergehen.
Accentsconagua