Come aggiungere un file CSS personalizzato nel tema?

Di solito aggiungo questopezzo di codice se voglio aggiungere un altrofile css

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

Credo chei creatori deltema vogliano conservareilpiùpossibileil design del layout deltema.Quindi unfile CSSpersonalizzatononfamoltomale.Penso che siapiù una domanda di supporto.Conilfile csspersonalizzato,i produttoripossono aiutare coloro che utilizzanoi lorotemi inmodopiù semplice.Poiché lo style.css originalenon è statomodificato,il creatore deltemapuòprobabilmente dare un'occhiata alfile csspersonalizzato.

I usually add this piece of code if I want to add another css file

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

I believe the theme makers want to retain as much as possible of the theme's layout design. So a custom css file doesn't hurt much. I think it's more of a support question. With custom css file, the makers can help those who use their themes more easier. Because the original style.css is unaltered, so the theme maker can probably take a look in the custom css file.

L'utilizzo di @importin WordPressper aggiungere CSSpersonalizzatinon èpiù labestpractice,mapuoifarlo con quelmetodo.

labestpractice consistenell'usare lafunzione wp_enqueue_style()in functions.php.

Esempio :

 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'));
 

Using @import in WordPress for adding custom css is no longer the best practice, yet you can do it with that method.

the best practice is using the function wp_enqueue_style() in functions.php.

Example:

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'));

Attivailtemafiglioe aggiungiil seguente codice diesempioin function.php

 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());
}
 

Activate the child theme and add the following example code in the function.php

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());
}

Lamiaproposta sarebbe quella di utilizzaretemi figlio. Èmoltofacile daimplementaree tutte lemodifiche chefai (inclusigli stili) sono completamenteisolate daltema originale.

My proposal would be to use child themes. It is very easy to implement and all modifications you do (including styles) are completely isolated from the original theme.

Se vuoi lasciareiltuo html. puoi aggiungerlo altuofile css.Penso che siameglio.

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

anche a seconda deltema,funzionerà coni temi deibambinie deigenitori.

-tieni presente che CSSfunzionain modo sequenziale (quando si utilizza lo stesso livello diidentificatore,già utilizzato),quindi ciò che è l'ultimoneltuofile verrà sovrascritto. quindimetti l'importazionein stilepersonalizzatoin fondo se vuoi sovrascrivere le cose.

If you want to leave your html along. you can add this to your css file. I think this is better.

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

also depending on your theme it will work with child and parent themes.

-- keep in mind, css works sequential (when using the same level of identifier, already used ) , so what is last in your file will overwrite. so put your customstyle import at the bottom if you want to override stuff.

Perevitare la sovrascrittura deltemaprincipale CSS o di altrifile,dovresti SEMPRE utilizzare untemafiglioin WordPress ...nonfarloti causerà sologrossimal ditestae problemi lungo la strada.

https://codex.wordpress.org/Child_Themes

...e vista lafacilità con cuiimpostare un childtheme,non c'èmotivoper cuinon dovresti usarne uno.

L'utilizzo di untemafiglioti consentirà quindi di sovrascrivere qualsiasifile deltemaprincipaleprincipale che desideri,semplicemente copiandolo dagenitore atuofiglio o creando unnuovofile con lo stessonome.

Per quanto riguardailfile custom.css ci sonomoltimodiin cuigli sviluppatori ditemi gestiscono questo ...molti di loro lofanno semplicementeper cercare diimpedire ai client chenon vogliono utilizzare untemafiglio,dallamodifica delfile style.cssprincipale ....

In ogni casonon dovrestipreoccuparti di questo,finché usi un childthemenon dovrestipreoccuparti di aggiornareiltuotemain seguitoe perdere lemodifiche ...prendi l'abitudine di usare sempreil childtemi,mi ringrazieraipiùtardi,loprometto.

To prevent overwritting of main theme CSS or other files, you should ALWAYS use a child theme in WordPress ... not doing so will only cause you major headaches and problems down the road.

https://codex.wordpress.org/Child_Themes

... and with how easy it is to setup a child theme, there is no reason you shouldn't be using one.

