fie dacă vă creați propria temă WordPress, o temă copil de la părintele său, fie editați o temă, veți întâlni nevoia de a adăuga propria foaie de stil personalizată CSS. Cel mai probabil, veți dori, de asemenea, să suprascrie unele stiluri din foaia de stil temă implicită.

există mai multe moduri de a adăuga propriile stiluri și/sau de a suprascrie stilurile implicite. Deci, care este cel mai bun mod de a face acest lucru? Dezvoltatorii vor fi de acord că este prin crearea propriilor fișiere CSS personalizate și încorporarea lor în Tema WordPress la care lucrați.

modalități de a adăuga cod CSS personalizat la temele WordPress

nu vom vorbi despre modalități depreciate de a adăuga stiluri CSS în elemente HTML sau de a adăuga blocuri de stil <>. În zilele noastre, aceste metode sunt abandonate de dezvoltatori. De asemenea, nu sunt prietenoase cu SEO, ceea ce este o problemă importantă de care trebuie să ne pese în zilele noastre.

nici măcar nu vom sugera editarea foii de stil CSS originale a temei (de obicei stil.css), sau adăugarea de cod personalizat la acesta. Acest fișier este adesea foarte mare și dificil de gestionat. Orice mică greșeală de tastare sau eroare de sintaxă din ea ar putea provoca blocarea întregului site.

în acest articol vă vom arăta cum să creați un fișier CSS personalizat și să îl încorporați într-o temă WordPress.

cum să adăugați fișiere personalizate de foi de stil la temele WordPress folosind wp_register_style() și wp_enqueue_style()

primul pas al încorporării fișierelor CSS personalizate în WordPress este adăugarea fișierelor la tema dvs. Fie folosind un client FTP sau managerul de fișiere cPanels localiza folderul temă și deschideți-l. Acum Puteți crea fie un nou fișier și nume în, de exemplu, personalizat.css sau încărcați fișierul CSS de pe computer. În cazul în care trebuie să adăugați mai multe fișiere CSS la tema WP, repetați acest pas.

dacă ați finalizat corect acest pas, ar trebui să vedeți fișierul sau fișierele CSS personalizate în Editorul de teme de instalare WordPress.

legarea fișierelor CSS personalizate secțiunea capului site-ului

acum, că ați adăugat fișierele CSS personalizate în folderul temei WP, este timpul să conectați fișierele în secțiunea <cap> a site-ului. În acest fel, site-ul poate aplica stilurile dvs. personalizate elementelor sale.

puteți adăuga pur și simplu un element < link>la secțiunea < head>a site-ului dvs., de preferat chiar înainte de eticheta </head> de închidere. În acest fel, stilurile CSS personalizate încarcă ultimele și înlocuiesc stilurile implicite. Secțiunea < head > a site-ului dvs. se află de obicei în antetul folderului tematic.fișier php și este accesibil prin editorul de teme WordPress.

Iată un exemplu al elementului când site-ul dvs. este localizat în folderul „test-site” din folderul rădăcină al serverului dvs., folderul tematic se numește „test-theme” și fișierul CSS se numește „personalizat.css”:

<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">

această soluție simplă va funcționa bine, dar nu este cea mai bună practică de încorporare a fișierelor CSS în Site-urile WordPress.

încorporarea unui fișier CSS în WordPress folosind funcțiile wp_register_style() și wp_enqueue_style ()

practica recomandată pentru a încorpora fișiere CSS personalizate pe site-ul dvs.fișier php folosind funcțiile wp_register_style() și wp_enqueue_style (). În acest fel, fișierele CSS se vor încărca în momentul declanșării acțiunii wp_head. Foaia dvs. de stil va fi poziționată imediat după foaia de stil implicită a temei. și vă permit să suprascrie stiluri implicite.

primul lucru de făcut este să localizați funcțiile temei dvs.fișier php. Se află în interiorul editorului de teme WordPress. De asemenea, puteți face acest lucru folosind FTP sau cPanels File Manager. Dacă lucrați la o temă copil, editați fișierul funcții teme copil, nu cel cu temă părinte. În acest fel, veți evita pierderea codului personalizat atunci când actualizați tema părinte. Derulați în jos până la partea de jos a funcțiilor.php și adăugați următorul fragment de cod:

function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

Personalizați fragmentul: în exemplul de mai sus, am numit funcția de înregistrare „additional_stylesheets” și am înregistrat un fișier CSS de stil numit „personalizat.css”, încărcat anterior în folderul nostru tematic. Puteți denumi funcția după cum doriți și puteți înlocui numele funcției în rândul de sus și de jos al snipetului. Dacă fișierul dvs. de foaie de stil este denumit diferit decât personalizat.css înlocuiți cuvântul personalizat în snipet cu propriul nume de fișier.

dacă ați făcut totul corect, puteți începe să scrieți propriul cod CSS în foaia de stil. Veți observa stilurile dvs. care afectează site-ul pe măsură ce salvați modificările și reîncărcați pagina. Nu uitați să curățați memoria cache a browserului atunci când reîmprospătați pagina.

încorporarea mai multor fișiere CSS personalizate în funcții.php folosind wp_register_style () și wp_enqueue_style ()

înainte de a adăuga mai multe fișiere CSS la tema dvs. Încercați să utilizați cât mai puține foi de stil.

acum, să presupunem că aveți un fișier foaie de stil separat pentru stiluri desktop numit personalizat.css și un al doilea fișier stylesheet numit responsive.css pentru Dispozitive mobile. Încorporarea ambele foi de stil în funcțiile dumneavoastră.fișierul php este simplu și necesită o ușoară modificare a fragmentului de fișier unic prezentat mai sus:

function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

la fel ca personalizarea fragmentului de fișier unic, schimbați numele fișierelor în funcție de situația dvs.

mai multe despre funcțiile wp_register_style() și wp_enqueue_style ()

pentru a afla mai multe despre utilizarea funcțiilor wp_register_style() și wp_enqueue_style() pentru a înregistra foile de stil, vizitați pagina dedicată WP Codex.