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

15

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.

Jay
quelle
Wenn die Person, die diese Frage stellt, Deutsch ist, bedeutet "Überschreiben" mit ziemlicher Sicherheit "Überschreiben". Ich gehe davon aus, dass die Frage nicht besagt, dass das Einfügen von Code in die Datei custom.css dazu führt, dass die Datei style.css geändert wird. Ich sage das nicht als kritisch, ich sage, dass ich verwirrt bin und das ist mein Verständnis.
user34660

Antworten:

1

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.

Wai Wong
quelle
2
nicht mehr best practice - developer.wordpress.org
iantsch
@iantsch warum nicht? Was ist besser? Ich könnte nichts besseres finden.
Kangarooo
2
@ Kangarooo sehen Sie die Antwort von Fil Joseph: Stellen Sie die Skripte / Stile in die Warteschlange, die in der Kopf- oder Fußzeile enthalten sein sollen
iantsch
Bei HTTP / 1 empfiehlt es sich, alle grundlegenden Stile in eine minimierte Datei zu packen, anstatt eine weitere CSS-Datei hinzuzufügen, die der Browser herunterladen und verarbeiten muss.
Andy
In meinem Fall war dies die beste Lösung.
Rich
27

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'));
Fil Joseph
quelle
1
Fügen Sie die Abhängigkeit des übergeordneten Elements hinzu style.css , um sicherzustellen, dass das mystyle.cssElement nach dem style.css! Geladen wird.
Sumit
Ich verstehe den Pfad-Teil, aber was ist mit dem ersten Teil, dem 'Theme-Style'- und dem' My-Style'-Teil, kann ich da irgendetwas einfügen? Und was ist in der functions.php mit dem gesamten Code, um dies zum Laufen zu bringen?
Bruno Vincent
@BrunoVincent Sie können das, handlewas Sie wollen, benennen , solange es einzigartig ist. Siehe doc
Fahmi
4

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());
}
Abhishek KR
quelle
2

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.

pa
quelle
0

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.

sMyles
quelle
0

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.

Wehmut
quelle
CSS funktioniert nicht sequenziell, sondern basierend auf der Spezifität der Regel. Es wird nur zurückgesetzt, wenn Sie Regeln gleicher Spezifität haben
srcspider
Sie haben Recht, und das meine ich. meine sequentielle bezieht sich auf das überschreiben. nicht CSS als Ganzes.
Woony
0

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.

Perfektionist1
quelle
0

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

Hier ist der Bildschirm mit dem grundlegenden CSS-Editor. Bildbeschreibung hier eingeben

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.

Suthanalley
quelle
-2

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.

thisisbolo
quelle
Das beantwortet die Frage nicht wirklich. Vielleicht möchten Sie dann erklären, wie Sie das Stylesheet im untergeordneten Design hinzufügen.
Kaiser