Using a child theme will then allow you to override any of the main parent theme files you want, simply by copying from parent into your child, or by creating a new file with the same name.

Regarding the custom.css file there's numerous ways that theme developers handle this ... a lot of them do this simply to try and prevent clients who don't want to use a child theme, from editing the main style.css file ....

Either way you shouldn't be worried about that, as long as you use a child theme you shouldn't have to worry about updating your theme later on and losing your changes ... get in the habit of always using child themes, you will thank me later, i promise.

Ilmodomigliore è combinaretuttigli stili accodatiin una singolafunzione e quindi chiamarli utilizzando l'azione wp_enqueue_scripts . Aggiungi lafunzione definita alfunctions.php deltuotema da qualcheparte sotto la configurazioneiniziale.

<" Blocco codice:

 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' );
 

Nota:

Ilterzoparametro è l'array delle dipendenze che si riferisce alla dipendenza omeno di questofoglio di stile da un altrofoglio di stile. Quindi,nelnostro codice sopra custom.css dipende da style.css

|
Informazioni dibase aggiuntive:
Lafunzione wp_enqueue_style()può avere 5parametri: in questomodo - wp_enqueue_style ( $ handle,$ src,$ deps,$ ver,$media );
Nelmondo reale di WP Coding,di solito aggiungiamo anchefilejavascript/libreriejQuery all'interno di quellafunzionein questomodo:

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

Il quintoparametrotrue/false èfacoltativo (ancheil secondo,ilterzoe il quartoparametro sono opzionali)mamoltoessenziale,ci consente diposizionarei nostri script apiè dipagina quando usiamoilparametrobooleano come vero.

The best way is to combine all enqueued styles into a single function and then call them using wp_enqueue_scripts action. Add the defined function to your theme's functions.php somewhere below the initial setup.

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' );

Please Note :

3rd parameter is the dependency array which refers to whether or not this stylesheet is dependent on another stylesheet. So, in our above code custom.css is dependent on style.css

|
Additional Basic:
wp_enqueue_style() function may have 5 parameters: like this way - wp_enqueue_style( $handle, $src, $deps, $ver, $media );
In real world of WP Coding, usually we also add javascript files/jQuery libraries inside that function like this way:

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

The 5th parameter true/false is optional (2nd, 3rd and 4th params are also opt.) but very essential, it allows us to place our scripts in footer when we use the boolean parameter as true.

Vai su Aspetto> Modifica CSS dalla dashboard di WordPress.

Ecco la schermata con l'editor CSS dibase.

Oraincollailtuo CSS direttamenteneltestopredefinito.Puoieliminareiltestopredefinitoin modo cheiltuo CSS venga visualizzato solonell'editor.Quindi salvailfoglio di stilee iltuo CSS sarà attivo.

Go to Appearance > Edit CSS from your WordPress Dashboard.

Here is the screen with basic CSS editor.

Now paste your CSS directly to the default text. You can delete the default text so that your CSS only appears in the editor. Then save the stylesheet and your CSS will be live.

Se vuoievitareproblemi di cache delbrowser web,deviincludere la versione delfile,comein questoesempio èmostrato.

 wp_enqueue_style ('theme-style', get_template_directory_uri().'/path/to/css/style.css?v=' . filemtime(get_template_directory() . '/path/to/css/style.css'));
 

In questo caso,scrivo la data dell'ultimamodificain unixtime comeparametro query.

If you want to avoid web browser cache problems, you need include the file version, like in this example is shown.

wp_enqueue_style ('theme-style', get_template_directory_uri().'/path/to/css/style.css?v=' . filemtime(get_template_directory() . '/path/to/css/style.css'));

In this case, I write the last modification date in unix time as a query param.

Usa untemafiglio.È la soluzionemigliore.In questomodo,seiltema viene aggiornato,non sovrascriverài fogli di stile che hai creato.

https://codex.wordpress.org/Child_Themes

Segui questa strada,ti ringrazieraipiùtardi.

Use a child theme. It's your best bet. This way if the theme is ever updated, you won't override the stylesheets you've created.

https://codex.wordpress.org/Child_Themes

Go this route, you'll thank yourself later.