Wie kann ich das CSS Ihrer WordPress-Website anpassen? Finden Sie es in diesem Artikel heraus.

Egal, welches WordPress-Theme Sie für Ihre Website wählen, es wird andere Websites geben, die es verwenden werden. Und das trotz der vielen Individualisierungsmöglichkeiten, die viele anbieten WordPress-Themes Heutzutage können Sie Ihre Website noch einzigartiger machen.

Für einen wirklich Um den visuellen Aspekt Ihres WordPress-Themes zu berühren, müssen Sie über die Standardanpassung hinausgehen, die durch die Optionen oder Einstellungen eines WordPress-Themas angeboten wird. Die CSS-Anpassung Ihres WordPress-Blogs ermöglicht es Ihnen, dieAussehen Ihrer Website um es wirklich einzigartig zu machen.

Dieses Tutorial befasst sich mit den verschiedenen Methoden, die Ihnen zur Verfügung stehen, um Ihre Website mit CSS anzupassen, untergeordnete Themen zu erstellen und anzupassen, indem Sie integrierte WordPress Customizer-Plugins verwenden und Wordpress-Plugins von CSS.

Aber bevor Sie anfangen, nehmen Sie sich die Zeit, um einen Blick darauf zu werfen Wie man ein Wordpress-Theme zu installierenWie viele Plugins sollte ich installieren auf Wordpress.

Dann finden Sie gemeinsam unsere Liste heraus.

CSS: Die Grundlagen und wie WordPress sie benutzt

Zunächst einmal: CSS steht für Cascading Style Sheets, was nicht klarer ist als das Akronym. Also, lasst es uns zusammenfassen.

Ein Stylesheet ist ein Dokument, das Stile beschreibt (wie Schriftart, Farben usw..) zur Präsentation eines anderen Dokuments verwendet werden. In unserem Fall haben wir es mit einem Stil der Webseiten zu tun.

Das TeilCascadingDer Name ist Teil dessen, was ihn wirklich mächtig macht. Webseiten können mit mehreren Stylesheets wie einem Wasserfall gestaltet werden, wobei das untere Sheet Styles von einer höheren Ebene hinzufügt oder ersetzt. Dies ist wichtig, da die Art und Weise, wie Sie Ihre Stile hinzufügen, die ursprünglichen Änderungen überschreibt.

So passen Sie das CSS Ihrer WordPress-Website an

So einfach es auch klingt, CSS kann verwendet werden, um fast alles auf einer Webseite zu ändern (einschließlich Layout, Farben, Schriftarten und sogar Animationen).

Erfahren Sie, wie Sie Ihre Benachrichtigungen verwalten, indem Sie entdecken Wie man E-Mail-Benachrichtigungen auf Wordpress verwalten

Die meisten WordPress-Themes Verwenden Sie einen CSS-Code, der in einer Datei mit dem Namen verfügbar ist style.css. Wenn Sie diese Datei öffnen, wird eine vollständige Liste der Stilregeln für Ihr WordPress-Thema angezeigt. Was auch immer du tust, Ändern Sie diese Datei nicht! Die Updates überschreiben Ihre Änderungen.

Es gibt verschiedene Möglichkeiten, a hinzuzufügen benutzerdefinierten CSS-Code zu Ihrem WordPress-Theme, damit Ihre Änderungen ein Update des WordPress-Themas überstehen.

So passen Sie Ihre WordPress-Website mit CSS an

Jetzt verstehen Sie besser, was CSS ist und wie es funktioniert WordPress-Themes Wenn Sie sie verwenden, werfen wir einen Blick auf die Optionen, die Sie zum Anpassen Ihres WordPress-Blogs verwenden können, und besprechen die Vor- und Nachteile jeder Methode.

So passen Sie die CSS-Website WordPress 1

Am Ende unserer Arbeit können Sie feststellen, welche Methode Ihrem WordPress-Theme entspricht.

Option # 1: Passen Sie CSS mithilfe eines untergeordneten Themas an

