Beste CSS-Codes zum Anpassen von WordPress-Websites

Veröffentlicht: 2022-03-15

Sehen Sie sich einige der besten CSS-Codes zum Anpassen von WordPress an ? Wenn ja, zeigen wir Ihnen einige der am häufigsten verwendeten CSS-Skripte, mit denen Sie Ihre WordPress-Website bearbeiten können.

Wir wissen, dass es viele Optionen gibt, um WordPress mit Plugins, Designoptionen und Standardeinstellungen anzupassen. Sie können aber auch verschiedene Bereiche Ihrer Website mit CSS-Codes bearbeiten. Lassen Sie uns also zuerst sehen, warum Sie sie möglicherweise benötigen, um Ihre Website anzupassen.

Warum werden CSS-Codes in WordPress zum Anpassen von Websites verwendet?

CSS-Skripte oder -Codes werden in WordPress verwendet, um das visuelle Erscheinungsbild einer Website zu verändern. Wenn Sie bestimmte Designänderungen vornehmen möchten, die nicht in den Designoptionen oder den Standardeinstellungen von WordPress enthalten sind, können CSS-Skripte für Sie sehr hilfreich sein.

Sie können ein WordPress-Plugin für Anpassungen installieren, aber Plugins verleihen Ihrem Website-Framework ein gewisses Gewicht, das es verlangsamen könnte. Die Verwendung eines Plugins, um eine kleine Änderung im Erscheinungsbild der Website vorzunehmen, ist den Leistungsabfall nicht wert. Wenn Sie also über Grundkenntnisse im Programmieren verfügen, ist die Verwendung von CSS-Codes die beste Option.

Um sicherzustellen, dass Sie die Geschwindigkeit der Website nicht verlieren, während Sie die visuellen Änderungen vornehmen, empfehlen wir Ihnen dringend, CSS-Codes zu verwenden, um Ihre WordPress-Website anzupassen. Außerdem gibt es möglicherweise einige einzigartige Designs , die Sie manchmal auf Ihrer Website implementieren möchten. Und wenn keine benutzerdefinierten Plugins dafür erstellt wurden, sind CSS-Skripte Ihre einzige Option.

Beste CSS-Codes zum Anpassen einer WordPress-Website

Obwohl es viele CSS-Codes zum Anpassen einer WordPress-Website gibt, stellen wir Ihnen die besten CSS-Skripte vor, die wir gefunden haben. Sie sind einige der am häufigsten verwendeten Codes, um alle Arten von Problemen zu lösen und herausragende Designs zu erzielen, wenn Sie am Frontend einer WordPress-Website arbeiten.

Die folgende Liste von Skripten ist jedoch zu Demonstrationszwecken gedacht. Sie funktionieren möglicherweise nicht auf Ihrer Website, da die verwendeten Selektoren relativ zu einer Beispiel-Website sind. In den meisten Fällen müssen Sie die Selektoren bearbeiten, weshalb Sie Grundkenntnisse in CSS benötigen , um diese Skripte auf Ihrer Website anzuwenden. Sehen Sie sich diesen Beitrag an, wenn Sie mehr über die Anwendung von CSS-Skripten auf einer WP-Website mit dem Entwicklertool erfahren möchten.

Außerdem finden Sie am Ende einen extra Abschnitt, in dem Sie lernen, Ihre CSS-Skripte auf drei verschiedene Arten auf WordPress anzuwenden. Gehen wir nun die Skripte durch

1. Elemente ausblenden

Dies ist wahrscheinlich die am weitesten verbreitete CSS-Regel. Es ist sehr nützlich, wenn Sie ein Element am Front-End oder am Back-End entfernen müssen.

1.1. Kopfzeile ausblenden:

 Header{
    Anzeige: keine;
}

1.2. Blenden Sie die Schaltfläche „In den Warenkorb“ aus

 .single_add_to_cart_button.button{
    Anzeige: keine;
}

1.3. Paniermehl verstecken

 .woocommerce-breadcrumb{
    Anzeige: keine;
}

