Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Anfangen mit WordPress: Bearbeiten des Erscheinungsbilds Ihrer Website mit CSS

by
Length:LongLanguages:
This post is part of a series called Beginning With WordPress.
Beginning With WordPress: Preparing to Customise Your Theme Using a Child Theme
Beginning With WordPress: Editing the Structure of Your Site

German (Deutsch) translation by Valentina (you can also view the original English article)

Nachdem wir ein untergeordnetes Thema eingerichtet haben, sind wir bereit, einige Änderungen am Erscheinungsbild unserer Website vorzunehmen.

Was werden Sie brauchen?

  • Webbrowser - Ich verwende Chrome
  • Texteditor - Ich verwende Text Wrangler
  • FTP-Client - Ich verwende FileZilla, das Text Wrangler als Texteditor verwendet
  • Grundkenntnisse in HTML und CSS

Bevor wir anfangen

Bevor wir uns mit dem Tutorial befassen, müssen wir unser Bearbeitungssystem einrichten. Eines der nützlichen Dinge an modernen FTP-Clients ist, dass wir in ihren Einstellungen die Software festlegen können, mit der wir Dateien bearbeiten möchten. Auf diese Weise können wir bei der Auswahl einer Datei auf dem Server die Option Bearbeiten auswählen, sie in ein temporäres Verzeichnis auf unserem lokalen System herunterladen, bearbeiten und beim Speichern automatisch wieder auf den Server hochladen. Es ist ein einfaches automatisiertes System, erfordert jedoch ein wenig Schutz, da wir live bearbeiten. Wenn wir also einen Fehler machen, ist unsere Live-Site betroffen. Bevor wir jedoch dazu kommen, legen Sie Ihren Standard-Texteditor fest.

Navigieren Sie zu FileZilla > Einstellungen > Dateibearbeitung, navigieren Sie zu Ihren Anwendungs- oder Programm-Verzeichnissen und wählen Sie Ihren Texteditor aus (wie bereits erwähnt, verwende ich Text Wrangler, sodass Sie im Beispiel sehen können, dass Text Wrangler als mein Standardeditor festgelegt ist).

3-bwwp_6-file-editor

Ok, wir werden darauf zurückkommen...

Zweitens habe ich, bevor wir das Thema optimieren (dies ist Ihr Moment, den ich zuvor vorbereitet habe), einige neue Beiträge in unserem Blog erstellt und sie anhand von Beitragsformaten differenziert, damit wir sehen können, wo sich einige Änderungen befinden wird auf unserer veröffentlichten Website wiedergegeben - Sie können diese im ersten Bild sehen, das durch verschiedenfarbige Hintergründe gekennzeichnet ist. Der erste ist ein Link, gefolgt von einem Standardbeitrag, einer Galerie, einem anderen Standard, einem Zitat und einem Video. 23 ändert den Stil jedes dieser Beiträge, daher müssen wir einige Teile des Stylesheets unserer Website bearbeiten, damit unsere Website vom Original abweicht.

1-bwwp_6-original-site-colours

Ändern der Stile Ihrer Site

Richtig, für die erste Stiländerung, die ich vornehme, ist kein Code erforderlich. Ich habe einfach die Header-Bilder aktualisiert.

Bei Twenty Thirteen sind standardmäßig drei orangefarbene Bilder mit geometrischen Mustern installiert. Wir fügen vier neue blau/grüne Bilder ein, indem wir in den Einstellungen für Darstellung > Kopfzeile einige neue Kopfzeilenbilder hochladen. Es macht keinen Sinn, eine Kopfzeile im CSS zu ändern, wenn das Thema selbst uns die Möglichkeit bietet, dies zu ändern. Suchen Sie sich also einige neue Kopfzeilenbilder für Ihr neues Farbschema und laden Sie sie hoch...

Ich werde genau hier warten.

Ok, haben Sie sie gefunden? Großartig, laden Sie sie hoch und fahren Sie mit dem nächsten Schritt fort.

2-bwwp_6-header-changes

Optimieren des Themas mithilfe von Stylesheets

Um Ihnen ein wenig Hintergrundwissen/Auffrischung zu Stylesheets zu geben, besteht eine Website aus 3 Ebenen. Die erste Basis ist die Inhaltsebene, der Teil der Website, der Ihre Inhalte in einer aussagekräftigen Struktur auf Ihrer Website organisiert. Diese Struktur wird mit Code namens HTML (Hypertext Markup Language) erstellt, mit dem Sie die verschiedenen Teile des Inhalts kennzeichnen. Hier ist etwas HTML als Beispiel.

