Come aggiungere un file css personalizzato nel tema?

Alcuni temi richiedono di non modificare il file style.css, ma utilizzare il file custom.css. Se scrivi il codice su custom.css, sovrascriverà lo stesso stile di elemento in style.css. Penso che questo sia fatto per prevenire la perdita di stili utente durante l'aggiornamento del tema, è così?

Come funziona? Includono già il file custom.css nel loro tema? Ma come questo file è incluso nel tema in modo che il tema cerchi prima lo stile in custom.css? Grazie.

Di solito aggiungo questo pezzo di codice se voglio aggiungere un altro file CSS

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

Credo che i creatori del tema vogliano conservare il più possibile il design del layout del tema. Quindi un file CSS personalizzato non fa molto male. Penso che sia più una domanda di supporto. Con il file css personalizzato, i produttori possono aiutare coloro che usano i loro temi più facilmente. Poiché l'originale style.css è inalterato, quindi il creatore del tema può probabilmente dare un'occhiata al file css personalizzato.

L'uso di @import in WordPress per l'aggiunta di CSS personalizzati non è più la migliore pratica, ma puoi farlo con quel metodo.

la migliore pratica è usare la funzione 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'));

Attiva il tema figlio e aggiungi il seguente codice di esempio in 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());
}

La mia proposta sarebbe quella di utilizzare temi figlio. È molto facile da implementare e tutte le modifiche apportate (inclusi gli stili) sono completamente isolate dal tema originale.

Per evitare la sovrascrittura del tema CSS principale o di altri file, dovresti SEMPRE utilizzare un tema figlio in WordPress ... non farlo causerà solo grossi mal di testa e problemi lungo la strada.

https://codex.wordpress.org/Child_Themes

... e con quanto è facile impostare un tema figlio, non c'è motivo per cui non dovresti usarne uno.

L'utilizzo di un tema figlio ti consentirà quindi di sovrascrivere uno qualsiasi dei principali file di temi principali desiderati, semplicemente copiando da padre a tuo figlio o creando un nuovo file con lo stesso nome.

Per quanto riguarda il custom.cssfile ci sono molti modi in cui gli sviluppatori di temi gestiscono questo ... molti di loro lo fanno semplicemente per cercare di impedire al client che non vuole usare un tema figlio di modificare il style.cssfile principale ....

In ogni caso non dovresti preoccuparti di ciò, finché usi un tema figlio non dovresti preoccuparti di aggiornare il tema in seguito e di perdere le modifiche ... prendi l'abitudine di usare sempre temi figlio, tu mi ringrazierò più tardi, lo prometto.

Se vuoi lasciare il tuo html insieme. puoi aggiungerlo al tuo file css. Penso che sia meglio

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

inoltre, a seconda del tema, funzionerà con temi figlio e genitore.

- tieni presente che css funziona in modo sequenziale (quando si utilizza lo stesso livello di identificativo, già utilizzato), quindi l'ultimo che verrà inserito nel tuo file verrà sovrascritto. quindi metti la tua importazione customstyle in fondo se vuoi sovrascrivere le cose.

Il modo migliore è combinare tutti gli stili accodati in un'unica funzione e quindi chiamarli usando l' wp_enqueue_scriptsazione . Aggiungi la funzione definita alle funzioni.php del tuo tema da qualche parte sotto l'installazione iniziale.

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

Notare che :

Il terzo parametro è l'array di dipendenze che fa riferimento al fatto che questo foglio di stile dipenda o meno da un altro foglio di stile. Quindi, nel nostro codice sopra custom.css dipende da style.css

|
Base aggiuntiva: la
wp_enqueue_style() funzione può avere 5 parametri: in questo modo - wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
Nel mondo reale della codifica WP, di solito aggiungiamo anche file javascript / librerie jQuery all'interno che funzionano in questo modo:

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

Il 5o parametro vero / falso è facoltativo (anche il 2o, 3o e 4o parametro sono opz.) Ma molto essenziale, ci permette di mettere i nostri script in piè di pagina quando usiamo il parametro booleano come vero.

Vai su Aspetto> Modifica CSS dalla dashboard di WordPress.

Ecco la schermata con l'editor CSS di base.

Ora incolla il tuo CSS direttamente sul testo predefinito. Puoi eliminare il testo predefinito in modo che il tuo CSS appaia solo nell'editor. Quindi salva il foglio di stile e il tuo CSS sarà attivo.

Usa un tema figlio. È la tua scommessa migliore. In questo modo, se il tema viene mai aggiornato, non sostituirai i fogli di stile che hai creato.

https://codex.wordpress.org/Child_Themes

Segui questa strada, ti ringrazierai più tardi.