Hinweis: Dies wird in einigen Fällen nicht empfohlen, da ein verstecktes Element mit einem grundlegenden Verständnis der Browserkonsole sichtbar gemacht werden kann. Beispielsweise müssen Sie möglicherweise ein Formular entfernen, damit die Benutzer es nicht ausfüllen können. Dann möchten Sie dies nicht mit einem CSS-Skript tun, da jeder mit Grundkenntnissen diese sichtbar machen und das Formular trotzdem senden kann.

Es bietet jedoch eine schnelle und einfache Lösung für Styling- oder Designprobleme und wir können es dennoch problemlos verwenden.

Wenn Sie weitere Hilfe zum Ausblenden und Entfernen der Schaltfläche „In den Einkaufswagen“ benötigen, haben wir auch eine detaillierte Anleitung dazu. Ebenso finden Sie in unseren Blogs weitere Informationen, wie Sie Header und Breadcrumbs in WordPress bei Bedarf bearbeiten können.

2. Elemente verschieben

Wenn Sie ein Element verschieben müssen, um das Design einer Seite anzupassen, können Sie es einfach in jede Richtung verschieben, indem Sie Folgendes verwenden:

 #qlwapp{
    unten:45px;
    links:25px;
    Position: relativ;
}

Möglicherweise müssen Sie in einigen Fällen position:relative setzen, wenn das Element zuvor positioniert wurde.

Hinweis: Dies ist nur für geringfügige Anpassungen nützlich, Elemente sollten nicht außerhalb ihrer Container verschoben werden. Sie können oben, rechts, unten, links verwenden und jedem einen Wert zuweisen.

3. CSS-Codes für den mobilen Modus

Wir können CSS auch nur für mobile Geräte anwenden. Dies kann mithilfe von Medienabfragen erfolgen.

Sie funktionieren wie eine bedingte Anweisung. Alle CSS-Regeln innerhalb der Medienabfrage werden nur angewendet, wenn die Bildschirmgröße weniger als 768 Pixel beträgt.

Die angegebene Bildschirmbreite entspricht dem akzeptierten Standard für Mobilgeräte, der 768 Pixel beträgt. Sie können diesen Wert bearbeiten, um ihn auf Geräten mit größeren oder kleineren Bildschirmen anzuwenden.

 @media only screen und (max-width:768px){
    div.masthead{
        display:inline-block;
        Breite: 50 %;
        Rand:auto;
    }
}

4. Text bearbeiten

CSS-Pseudoselektoren sind großartige Ressourcen, um eine WordPress-Website anzupassen. Und mit ihrer klugen Verwendung können wir auch viele Änderungen an Ihrer Website vornehmen. Daher können wir diese CSS-Codes auch verwenden, um den Text Ihrer WordPress-Website anzupassen.

Die Pseudoselektoren :before und :after erlauben es uns, ein „Pseudo-Element“ direkt vor oder nach jedem anderen HTML-Element einzufügen. Auf diese Weise können wir einen Text ausblenden und durch einen anderen ersetzen:

 p.text{
    Sichtbarkeit:versteckt;
}
p.text::before{
    Sichtbarkeit:sichtbar;
    content:'neuer Text hier';
    Bildschirmsperre;
}

5. Übersetzungen mit CSS-Codes

Die Pseudo-Klasse :lang() ermöglicht es uns, CSS-Regeln abhängig von der Sprache der Seite anzuwenden. Selbst wenn es mit einem der Übersetzungs-Plugins wie WPML oder Polylang übersetzt wird, befindet sich das aktuelle lang-Attribut immer im <html> -Haupttag der HTML-Ausgabe der Website.

Die besten CSS-Skripte für WordPress

Wenn wir also den :before -Pseudoselektor wie im vorherigen Beispielskript in Kombination mit der :lang() -Pseudoklasse verwenden, können wir jeden String auf einer Website übersetzen.

Dies funktioniert auch auf mehrsprachigen Websites.

 p.text:lang(de){
    Sichtbarkeit:versteckt; 
} 
p.text:lang(de)::before{ 
    Sichtbarkeit:sichtbar;
    Inhalt:'übersetzter Text';
    Bildschirmsperre; 
}

6. Fügen Sie eine Bildlaufleiste hinzu

Eine Bildlaufleiste kann die Benutzererfahrung auf einer Website verbessern, wenn Sie über umfangreiche Inhalte wie Listen, Bildergalerien oder Abschnitte verfügen. Sie helfen auch dabei, Beiträge und Seiten ohne übermäßige Länge zu pflegen.

