Wie füge ich eine benutzerdefinierte CSS-Datei in ein Theme ein?

Bei einigen Designs werden Sie aufgefordert, die Datei style.css nicht zu bearbeiten, sondern die Datei custom.css zu verwenden. Wenn Sie Code in custom.css schreiben, wird derselbe Elementstil in style.css überschrieben. Ich denke, dies geschieht, um den Verlust von Benutzerstilen bei der Themenaktualisierung zu verhindern, oder?

Wie das geht Enthalten sie die Datei custom.css bereits in ihrem Design? Aber wie wird diese Datei in das Thema aufgenommen, damit das Thema zuerst in custom.css nach Stil sucht? Vielen Dank.

Normalerweise füge ich diesen Code hinzu, wenn ich eine weitere CSS-Datei hinzufügen möchte

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

Ich glaube, die Theme-Macher möchten das Layout des Themas so weit wie möglich beibehalten. Eine benutzerdefinierte CSS-Datei schadet also nicht viel. Ich denke, es ist eher eine Support-Frage. Mit der benutzerdefinierten CSS-Datei können die Hersteller denjenigen helfen, die ihre Themen einfacher verwenden. Da die ursprüngliche Datei style.css unverändert ist, kann der Theme Maker möglicherweise einen Blick in die benutzerdefinierte CSS-Datei werfen.

Die Verwendung von @import in WordPress zum Hinzufügen von benutzerdefiniertem CSS ist nicht mehr die beste Vorgehensweise. Sie können dies jedoch mit dieser Methode tun.

Die beste Methode ist die Verwendung der Funktion wp_enqueue_style()in functions.php.

Beispiel :

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));

Aktivieren Sie das untergeordnete Thema und fügen Sie den folgenden Beispielcode in die function.php ein

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}

Mein Vorschlag wäre, untergeordnete Themen zu verwenden. Es ist sehr einfach zu implementieren und alle von Ihnen vorgenommenen Änderungen (einschließlich der Stile) sind vollständig vom ursprünglichen Thema isoliert.

Um zu verhindern, dass das CSS des Hauptthemas oder andere Dateien überschrieben werden, sollten Sie IMMER ein untergeordnetes Thema in WordPress verwenden.

https://codex.wordpress.org/Child_Themes

... und so einfach es ist, ein untergeordnetes Thema einzurichten, gibt es keinen Grund, warum Sie keines verwenden sollten.

Wenn Sie ein untergeordnetes Thema verwenden, können Sie alle gewünschten übergeordneten Hauptthemadateien überschreiben, indem Sie einfach vom übergeordneten Thema in das untergeordnete Thema kopieren oder eine neue Datei mit demselben Namen erstellen.

In Bezug auf die custom.cssDatei gibt es zahlreiche Möglichkeiten, wie Theme-Entwickler damit umgehen können. Viele tun dies nur, um Kunden, die kein untergeordnetes Theme verwenden möchten, daran zu hindern, die Hauptdatei zu bearbeiten style.css.

So oder so sollten Sie sich darüber keine Sorgen machen, solange Sie ein untergeordnetes Thema verwenden, sollten Sie sich nicht darum kümmern müssen, Ihr Thema später zu aktualisieren und Ihre Änderungen zu verlieren. Gewöhnen Sie sich an, immer untergeordnete Themen zu verwenden, Sie werde mich später bedanken, das verspreche ich.

Wenn Sie Ihren HTML-Code mitnehmen möchten. Sie können dies zu Ihrer CSS-Datei hinzufügen. Ich denke das ist besser.

@import url("../mycustomstyle.css");

Abhängig von Ihrem Thema funktioniert es auch mit untergeordneten und übergeordneten Themen.

- Denken Sie daran, dass CSS sequentiell arbeitet (bei Verwendung der gleichen, bereits verwendeten Identifizierungsstufe), sodass überschrieben wird, was zuletzt in Ihrer Datei vorhanden ist. Stellen Sie also Ihren Customstyle-Import ganz unten ein, wenn Sie Inhalte überschreiben möchten.

Der beste Weg ist , alle in die Warteschlange gestellten Stile zu einer einzigen Funktion zu kombinieren und sie dann mit wp_enqueue_scriptsaction aufzurufen . Fügen Sie die definierte Funktion der functions.php Ihres Themas irgendwo unterhalb des anfänglichen Setups hinzu.

Code Block:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

Bitte beachten Sie :

Der dritte Parameter ist das Abhängigkeitsarray, das angibt, ob dieses Stylesheet von einem anderen Stylesheet abhängig ist oder nicht. In unserem obigen Code ist custom.css von style.css abhängig

|
Additional Basic:
wp_enqueue_style() function kann 5 Parameter haben: so - wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
In der realen Welt der WP-Codierung fügen wir normalerweise auch Javascript-Dateien / jQuery-Bibliotheken hinzu, die folgendermaßen funktionieren:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Der 5. Parameter true / false ist optional (2., 3. und 4. Parameter sind ebenfalls opt.), Aber sehr wichtig. Er ermöglicht es uns, unsere Skripte in der Fußzeile zu platzieren, wenn wir den booleschen Parameter als true verwenden.

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung> CSS bearbeiten.

Hier ist der Bildschirm mit dem grundlegenden CSS-Editor.

Fügen Sie nun Ihr CSS direkt in den Standardtext ein. Sie können den Standardtext löschen, sodass Ihr CSS nur im Editor angezeigt wird. Speichern Sie dann das Stylesheet und Ihr CSS wird live sein.

Verwenden Sie ein untergeordnetes Thema. Es ist Ihre beste Wette. Auf diese Weise werden die von Ihnen erstellten Stylesheets nicht überschrieben, wenn das Thema jemals aktualisiert wird.

https://codex.wordpress.org/Child_Themes

Gehen Sie diese Route, Sie werden sich später bedanken.