HTML selbst stylt nichts. HTML strukturiert nur den Inhalt. Um Änderungen am Stil des Inhalts vorzunehmen, bewegen wir uns zur mittleren Ebene der Site, der Präsentationsebene. Eines der großartigen Dinge in diesem Zeitalter der Website-Erstellung ist die Trennung der Präsentation vom Inhalt. Es ist genau dieses System, das es so einfach macht, das Aussehen Ihrer Website zu ändern, indem Sie es einfach durch ein neues Thema ersetzen (was im Grunde genommen darin besteht, ein Stylesheet gegen ein anderes auszutauschen).

Die Sprache, die zu dieser Präsentationsebene spricht, ist CSS (Cascading Style Sheets), und es ist das CSS, das wir optimieren werden, um die Stiländerungen an unserem Twenty Thirteen-Thema vorzunehmen.

Wann immer wir die Struktur von CSS als Sprache betrachten, können wir drei Dinge sehen:

Wenn wir also so etwas wie die Überschrift der ersten Ebene optimieren möchten, ist das h1-Tag unser Selektor wie folgt:

Das nächste ist die Eigenschaft, und in diesem Fall wird die Eigenschaft, die wir ändern möchten, die Farbe sein - auch in CSS verwenden wir die amerikanische Rechtschreibung. Während ich also Farbe in den Inhalt schreibe, wird beim Schreiben in den Code color verwendet.

Zum Schluss setzen wir den Wert. Bei Farben können wir die Farbe nun auf drei Arten schreiben:

  1. Farbnamen
  2. Hexadezimalcode
  3. RGB-Farbwerte

Zum größten Teil verwenden wir hexadezimal. Wenn Sie mehr über die anderen Werte erfahren möchten, finden Sie hier eine Referenz. In diesem Fall ändern wir unseren Text in Weiß, was hexadezimal #FFFFFF ist.

In diesem Sinne und um unser Thema ein wenig mehr wie "unser eigenes" aussehen zu lassen, werden wir zuerst die Schriftart des Textes sowohl in der Überschrift als auch im Textinhalt ändern. Öffnen Sie zunächst FileZilla und navigieren Sie im Remote-Fenster zum Stylesheet Ihres untergeordneten Themas. Klicken Sie dann mit der rechten Maustaste auf die Datei style.css und wählen Sie Anzeigen/Bearbeiten.

6-bwwp_6-file-edit

Klicken Sie auf und Sie werden feststellen, dass die Datei in Ihrem Texteditor geöffnet wird.

7-bwwp_6-file-edit-2

WICHTIG

Bevor wir fortfahren, speichern wir eine Kopie unseres Stylesheets als Backup auf unserem Desktop. Dies liegt daran, dass wir den Live-Server bearbeiten, auf den wir zurückgreifen möchten, wenn wir etwas tun, um unseren Code zu beschädigen.

Bevor Sie etwas anderes tun, drücken Sie in Text Wrangler mit Ihrer Datei CMD + A, um den gesamten Text auszuwählen. Drücken Sie CMD + C, um es zu kopieren und eine neue Datei in Text Wrangler (CMD + N) zu öffnen. Fügen Sie Ihren kopierten Text in das neue Dokument (CMD + V) ein und speichern Sie diese Datei als Backup auf Ihrem Desktop. Auf diese Weise können Sie, wenn etwas schief geht, es jederzeit wieder in die zuletzt bearbeitete Datei kopieren und auf dem Server speichern, um die Site auf die letzte Arbeitsversion zurückzusetzen.