Dies ist besonders nützlich für die Verwendung in einer Seitenleiste oder einem anderen Widget-Bereich. Außerdem kann es helfen, Probleme mit fehlenden oder abgeschnittenen Widgets zu beheben, wenn die Höhe auch die verfügbare Größe überschreitet.

Wir können auch eine Bildlaufleiste in Beiträge und Seiten einfügen:

Dieses Skript fügt der Liste eine Bildlaufleiste hinzu, wodurch alle Dokumente viel kürzer werden.

 ul {
    Höhe: 370px;
    Überlauf-y:scrollen;
}

Beste CSS-Skripte für WordPress

7. CSS-Codes zur Verwendung von Bildern als Symbole

Sie können jede Art von Bild mit einem CSS-Skript hinzufügen, und dies kann auf verschiedene Arten erreicht werden. Aber mit dem Pseudoselektor :before können wir ein Bild hinzufügen und es auch wie ein Symbol aussehen lassen.
Stellen Sie sicher, dass Sie ein Bild in die Medienbibliothek hochladen und verwenden Sie den Permalink des Bildes als url('image-link-here')

 .entry-content > p:nth-child(3)::before{
    content:url('http://localhost/Sampler/wp-content/uploads/2022/03/fish-icon.png');
}

Oder wir können echte Symbole verwenden, auch mit demselben Selektor:

 .entry-content > p:nth-child(3)::before{
	Schriftfamilie: „Font Awesome 5 Free“; 
        Schriftstärke: 400; 
        Inhalt: "\f0f3";
}

Um echte Icons zu verwenden, wird in unserem Beispiel der Link-HTML-Tag des Icons auf font awesome 5 Free gesetzt. Es muss im Abschnitt <head> der Webseite geladen werden.

8. Schriftarten ändern

Sie können die Schriftarten einer WordPress-Website auch mit CSS-Codes anpassen. Ähnlich wie bei den Symbolen müssen auch die Schriftarten in den Theme-Header geladen werden, damit wir sie verwenden können. Wir können überprüfen, ob der Schriftartsatz verfügbar ist, indem wir einen Blick auf den Abschnitt <head> der Seite werfen.

Hier wurde die Google-Fonts-Verknüpfung bereits mit Hilfe eines PHP-Skripts hinzugefügt.

besten CSS-Skripte für WordPress

Nachdem Sie bestätigt haben, dass das Symbol oder die Schriftart, die Sie verwenden möchten, bereits im HTML-Abschnitt <head> geladen ist, können Sie es auf der gesamten Website frei verwenden

 h1,h2,h3,p,a,li{
    Schriftfamilie: 'Hubballi', kursiv;
}

Bonus: 3 Möglichkeiten, CSS auf eine WordPress-Website anzuwenden

Wir haben Ihnen einige der am häufigsten verwendeten CSS-Codes zur Verfügung gestellt, um Ihre WordPress-Website anzupassen. Aber Sie müssen auch wissen, wie Sie sie zu Ihrer Website hinzufügen können. Dafür zeigen wir Ihnen in diesem Artikel auch ein kurzes Tutorial als Bonus.

Hier sind also die 3 gängigen Möglichkeiten, CSS auf eine WordPress-Website anzuwenden.

1. Theme-Anpasser

Um das CSS-Skript über den Design-Anpasser hinzuzufügen, müssen Sie lediglich Ihre CSS-Skripte in den Design-Anpasser einfügen. Es kann allgemein für kleine Anpassungen oder Korrekturen angewendet werden.

Gehen Sie zu Darstellung > Anpassen > Zusätzliches CSS , um den Stil-Editor zu öffnen. Fügen Sie dann Ihre CSS-Skripte hier ein.

Die besten CSS-Skripte für WordPress

Skripte hier werden in der Datenbank gespeichert, nachdem Sie auf die Schaltfläche „ Veröffentlichen “ geklickt haben. Sie können die Änderungen auf Ihrer Website sehen, nachdem Sie sie in der Vorschau angezeigt haben.

2. CSS-Datei des untergeordneten Designs