Wenn Sie un Kind Thema Um Ihren CSS-Code anzupassen, sind Aktualisierungen der zuvor besprochenen Themen kein Problem mehr. Ein Update eines WordPress-Themas wirkt sich auf das Thema aus. "Elternteil», Lassen Sie die Änderungen an Ihrem untergeordneten Thema intakt. Viele Entwickler von WordPress-Themes verstehen die Nützlichkeit eines untergeordneten Themas.

Entdecken Sie Wann und wie Wordpress in einem Unterverzeichnis installieren

Das Erstellen eines untergeordneten Themas ist ziemlich einfach. Es besteht aus dem Erstellen eines Ordners auf Ihrem Webhosting, der eine Datei enthält style.css Hiermit wird das übergeordnete Thema als Vorlage aufgelistet und die Datei importiert style.css des übergeordneten Themas (Erinnern Sie sich an die Bedeutung von "kaskadierenden" Stylesheets?).

Der Codex Wordpress Weitere Informationen zum Erstellen untergeordneter Themen.

So passen Sie die CSS-WordPress-Website an 1 1

Sobald Sie Ihr untergeordnetes Thema erstellt und ordnungsgemäß aktiviert haben, können Sie mit dem Anpassen Ihres WordPress-Themas beginnen. Der schnellste Weg ist, Ihre Datei zu bearbeiten style.css, auf die auf zwei Arten zugegriffen werden kann.

Schauen Sie sich diesen Artikel an, um es herauszufinden So komprimieren Sie Ihre CSS-, HTML- und Javascript-Dateien

Der erste besteht darin, den im WordPress-Dashboard enthaltenen Editor zu verwenden, indem Sie auf klicken Aussehen> Editor. L 'Herausgeber zeigt eine Liste der rechts im Theme verfügbaren Dateien an (Es werden nur beliebte Dateien angezeigt). Deine Datei style.css befindet sich ganz unten in der Liste und klickt auf die Option Stylesheet votre fichier style.css wird aufladen.

Sie können Ihre Änderungen an diesem Speicherort hinzufügen und die Änderung speichern.

Wordpress Sheet

Der andere Weg, um auf Ihre Datei zuzugreifen style.css (den wir empfehlen) ist das Durchsuchen der Dateien in Ihrem Webhosting über a FTP-Client oder ein Dateimanager. Der von Ihnen erstellte untergeordnete Themenordner befindet sich im " wp-content> themen« . Sie können die Datei mit einem Texteditor bearbeiten style.css.

Option Nr. 2: Passen Sie das CSS im Customizer an

Ab WordPress 4.7 können Benutzer benutzerdefiniertes CSS direkt aus dem WordPress-Administrationsbereich hinzufügen. Es ist super einfach und Sie können Ihre Änderungen mit einer Echtzeitvorschau anzeigen.

So passen Sie die CSS-Website WordPress 2

Zuerst müssen Sie zur Seite gehen Themen »Anpassen.

Zugriff auf den WordPress-Customizer, um das Thema anzupassen

Dadurch wird die Anpassungsoberfläche für das WordPress-Design gestartet.

Auf der rechten Seite sehen Sie die Echtzeitvorschau Ihrer Website mit einer Reihe von Optionen im linken Bereich. Klicken Sie auf die Registerkarte zusätzlicher CSS im linken Bereich.

Die Registerkarte wird verschoben, um Ihnen einen einfachen Bereich anzuzeigen, in dem Sie Ihr benutzerdefiniertes CSS hinzufügen können. Sobald Sie eine gültige CSS-Regel hinzufügen, wird diese im Echtzeit-Vorschaufenster Ihrer Website angezeigt.

Geben Sie zusätzlichen CSS-Code ein und veröffentlichen Sie

Sie können weiterhin benutzerdefinierten CSS-Code hinzufügen, bis Sie mit dem Erscheinungsbild Ihrer Website zufrieden sind. Vergessen Sie nicht, auf " Speichern und Veröffentlichen Oben, wenn Sie fertig sind.