Befolgen Sie diesen Vorgang oben und speichern Sie diese Datei jedes Mal, wenn Sie eine Änderung vorgenommen haben (eine Änderung, die wie erwartet funktioniert hat). Auf diese Weise ist die Datei immer Ihre neueste Version. (Es gibt viele erstaunliche und kompliziertere Möglichkeiten, sich um diese Versionskontrolle zu kümmern. Für den absoluten Anfänger ist dies ein ziemlich guter Start, wenn Sie daran denken, weiterzumachen.

Jetzt sind wir bereit, kreativ zu werden!


Schriftarten ändern

Um die Schriftarten auf einer Site zu ändern, müssen wir Zugriff auf gehostete Schriftdateien haben. Dies umgeht die Tatsache, dass nicht jeder Computer die gleichen Schriftarten auf seinem System geladen hat wie wir. Eines der großartigen Dinge, auf die wir heutzutage Zugriff haben, sind einige gut aussehende gehostete Web-Schriftarten, die von Google Web Fonts frei bereitgestellt werden. Für unsere Website haben wir zwei Schriftarten gefunden, die sehr gut zusammenarbeiten: Rancho für die Überschriften und Gudea für den Textkörper.

Fügen Sie auf der Google Fonts-Website diese beiden Schriftarten (Rancho und Gudea oder zwei beliebige Ihrer Wahl) zu einer Sammlung hinzu. Klicken Sie auf die Registerkarte Verwenden und dann auf die Registerkarte @import, um den folgenden Code abzurufen und in unser Stylesheet einzufügen:

8-bwwp_6-text-style-edits-2

Dies teilt unserem Thema mit, wo sich die Schriftart befindet. Als nächstes teilen wir unserem Stylesheet mit, wo es angezeigt werden soll, indem wir einige Selektoren bearbeiten. Aber woher wissen wir, an welchen Elementen wir arbeiten möchten oder welche Selektoren wir sogar optimieren können?


Verwenden der Entwickler-Werkzeuge

Eines der coolen Dinge an modernen Browsern ist die schiere Anzahl an Werkzeuge, die Entwicklern helfen. In Chrome werden sie als Entwickler-Werkzeuge bezeichnet. Sie können darauf zugreifen, indem Sie mit der rechten Maustaste auf das Element auf der Webseite klicken, die Sie überprüfen möchten, und dann Element überprüfen auswählen. In Firefox heißt das Entwickler-Werkzeug der Wahl Firebug. Sie können es erhalten, indem Sie es als Erweiterung installieren (in Firefox sind auch eigene Entwickler-Werkzeugs integriert). In Safari sind sie integriert, aber Sie müssen sie aktivieren (Einstellungen > Erweitert > Entwicklungsmenü in der Menüleiste anzeigen).

Lassen Sie uns den Site-Header überprüfen. Klicken Sie mit der rechten Maustaste auf den Kopfzeilentext selbst und wählen Sie dann Element überprüfen

9-bwwp_6-inspect-element

Klicken Sie darauf, um das Werkzeugfenster am unteren Rand der Seite aufzurufen, auf der wir uns befinden.

10-bwwp_6-inspect-element-2

Links im Bedienfeld befindet sich der Abschnitt HTML-Elemente, in dem das ausgewählte Element hervorgehoben ist. Rechts ist das CSS. Nachdem Sie das <h1>-Element im HTML ausgewählt haben, können Sie durch das CSS rechts scrollen, um alle Selektoren zu finden, die mit diesem HTML arbeiten. Wenn Sie nur ein paar Zeilen nach unten scrollen, finden Sie eine Folge von Überschriften-Selektoren mit einer Eigenschaft namens font-family.

13-bwwp_6-inspect-element-4

Eines der netten Dinge an den EntwicklerWerkzeugs ist, dass Sie diese Eigenschaften bearbeiten und Ihre Änderungen live simulieren können, ohne dass dies für andere Benutzer Auswirkungen auf Ihre Live-Site hat. Wenn der Selektor nach Ihren Wünschen aussieht, können Sie kopieren es in Ihr untergeordnetes Stylesheet. Bewegen Sie den Mauszeiger über die Eigenschaft (beginnend mit dem Wort "Bitter"). Da wir die Rancho-Schriftart bereits mit dem @import-Selektor in unserem Stylesheet gespeichert haben, können Sie die aktuelle Schriftart Bitter im Inspektor in 'Rancho' ändern, um unsere anzuzeigen Schriftarten ändern sich live.

13-bwwp_6-change-font-family

Wenn wir mit dieser neuen Schriftart zufrieden sind, können wir das CSS aus dem Inspektor kopieren und in unser Stylesheet einfügen.

Wählen Sie den Code von den Selektoren ab h1 bis zu den schließenden Klammern aus und kopieren Sie ihn.

14-bwwp_6-header-new-font-2

Fügen Sie dann den Code in Ihr Stylesheet ein.

15-bwwp_6-header-new-font-3

Die Natur von Stylesheets ist, dass sie kaskadieren. Wenn ein Stylesheet mehrere Selektoren für ein bestimmtes HTML-Element enthält, ist derjenige am unteren Rand der Seite derjenige mit dem Vorrang in der Hierarchie und wird daher vom Browser angezeigt.

In unserem Fall importieren wir hier das Stylesheet oben in unserem untergeordneten Thema, sodass der gesamte neue Code, den wir jetzt schreiben, am Ende des vorhandenen Codes im übergeordneten Thema steht. Infolgedessen ist unser Code der Code, der ausgeführt wird, wenn die Site angezeigt wird. Da der Code, den wir eingefügt haben, Zeilen enthält, die wir nicht ändern, und diese Zeilen beibehalten werden, wird der vorhandene Code tatsächlich dupliziert (er ist im übergeordneten Code identisch, sodass wir ihn im untergeordneten Code nicht erneut verwenden müssen). Löschen Sie die Zeilen über und unter der Eigenschaft der font-family, da sie nicht benötigt werden.

16-bwwp_6-header-new-font-5

Klicken Sie nun in unserem Stylesheet auf Speichern und springen Sie zu FileZilla, wo diese Warnung angezeigt werden sollte:

19-bwwp_6-save-file-zilla

Wenn Sie mit Ihren Änderungen zufrieden sind, ein Backup auf Ihrem Desktop haben und bereit sind, klicken Sie auf Ja, um die Datei auf dem Server zu überschreiben. Gehen Sie dann zu Ihrer Site, um die Seite zu aktualisieren und Ihre veröffentlichten Änderungen anzuzeigen.

20-bwwp_6-text-style-titles

Sobald wir das mit den Header-Schriftarten gemacht haben, machen wir dasselbe mit der Body-Kopie. Klicken Sie also bei geöffneter Site mit der rechten Maustaste auf einen Teil des Textes und wählen Sie Element überprüfen. Navigieren Sie im CSS-Inspektor zum Selektor für die font-family in Ihrem CSS-Bedienfeld und ändern Sie den Wert für Source Sans Pro in 'Gudea'. An dieser Stelle sollte darauf hingewiesen werden, dass der Selektor, den wir bearbeiten, nicht wie erwartet ein p-Selektor (für Paragrah) ist. Tatsächlich ist der Selektor, der in diesem Fall die Pagragraphen beeinflusst, der html-Selektor (das können Sie in erkennen Der Inspektor, da es der dunkle ist, die ausgegrauten in diesem Selektor-Array wirken sich nicht auf dieses bestimmte Textbit aus. In diesem Fall ist html ein übergeordneter Selektor, der ALLE von ihm abgeleiteten Elemente auf der Seite beeinflusst.

13-bwwp_6-change-font-family-2

Kopieren Sie diesen Text wie oben beschrieben vom Selektor bis zur schließenden Klammer in Ihr Stylesheet. In diesem Fall müssen keine nicht verwendeten Selektoren entfernt werden, da nur die font-family verwendet wird. Speichern Sie Ihre Datei und laden Sie sie hoch.

21-bwwp_6-text-style-titles

Sie können im obigen Code sehen, dass ich einige Zeilen als Kommentare hinzugefügt habe, die in die folgenden Zeichen /* eingeschlossen sind, um sie zu öffnen und dann */ um sie zu schließen. Ich schlage vor, dass Sie es sich zur Gewohnheit machen, sich auf diese Weise Notizen zu machen, damit Sie später leicht herausfinden können, was Sie in Ihrem Code getan haben.

Als nächstes gehe ich mit meinem Inspector die vorhandene Site durch und wähle alle Elemente aus, deren Farben ich ändern möchte... und es gibt eine ganze Liste.

Als nächstes die Navigationsleiste und Links

22-bwwp_6-nav-style-changes

Ok, jetzt, da Sie die Grundlagen des Möglichen haben, können Sie systematisch die veröffentlichte Site durchgehen, die zu bearbeitenden Selektoren suchen und in Ihrem Inspektor damit spielen, die Einstellungen anpassen, sie kopieren und Ihre neuen Änderungen einfügen in das Stylesheet des untergeordneten Themas!

Ich könnte Ihnen eine Liste aller Änderungen geben, die ich am Stylesheet vorgenommen habe, damit Twenty Thirteen so aussieht wie in diesem Beispielbild, aber wo ist der Spaß dabei?

2-bwwp_6-blue-site-colours

Abschluss

Wenn Sie sich den Code einer Site in den Entwickler-Werkzeuge ansehen, kann dies ziemlich überwältigend sein. Wenn Sie sich jedoch mit der Beziehung zwischen CSS und HTML-Elementen vertraut machen und diese bearbeiten, werden Sie feststellen, welche Möglichkeiten es gibt. Es ist eine herausfordernde und aufregende Welt zu erkunden! Verbringen Sie also diese Woche einige Zeit damit, mit dem Thema herumzuspielen, und prüfen Sie, ob es wie das blaue Bild oben aussieht.

Nächste Woche, bevor wir die nächste Lektion veröffentlichen, gebe ich Ihnen das Stylesheet, das Twenty Thirteen zu diesem schönen Blauton gemacht hat.

P.S. Wenn Sie sich immer noch ein wenig von HTML und CSS verblüfft fühlen, können Sie 30 Tage lang HTML und CSS lernen: einen kostenlosen Tuts + Premium-Kurs

Advertisement
Advertisement
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.