Für diesen Schritt müssen Sie programmgesteuert oder mithilfe eines der Child-Theme-Plugins ein Child-Theme für Ihre Website erstellen, bevor wir beginnen. Stellen Sie dann sicher, dass Ihre Website ein aktives untergeordnetes Design hat, und fügen Sie die CSS-Codes in der Datei style.css . Es ist besser, wenn Sie auch Ihre gesamte Website sichern, da wir die sensiblen Kerndateien Ihrer Website ändern werden.

Öffnen Sie Ihren Code-Editor, um Ihre Skripte dort einzufügen, oder verwenden Sie den in WP integrierten Editor unter Appearance > Theme Files Editor . Öffnen Sie nun das Stylesheet oder die style.css -Datei des Child-Themes.

Dies ist der Ort, an dem Sie alle Ihre benutzerdefinierten Skripte einfügen sollten. Nachdem Sie die CSS-Codes hinzugefügt haben, klicken Sie auf Datei aktualisieren . Wenn es sich jedoch um eine große Datei handelt, ist es möglicherweise eine gute Idee, eine neue Datei oder mehrere zu erstellen.

3. functions.php-Datei eines Child-Themes

Sie können CSS-Stile auch mit einer PHP-Funktion einfügen. Alle auf diese Weise angewendeten Stile werden als Inline-Stile auf der Vorderseite eingefügt.

Stellen Sie genau wie beim vorherigen Ansatz sicher, dass das untergeordnete Thema für Ihre Website aktiv ist. Öffnen Sie dann die Datei functions.php im Theme-Editor und fügen Sie die folgenden Codes hier ein.

 add_action('wp_head','QuadLayers_headlink');
Funktion QuadLayers_headlink(){
	Echo '<Stil>
    .entry-content > p:nth-child(3)::before{
	    Schriftfamilie: „Font Awesome 5 Free“; 
	    Schriftstärke: 400; 
	    Inhalt: "\f0f3";
    }
    h1,h2,h3,p,a,li{
	    Schriftfamilie: "Hubballi", kursiv;
    }</style>';
}

Der große Vorteil dieser Methode besteht darin, dass Sie PHP-Bedingungen anwenden und die volle Leistungsfähigkeit von WP-Hooks und -Funktionen nutzen können.

Wenn Sie mehr über die Anwendung von CSS auf Ihrer Website erfahren möchten, werfen Sie bitte einen Blick auf unsere Anleitung zur Anwendung von CSS auch auf WordPress.

Fazit

Dies sind die am häufigsten verwendeten CSS-Codes zum Anpassen einer WordPress-Website . Wir haben Ihnen alle gängigen Skripte gezeigt, mit denen Sie das visuelle Erscheinungsbild Ihrer Website ändern und einzigartige Designs hinzufügen können. Zusammenfassend haben wir die folgenden Änderungen mit CSS-Skripten behandelt:

  1. Elemente ausblenden
  2. Elemente verschieben
  3. CSS für Mobilgeräte
  4. Text bearbeiten
  5. Übersetzungen
  6. Fügen Sie eine Bildlaufleiste hinzu
  7. Verwenden Sie Bilder als Symbole
  8. Schriftarten ändern

Sie können CSS-Codes ganz einfach verwenden, um diese Elemente Ihrer WordPress-Website anzupassen. Um Ihnen dabei zu helfen, haben wir Ihnen sogar einige Möglichkeiten gezeigt, CSS in WordPress anzuwenden.

Wenn Sie außerdem mehr über CSS in WordPress erfahren möchten, haben wir auch die Anwendung von CSS auf bestimmten Seiten oder Beiträgen behandelt. Ebenso können CSS-Skripte sogar mit Seitenerstellern verwendet werden. Eines der häufigsten Beispiele ist das Anpassen des Divi-Menüs mit CSS.

Was halten Sie also von CSS zum Bearbeiten einer WP-Website? Hast du sie jemals benutzt? Waren sie hilfreich? Bitte teilen Sie uns dies in den Kommentaren mit.

In der Zwischenzeit finden Sie hier weitere Artikel, die Sie interessieren könnten:

  • So erstellen Sie ein benutzerdefiniertes WordPress-Plugin
  • Beheben Sie das Problem, dass das WordPress-Dashboard nicht geladen wird
  • So erstellen Sie ein benutzerdefiniertes WordPress-Feld programmgesteuert