it-swarm.com.de

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 funktioniert das? 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.

11
jay

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'));
24
Fil Joseph

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());
}
2
Abhishek K R

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.

2
p.a.

Um zu verhindern, dass das CSS des Hauptthemas oder andere Dateien überschrieben werden, sollten Sie IMMER ein untergeordnetes Thema in WordPress verwenden. Wenn Sie dies nicht tun, treten später erhebliche Kopfschmerzen und Probleme auf.

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.css-Datei 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 style.css-Hauptdatei zu bearbeiten.

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.

0
sMyles

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung> CSS bearbeiten.  enter image description here 

Hier ist der Bildschirm mit dem grundlegenden CSS-Editor.  enter image description here 

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.

0
suthanalley

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

Codeblock:

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

|
Zusätzliches 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 in der Regel 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, damit wir unsere Skripte in der Fußzeile platzieren können, wenn wir den booleschen Parameter als true verwenden.

0
perfectionist1

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 derselben, bereits verwendeten ID-Ebene), sodass die zuletzt in Ihrer Datei enthaltenen Daten überschrieben werden. Stellen Sie also Ihren Customstyle-Import ganz unten ein, wenn Sie Inhalte überschreiben möchten.

0
woony