Wenn Sie entweder ein eigenes WordPress-Theme erstellen, ein untergeordnetes Theme aus dem übergeordneten Theme erstellen oder ein Theme bearbeiten, müssen Sie Ihr eigenes CSS-Stylesheet hinzufügen. Höchstwahrscheinlich möchten Sie auch einige Stile aus dem Standarddesign-Stylesheet überschreiben.
Es gibt verschiedene Möglichkeiten, eigene Stile hinzuzufügen und/ oder Standardstile zu überschreiben. Also, was ist der beste Weg, es zu tun? Entwickler werden zustimmen, dass Sie Ihre eigenen benutzerdefinierten CSS-Dateien erstellen und diese in das WordPress-Theme einbetten, an dem Sie arbeiten.
Möglichkeiten zum Hinzufügen von benutzerdefiniertem CSS-Code zu WordPress-Themes
Wir werden nicht über abgeschriebene Möglichkeiten zum Hinzufügen von CSS-Stilen zu HTML-Elementen oder zum Hinzufügen von <style> -Blöcken sprechen. Heutzutage werden diese Methoden von Entwicklern aufgegeben. Außerdem sind sie nicht SEO-freundlich, was heutzutage ein wichtiges Thema ist.
Wir werden nicht einmal vorschlagen, das ursprüngliche CSS-Stylesheet des Themas zu bearbeiten (normalerweise style.css) oder Hinzufügen von benutzerdefiniertem Code. Diese Datei ist oft sehr groß und schwer zu verwalten. Jeder kleine Tippfehler oder Syntaxfehler kann dazu führen, dass die gesamte Site abstürzt.
In diesem Artikel zeigen wir Ihnen, wie Sie eine benutzerdefinierte CSS-Datei erstellen und in ein WordPress-Theme einbetten.
Es gibt verschiedene Methoden zum Hinzufügen von benutzerdefiniertem CSS-Code zu WordPress-Themes. Was ist die beste Praxis?
Hinzufügen benutzerdefinierter Stylesheet-Dateien zu WordPress-Themes mit wp_register_style() und wp_enqueue_style()
Der erste Schritt zum Einbetten benutzerdefinierter CSS-Dateien in WordPress besteht darin, Dateien zu Ihrem Thema hinzuzufügen. Suchen Sie entweder mit einem FTP-Client oder Ihrem cPanels-Dateimanager Ihren Themenordner und öffnen Sie ihn. Jetzt können Sie entweder eine neue Datei und einen neuen Namen in beispielsweise benutzerdefiniert erstellen.css oder laden Sie die CSS-Datei von Ihrem Computer hoch. Falls Sie Ihrem WP-Thema mehr als eine CSS-Datei hinzufügen müssen, wiederholen Sie diesen Schritt.
Wenn Sie diesen Schritt korrekt ausgeführt haben, sollten Ihre benutzerdefinierten CSS-Dateien in Ihrem WordPress-Installations-Theme-Editor angezeigt werden.
Verknüpfen benutzerdefinierter CSS-Dateien der Head-Sektion der Site
Nachdem Sie Ihre benutzerdefinierten CSS-Dateien zu Ihrem WP-Themenordner hinzugefügt haben, ist es an der Zeit, die Dateien mit dem Head-Abschnitt Ihrer Site <> zu verknüpfen. Auf diese Weise kann die Site Ihre benutzerdefinierten Stile auf ihre Elemente anwenden.
Sie können einfach ein <link> -Element zum <head> -Abschnitt Ihrer Site hinzufügen, vorzugsweise direkt vor dem schließenden </head> -Tag. Auf diese Weise werden benutzerdefinierte CSS-Stile zuletzt geladen und überschreiben die Standardstile. Der Abschnitt <head> Ihrer Site befindet sich normalerweise in der Überschrift Ihres Themenordners.PHP-Datei und ist über den WordPress-Theme-Editor zugänglich.
Hier ist ein Beispiel für das -Element Wenn sich Ihre Site im Ordner „test-site“ im Stammordner Ihres Servers befindet, heißt Ihr Themenordner „test-theme“ und Ihre CSS-Datei heißt „custom.css“:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">Diese einfache Lösung wird gut funktionieren, aber es ist nicht die beste Methode, CSS-Dateien in WordPress-Sites einzubetten.
Einbetten einer CSS-Datei in WordPress mithilfe der Funktionen wp_register_style() und wp_enqueue_style()
Zum Einbetten benutzerdefinierter CSS-Dateien in Ihre WordPress-Site wird empfohlen, Ihr Stylesheet in den Funktionen Ihres WP-Themas zu registrieren.PHP-Datei mit den Funktionen wp_register_style() und wp_enqueue_style(). Auf diese Weise werden Ihre CSS-Dateien in dem Moment geladen, in dem die Aktion wp_head ausgelöst wird. Ihr Stylesheet wird direkt nach dem Standard-Stylesheet des Designs positioniert. und erlauben Ihnen, Standardstile zu überschreiben.
Das erste, was Sie tun müssen, ist, die Funktionen Ihres Themas zu finden.PHP-Datei. Es befindet sich im WordPress Theme Editor. Sie können dies auch mit dem FTP- oder cPanels-Dateimanager tun. Wenn Sie an einem untergeordneten Thema arbeiten, bearbeiten Sie die Funktionsdatei für untergeordnete Themen, nicht die übergeordnete. Auf diese Weise vermeiden Sie den Verlust Ihres benutzerdefinierten Codes beim Aktualisieren des übergeordneten Themas. Scrollen Sie nach unten zum Ende der Funktionen.php und fügen Sie das folgende Code-Snippet hinzu:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );Passen Sie das Snippet an: Im obigen Beispiel haben wir die Registrierungsfunktion „additional_stylesheets“ benannt und eine Stylesheet-CSS-Datei mit dem Namen „custom.css“, zuvor in unseren Themenordner hochgeladen. Sie können die Funktion nach Belieben benennen und den Funktionsnamen in der oberen und unteren Zeile des Snipets ersetzen. Wenn Ihre Stylesheet-Datei einen anderen Namen als benutzerdefiniert hat.css Ersetzen Sie das Wort benutzerdefiniert im Snipet durch Ihren eigenen Dateinamen.
Wenn Sie alles richtig gemacht haben, können Sie Ihren eigenen CSS-Code in Ihr Stylesheet schreiben. Sie werden feststellen, dass sich Ihre Stile auf die Site auswirken, wenn Sie Änderungen speichern und die Seite neu laden. Vergessen Sie nicht, den Cache Ihres Browsers zu bereinigen, wenn Sie die Seite aktualisieren.
Einbinden mehrerer benutzerdefinierter Stylesheet-CSS-Dateien in Funktionen.php mit wp_register_style() und wp_enqueue_style()
Bevor Sie Ihrem WP-Thema mehrere CSS-Dateien hinzufügen, sollten Sie berücksichtigen, dass beim Laden der Site mehr Serveranforderungen auftreten, was sich auf die Ladegeschwindigkeit Ihrer Site auswirkt. Versuchen Sie, so wenig Stylesheets wie möglich zu verwenden.
Angenommen, Sie haben eine separate Stylesheet-Datei für Desktop-Stile mit dem Namen custom .css und eine zweite Stylesheet-Datei namens responsive.css für mobile Geräte. Einbetten beider Stylesheets in Ihre Funktionen.die PHP-Datei ist einfach und erfordert eine geringfügige Änderung des oben gezeigten einzelnen Dateiausschnitts:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );Ändern Sie wie beim Anpassen des einzelnen Dateiausschnitts die Dateinamen entsprechend Ihrer Situation.
Weitere Informationen zu den Funktionen wp_register_style() und wp_enqueue_style()
Weitere Informationen zur Verwendung der Funktionen wp_register_style() und wp_enqueue_style() zum Registrieren von Stylesheets finden Sie auf der entsprechenden WP Codex-Seite.