Hinweis: Jedes benutzerdefinierte CSS, das Sie mit dem Customizer hinzufügen, ist nur mit diesem bestimmten WordPress-Thema verfügbar. Wenn Sie es mit anderen Themen verwenden möchten, müssen Sie es mit derselben Methode kopieren und in Ihr neues Thema einfügen.

Option # 3: Passen Sie CSS mit einem Plugin an

Der Vorteil der Verwendung eines Plugins für die CSS-Anpassung besteht darin, dass Sie das Plugin auch dann beibehalten, wenn Sie ein WordPress-Design ändern. Dies hat seine Nachteile, da Stile nicht auf allen WordPress-Themen gut angezeigt werden können.

Hier sind einige Plugins:

1. Benutzerdefiniertes CSS in Jetpack (kostenlos)

Die Wordpress-Plugin Jetpack  ist auf über einer Million WordPress-Websites installiert, wahrscheinlich auch auf Ihren. Es bringt Funktionen zur Verfügung WordPress.com für selbst gehostete Websites und bietet auch eine Modul für CSS-Anpassung.

Jetpack-Formen-Plugin

Sobald das Modul im Jetpack-Dashboard aktiviert ist, steht ein benutzerdefinierter CSS-Editor zur Verfügung, mit dem Sie Ihr WordPress-Thema anpassen können, ohne ein untergeordnetes Thema zu erstellen. Sie greifen auf den Editor zu, indem Sie diesem Pfad folgen. " Darstellung> CSS bearbeiten« .

2. Einfaches benutzerdefiniertes CSS (kostenlos)

Wenn stattdessen wollen Sie eine Stand-alone-Option, Einfacher Benutzerdefinierte CSS ist eine gute Wahl. Dieses kostenlose Plugin, das auf mehr als 200.000-Websites mit einer Bewertung von 4,9-Sternen verwendet wird, hilft Ihnen definitiv dabei, Ihr CSS WordPress-Blog zu personalisieren.

Single-custom-css

Dieses Plugin erfordert keine Konfiguration, Sie müssen nur das Plugin installieren und aktivieren. Um Ihren CSS-Code zu ändern, gehen Sie zu " Darstellung> Benutzerdefiniertes CSS«  im WordPress-Dashboard. Übernehmen Sie Ihre CSS-Änderungen in das Textfeld und speichern Sie anschließend Ihre Einstellungen.

3. CSS Hero (ab 14 USD pro Jahr)

Die letzte Option des WordPress-Plugins, die wir uns heute ansehen, ist ein Premium-WordPress-Plugin namens CSS-Held. Von 14 $ pro Jahr Mit diesem Plugin können Sie für eine Website Ihr WordPress-Design über eine intuitive Benutzeroberfläche anpassen.

CSS Held Wordpress Plugin

Entwarf, gut mit zu arbeiten Dutzende kompatibler WordPress-Themes Mit CSS Hero haben Sie die vollständige Kontrolle über alle Elemente Ihres WordPress-Themas. Für Themen, die nicht in der Liste enthalten sind, können Sie die rocket-Mode um die Anpassung von CSS Hero zu aktivieren.

CSS Hero macht das Verständnis der CSS-Syntax überflüssig, indem die Interaktion mit Code über eine Benutzeroberfläche vereinfacht wird. Dies gilt für Animationen und Übergänge. Sie können Ihre Änderungen auch in Echtzeit in der Vorschau anzeigen und zu einer früheren Version zurückkehren.

Entdecken Sie So verschieben Sie Kommentare in WordPress von einem Artikel in einen anderen

Wenn Sie das CSS Ihres WordPress-Blogs vollständig ändern möchten, aber kein CSS lernen möchten, ist CSS Hero eine großartige Option zum Anpassen Ihrer Website, insbesondere wenn Sie eines ihrer WordPress-Themes verwenden.

Obwohl Sie wissen, dass Inhalte wichtig sind, möchten Sie, dass sich Ihre Website von der Masse abhebt, selbst wenn Sie ein beliebtes WordPress-Thema verwenden. Mit CSS können Sie das Design Ihrer Website so anpassen, dass es völlig einzigartig ist.

