So passen Sie ein WordPress-Theme mit CSS an
Wenn Sie lernen möchten, wie Sie ein WordPress-Theme mit CSS anpassen, müssen Sie zunächst wissen, wie Sie Dateien im Theme selbst bearbeiten.
Der Prozess zum Bearbeiten von Themendateien ist praktisch derselbe, unabhängig davon, ob Sie CSS oder HTML anpassen möchten, und in früheren Tutorials dieser Serie haben wir diesen Prozess bereits behandelt, um HTML zu ändern.
Um zu vermeiden, dass derselbe Boden runderneuert wird, lesen Sie „So bearbeiten Sie HTML in einem WordPress-Theme“ und „So installieren Sie WordPress lokal mit XAMPP“:
- Bearbeiten von Dateien über den Themeneditor
- Herunterladen und Hochladen von Dateien über FTP oder Remote-Verbindung
- Warum Sie Ihre Änderungen in einem untergeordneten Thema vornehmen sollten
- Offline-Bearbeitung über XAMPP
Mit den bereits behandelten Methoden zum Bearbeiten von Themendateien konzentrieren wir uns in diesem Tutorial auf das Bearbeiten von CSS in WordPress, indem wir uns mit diesen Themen befassen:
- So fügen Sie benutzerdefiniertes CSS über den Theme Customizer hinzu
- So identifizieren Sie die Stylesheets, die ein Theme verwendet
- So identifizieren Sie, welches CSS wo geändert werden muss, um einen bestimmten Teil eines Themes anzupassen
Hinweis: In diesem Artikel wird davon ausgegangen, dass Sie über Grundkenntnisse in CSS verfügen, aber nicht unbedingt darüber, wie um CSS in WordPress zu bearbeiten.
Premium-WordPress-Themes und Plugins
Bevor wir beginnen, vergessen Sie nicht, dass Sie die Tausenden von WordPress-Themes auf ThemeForest und WordPress-Plugins auf CodeCanyon erkunden können. Kaufen Sie diese hochwertigen WordPress-Themes und Plugins und verbessern Sie Ihre Website-Erfahrung für Sie und Ihre Besucher.
So bearbeiten Sie CSS im WordPress Theme Customizer
WordPress verfügt über einen eigenen Bereich, in dem Sie Ihren eigenen CSS-Code hinzufügen können. Dieser Code wird zum richtigen Zeitpunkt geladen, um sicherzustellen, dass er das Standard-Styling des Themas überschreibt.
Gehen Sie im linken Seitenleistenmenü Ihres WordPress-Admin-Panels zu Aussehen > Anpassen:
Hier gelangen Sie zum Bereich zur Anpassung des Themas, in dem Sie auf den Menüpunkt klicken können Zusätzliches CSS:
Es wird ein großes Feld angezeigt, in das Sie ein beliebiges benutzerdefiniertes CSS einfügen können:
Speichern Sie Ihre Änderungen, indem Sie oben in der linken Seitenleiste auf die blaue Schaltfläche Veröffentlichen klicken, wenn Sie mit dem Hinzufügen von benutzerdefiniertem Code fertig sind.
So identifizieren Sie die Stylesheets eines Designs
Wenn Sie den zusätzlichen CSS-Bereich im Design-Customizer nicht verwenden und stattdessen das CSS des Designs direkt bearbeiten möchten, benötigen Sie eine Möglichkeit, um herauszufinden, welche Dateien ein Thema tatsächlich für das Styling verwendet.
In den meisten Fällen verwenden Themes die Standardstruktur für WordPress und haben eine Datei mit dem Namen „style.css“ im Stammverzeichnis des Themas. Tatsächlich ist dies eine wichtige Themendatei, sodass Sie sie immer in jedem Thema finden.
Wenn Sie es jedoch zur Bearbeitung öffnen, können Sie feststellen, dass es keinen Code enthält und der Entwickler das Styling von einem anderen Ort im Thema lädt. Oder Sie können sogar feststellen, dass sie in mehreren Stylesheet-Dateien geladen werden.
Es gibt zwei Möglichkeiten zu überprüfen, welche Stylesheets von einem Thema verwendet werden.
Kopfcode prüfen
Die erste Methode besteht darin, den <head> -Code des Themas zu überprüfen. Sie können dies tun, indem Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite klicken und Seitenquelle anzeigen auswählen und dann die <head>...</head> -Tags suchen.
Suchen Sie zwischen diesen Tags nach <link> -Elementen, die auch rel='stylesheet' haben. Schauen Sie sich dann an, welche davon aus dem Verzeichnis Ihres Themas stammen. Die URLs der Stylesheets sagen Ihnen, wo sie in der Themenstruktur zu finden sind.
Beachten Sie, dass diese Technik nicht funktioniert, wenn Sie ein Plugin ausführen, das alle Stylesheets Ihrer Site in einer Datei kombiniert und minimiert, da Sie nur die URL dieser einzelnen Datei sehen. Verwenden Sie stattdessen Technik zwei und überprüfen Sie die Funktionsdatei.
Überprüfen der Funktionsdatei
Wenn ein Theme ein Stylesheet verwendet, muss es WordPress über eine Funktion mit dem Namen wp_enqueue_style() mitteilen, welche Datei es verwenden möchte. So können wir genau sehen, welche Stylesheets das Thema lädt, indem wir seine Verwendung dieser Funktion finden.
Jedes Theme hat eine Datei mit dem Namen „functions.php“ befindet sich in seinem Stammverzeichnis. Die Nutzung der wp_enqueue_style() -Funktion ist in der Regel in dieser Datei, so öffnen Sie es und starten Sie die Suche nach dem Funktionsnamen.
Wenn Sie Instanzen der Funktion wp_enqueue_style() suchen, suchen Sie zwischen den Klammern nach dem zweiten Parameter, dh dem Textstück nach dem ersten Komma. Dieser Text zeigt Ihnen die Position des Stylesheets. Beispielsweise:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
Im obigen Code lautet der zweite Parameter:
get_template_directory_uri() . '/css/mainstyle.css')
Dies sagt uns, dass sich das Stylesheet in einem Theme-Unterverzeichnis mit dem Namen „css“ befindet und dass sein Dateiname „mainstyle.CSS“.
So identifizieren Sie, welches CSS geändert werden soll
Sobald Sie wissen, wie Sie CSS zum Thema hinzufügen oder bearbeiten, müssen Sie als nächstes herausfinden, welchen Code Sie tatsächlich ändern müssen.
Der beste Weg, dies zu tun, ist die Verwendung der Entwicklertools in Ihrem Browser, idealerweise entweder Chrome oder Firefox aufgrund der Qualität ihrer Tools.
Angenommen, Sie möchten beispielsweise die Schriftgröße Ihrer Beitragstitel ändern. Klicken Sie mit der rechten Maustaste auf einen der Beitragstitel und wählen Sie die Option Überprüfen:
Dadurch wird das Entwicklertools-Bedienfeld geöffnet. Suchen Sie auf der Registerkarte Stile nach einer font-size -Eigenschaft.
Wenn Sie keinen sehen, zeigt Ihnen der Browser möglicherweise ein übergeordnetes oder untergeordnetes Element an.Klicken Sie daher auf der Registerkarte Elemente auf Elemente in der Nähe, bis Sie ein Element finden, das die Form des Beitrags genau hervorhebt Titeltext und hat eine font-size Eigenschaft:
Versuchen Sie nun auf der Registerkarte Stile, den Wert für die Eigenschaft font-size zu ändern. Wenn Sie sehen, dass sich die Textgröße im Browserfenster ändert, wissen Sie, dass Sie das richtige CSS gefunden haben.
Um zu erfahren, wo sich dieses CSS im Stylesheet befindet, schauen Sie oben rechts auf die Stelle, an der Sie gerade den font-size -Wert bearbeitet haben. Sie sollten einen Dateinamen, dann einen Doppelpunkt und dann eine Zahl sehen.
Der Dateiname gibt an, in welchem Stylesheet sich der Code befindet, und die Nummer nach dem Doppelpunkt gibt an, in welcher Zeile Sie diesen Code finden. Zum Beispiel zeigt das Bild oben Code aus dem „Stil.css“ -Datei in Zeile 4054. Wenn Sie das Theme-Stylesheet direkt bearbeiten, können Sie es jetzt öffnen, zur betreffenden Zeilennummer gehen und das CSS ändern.
Wenn Sie im zusätzlichen CSS-Feld des Theme-Customizers oder in einem untergeordneten Theme arbeiten, müssen Sie auch denselben Selektor wie das ursprüngliche CSS auswählen, damit Sie ihn mit Ihrem eigenen Styling überschreiben können.
Suchen Sie in den Browser-Entwicklertools nach dem Selektor, der sich über der gerade geänderten Eigenschaft font-size befindet. Es befindet sich links von der Stylesheet-Datei und der Zeilennummernspezifikation, die wir uns gerade angesehen haben.
Kopieren Sie diesen gesamten Selektor, fügen Sie ihn in Ihren benutzerdefinierten Code ein und verwenden Sie ihn dann, um Ihren geänderten font-size -Wert korrekt auszurichten.
Immer nach eingebackenen Themenoptionen suchen
Bevor Sie sich die Mühe machen, CSS anzupassen, sollten Sie immer im Theme Customizer nach Optionen suchen, die der Entwickler möglicherweise bereits in das Theme integriert hat.
Themen haben oft recht umfassende Anpassungsoptionen, für die kein benutzerdefinierter Code erforderlich ist. Bevor Sie also CSS bearbeiten, können Sie sich viel Zeit sparen, indem Sie prüfen, ob es bereits eine Möglichkeit gibt, die gewünschte Änderung per Knopfdruck vorzunehmen.
So passen Sie ein WordPress-Theme Schritt für Schritt an
Nachdem wir nun darüber gesprochen haben, wie Sie das CSS und HTML eines WordPress-Themes anpassen, sind Sie sich möglicherweise nicht sicher, wo Sie anfangen sollen. Lassen Sie uns die Dinge auf eine grundlegende Liste der folgenden Schritte reduzieren:
- Überprüfen Sie den Theme-Customizer, um zu sehen, ob bereits eine Option verfügbar ist, die die gewünschte Änderung erleichtern kann
- Wenn nicht, und Sie müssen einige einfache benutzerdefinierte CSS hinzufügen, verwenden Sie das Zusätzliche CSS-Feld im Theme-Customizer
- Wenn Sie umfangreichere Anpassungen an HTML oder CSS vornehmen müssen, ziehen Sie in Betracht, sie in einem untergeordneten Thema vorzunehmen
- Um kleine das Thema, verwenden Sie die WordPress gebaut Theme Editor
- Für mehr in die Tiefe Änderungen direkt an einem Thema, verwenden Sie entweder FTP, eine remote-Verbindung, oder arbeiten komplett offline mit XAMPP
- Sobald Sie Ihre Bearbeitungsmethode ausgewählt haben, identifizieren Sie die Stylesheets des Themas, indem Sie den
<head>-Code Ihrer Site überprüfen oder in den „Funktionen“ des Themas suchen.php“ zur Verwendung derwp_enqueue_style()-Funktion - Suchen Sie die spezifischen CSS-Zeilen, die Sie ändern müssen, und die zugehörigen Selektoren, indem Sie die Inspect-Funktion der Chrome- oder Firefox-Entwicklertools verwenden
Wenn Sie sich mit all dem vertraut machen und sich damit vertraut machen, werden Sie feststellen, wie anpassbar WordPress ist.
Bevor Sie es wissen, werden Sie Ihre eigenen, völlig originellen untergeordneten Themen erstellen und eigene Designs erstellen.
Und es passiert einfach so, dass das Lernen „Wie man ein untergeordnetes Thema in WordPress erstellt“ das nächste Tutorial in dieser Serie ist. Bleiben Sie dran!