Einreihen von Stylesheets und JavaScript in untergeordnete WordPress-Themes

Einbinden von CSS und JS in ein untergeordnetes WordPress-Theme Das Hinzufügen von CSS und JS zu einem untergeordneten WordPress-Theme ist ein einfacher Vorgang. Sie können dies tun, indem Sie der Datei functions.php Ihres Child-Themes ein paar Codezeilen hinzufügen. Zuerst müssen Sie das Stylesheet und die JavaScript-Datei in die Datei functions.php Ihres Child-Themes einreihen. Als Nächstes müssen Sie das Stylesheet und die JavaScript-Datei in die Datei functions.php Ihres untergeordneten Designs einreihen. Sie können dies tun, indem Sie der Datei functions.php Ihres Child-Themes den folgenden Code hinzufügen: function my_theme_scripts() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . ' /style.css' ); wp_enqueue_script( 'script', get_template_directory_uri() . ' /js/script.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' ); Dadurch wird sichergestellt, dass das Stylesheet und die JavaScript-Datei des übergeordneten Designs zuerst geladen werden, gefolgt von denen des untergeordneten Designs. Sie können das Stylesheet und die JavaScript-Datei auch in die Fußzeile einreihen. Dazu müssen Sie der Datei functions.php Ihres Child-Themes den folgenden Code hinzufügen: function my_theme_scripts() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . ' /js/script.js', array(), '1.0.0', wahr ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts', 100 ); Dieser Code sollte nach dem Action-Hook wp_enqueue_scripts hinzugefügt werden. Das Einreihen des Stylesheets und der JavaScript-Datei in die Fußzeile wird nicht empfohlen, da dies zu Problemen mit WordPress-Plugins führen kann.

Dieses Tutorial erklärt, wie man zum ersten Mal übergeordnete Stylesheets in Child Themes einbindet. Die @import-Methode, die ihre eigenen Fallstricke und Vorbehalte hat, wird immer noch von vielen Entwicklern verwendet. Die Enqueue-Methode sollte stattdessen verwendet werden, wenn Sie style.css anstelle von @import importieren möchten. In diesem Tutorial zeigen wir Ihnen, wie Sie Stylesheets in Child-Themes einreihen. Als letzten Schliff können Sie mit dieser Funktion sowohl die übergeordneten als auch die untergeordneten Stile zum untergeordneten Design hinzufügen. WordPress lädt zuerst die untergeordneten Stile, da die untergeordneten Stile durch die übergeordneten Stile bestimmt werden. Es empfiehlt sich, Ihre Stylesheets zu registrieren, bevor Sie sie für die Verteilung in die Warteschlange stellen, wenn Sie Designs für die Verteilung erstellen.

Das Hinzufügen von Skript- und Stilregistrierung gibt Ihnen mehr Flexibilität und macht es einfacher, Ihre Codes sauber und ordentlich zu halten. Wenn Sie andere Slugs für übergeordnete Stile verwenden, müssen Sie das übergeordnete Thema aktualisieren. Weitere Informationen zu diesem Tutorial finden Sie am Ende.

Wie füge ich meinem untergeordneten WordPress-Theme ein benutzerdefiniertes CSS hinzu?

Um Ihrem untergeordneten WordPress-Theme eine benutzerdefinierte CSS-Datei hinzuzufügen, müssen Sie sie auf Ihren Server hochladen und sie dann in die Datei functions.php Ihres untergeordneten Themes aufnehmen. Hier ist ein Beispiel dafür: 1. Laden Sie Ihre benutzerdefinierte CSS-Datei auf Ihren Server hoch. 2. Bearbeiten Sie die Datei functions.php Ihres Child-Themes und fügen Sie die folgende Codezeile hinzu: wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . ' /custom.css' ); Dadurch wird WordPress angewiesen, Ihre benutzerdefinierte CSS-Datei zu laden, wenn Ihr untergeordnetes Design aktiv ist.