Gehen Sie weiter und entdecken Sie Wie zuzulassen, dass bestimmte Seiten bearbeiten

Es gibt also mehrere Möglichkeiten, das CSS Ihres WordPress-Themas anzupassen:

  1. ein Kinderthema.
  2. die Customizer.
  3. CSS-Plugin.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Adning Werbung

WP PRO Advertising System ist ein WordPress-Werbemanagement-Plugin, das strategische 18-Standorte bietet, mit denen Sie Werbung auf Ihrer Website anzeigen können. Es gibt auch einen detaillierten Statistikabschnitt, in dem Sie die Leistung jeder Anzeige sehen können.

Hinzufügen von Werbung WordPress Plugin

Diese Funktion ist von entscheidender Bedeutung, da sie Ihnen hilft, Ihre Kampagne zu verbessern und Ihre Gewinne zu maximieren. Dieses WordPress Adsense-Plugin verfügt außerdem über eine einzigartige Funktion namens Hintergrundanzeigen. Sie können Anzeigen als Hintergrund für Ihre Inhalte anzeigen.

Plus, da es mit Plugins wie kompatibel ist WPBakery et Slider Revolutionkönnen Sie Ihre Anzeigen in Form von Schiebereglern anzeigen oder an einer beliebigen Stelle auf Ihrer Website platzieren.

Herunterladen | Demo | Web-Hosting

2. WP Mediendateimanager

WP Media File Manager ist ein WordPress-Plugin, mit dem Sie die Medienbibliothek mithilfe der Drag & Drop-Funktion einfach in einer Form von Hierarchie organisieren können. Es ist eins von Wordpress-Plugins der leistungsstärkste Dateimanager auf CodeCanyon. Sie müssen Ordner nicht einmal manuell erstellen.

WP Media File Manager WordPress Medienbibliothek Ordner Kategorien Upload Plugin

Mit diesem WordPress-Plugin können Sie Tausende von Dateien vom Dateimanager Ihres PCs auf die Website hochladen, indem Sie die Hierarchie des Quellordners automatisch kopieren. Wenn Sie dieselbe Datei in verschiedenen Ordnern haben möchten, wissen Sie, dass Sie jetzt über eine echte Medienbibliothek verfügen, die diese Funktionalität bietet.

Verabschieden Sie sich von Problemen beim Herunterladen bestimmter Dateitypen. Jetzt müssen Sie nur noch dieses WordPress-Plugin installieren und damit Ihre Dateien verwalten.

Herunterladen | Demo | Web-Hosting

3. Menü-Held

Hero Menu ist ein Mega-Menü WordPress-Plugin. Und obwohl es nicht viel Heldentum leistet, bietet es alle notwendigen Funktionen für nur 19 US-Dollar. Ein bisschen wie Mega Main Menu ist es ein Plugin, das auch Produkte von CodeCanyon enthält und derzeit fast 4500 Verkäufe auf seinem Konto hat.

Hero Menu Responsive WordPress Mega Menü Plugin

Im Abschnitt Funktionen werden Sie schnell feststellen, dass es recht einfach ist, eine zu erstellen megamenu. Der Vorgang dauert nur wenige Schritte. Darüber hinaus werden Sie jedoch feststellen, dass das Plugin mit kompatibel ist WooCommerce, bietet ein ansprechendes Design und eine Drag & Drop-Oberfläche zum Erstellen der Menüs.

Der Menü-Builder verbessert die Verwendung des Plugins und vereinfacht die Arbeit des Käufers erheblich. Die Integration der Benutzeroberfläche ist ebenfalls ein großartiger Job und die Benutzeroberfläche verhält sich perfekt mit anderen Plugins.

Herunterladen | Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Konklusion

Es! Das war's für dieses Tutorial. Wir hoffen, dieses Tutorial hat Ihnen gezeigt, wie Sie das CSS Ihrer WordPress-Website anpassen können. Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.

...