Sobald Sie ein untergeordnetes Thema erstellt haben, können Sie dessen Design und Konfiguration anpassen. Der einfachste Weg, Ihr Child-Theme anzupassen, ist die Verwendung des Cascading Style Sheet (CSS). Stil. CSS ist die Datei, die die Regeln speichert, die das Erscheinungsbild Ihrer Website regeln, und sie ist in allen untergeordneten Themen zu finden. Beim Surfen auf einer Website ermöglichen Ihnen die meisten Webbrowser, das CSS der Website zu überprüfen. WordPress verwendet die Child-Theme-Dateien als Standard gegenüber den Child-Theme-Äquivalenten im Parent-Theme-Ordner. Die Kopf-, Fußzeilen-, Seitenlayout- und Seitenleistendateien sind alle separat verfügbar. Sie können diese Dateien nur auf Ihrer Website sehen, da sie nur im untergeordneten Themenordner enthalten sind.

> Verwenden von benutzerdefiniertem CSS in WordPress

br> ist ein PHP-Skript. WP_enqueue_script (benutzerdefiniertes CSS); (.htaccess).
WP_enqueue_style ('custom-css', 'cssstyle.'); ***br>

So fügen Sie benutzerdefiniertes CSS in einem untergeordneten WordPress-Theme hinzu

Wenn du benutzerdefiniertes CSS zu einem untergeordneten WordPress-Theme hinzufügen möchtest, kannst du dies tun, indem du eine neue Datei im Verzeichnis des untergeordneten Designs erstellst und ihr deinen CSS-Code hinzufügst. Um eine neue Datei hinzuzufügen, können Sie einen Texteditor wie Notepad oder TextEdit verwenden. Sobald Sie die Datei erstellt haben, können Sie Ihren CSS-Code hinzufügen und speichern.

Wann werden Sie ein untergeordnetes Design verwenden oder nur CSS zum Customizer hinzufügen? Was sind einige Beispiele für ein Code-Snippet-Plugin, das sinnvoller ist? Ein Child-Theme hingegen übernimmt in gewisser Weise viele Eigenschaften eines Parent-Themes. Um Themen für Kinder zu erstellen, haben wir einen Leitfaden erstellt. Wenn WordPress-Benutzer Änderungen an ihrem Parent-Theme vornehmen müssen, können sie Child-Themes erstellen. Aus Sicherheits- und Funktionsgründen ist es wichtig, WordPress-Themes und Plugins auf dem neuesten Stand zu halten. Da Sie Ihr Design jedoch nicht jedes Mal neu anpassen möchten, wenn es aktualisiert werden muss, ist das Hinzufügen von Stilen zu einem untergeordneten Design eine gute Idee.

WordPress wurde in den letzten Jahren dank der Implementierung von Kadence vereinfacht. Die meisten Websitebesitzer benötigen lediglich den Customizer. Wenn Sie nur ein paar Zeilen CSS-Code hinzufügen müssen, ist der Customizer die beste Option. Das Code Snippets-Plugin hat sich für die überwiegende Mehrheit der Benutzer als der einfachste Weg erwiesen, dies zu erreichen. Mit einem untergeordneten Design können Sie einer Datei mehrere CSS-Zeilen hinzufügen und sie über das Dateisystem verwalten. Unter Verwendung eines untergeordneten Themas verwendet es einen Stil. CSS-Datei, die von Browsern zwischengespeichert werden kann und die Wahrscheinlichkeit von Leistungsproblemen verringert.

Das Code-Snippets-Plugin ist eine Verbesserung für Plugin-Minimalisten, die ihre Websites mit so wenig Plugins wie möglich betreiben möchten. Der Customizer muss mit mehr CSS verwendet werden, da er zu schmal und für viele CSS ungeeignet ist. Sie können jedoch je nach Ihren Vorlieben einen beliebigen Texteditor verwenden, wenn Sie ihn einem Stylesheet hinzufügen. Sie können die CSS-Datei sogar im WordPress-Admin-Fenster bearbeiten, indem Sie den Theme-Editor verwenden.