enten hvis du opretter dit eget tema, et undertema fra dets forælder eller redigerer et tema, vil du støde på behovet for at tilføje dit eget CSS brugerdefinerede stilark. Sandsynligvis vil du også ønsker at tilsidesætte nogle stilarter fra standard tema stylesheet.
der er flere måder at tilføje dine egne stilarter og/eller tilsidesætte standardformater. Så hvad er den bedste måde at gøre det på? Udviklere er enige om, at det er ved at oprette dine egne brugerdefinerede CSS-filer og integrere dem i det tema, du arbejder på.
måder at tilføje brugerdefineret CSS-kode til temaer
vi vil ikke tale om afskrevne måder at tilføje CSS-stilarter til HTML-elementer eller tilføje < stil> blokke. I dag er disse metoder forladt af udviklere. De er heller ikke SEO-venlige, hvilket er et vigtigt spørgsmål at bekymre sig om i dag.
vi vil ikke engang foreslå redigering Tema oprindelige CSS stylesheet (normalt stil.css), eller tilføje brugerdefineret kode til det. Denne fil er ofte meget stor og vanskelig at administrere. Enhver lille skrivefejl eller syntaksfejl i den kan få hele siden til at gå ned.
i denne artikel viser vi dig, hvordan du opretter en brugerdefineret CSS-fil og integrerer den i et Ordtrykstema.
der er flere metoder til at tilføje brugerdefineret CSS-kode til ordtrykstemaer. Hvad er den bedste praksis?
Sådan tilføjes brugerdefinerede stylesheet-filer til Temaer Ved hjælp af
det første trin i at integrere brugerdefinerede CSS-filer til
hvis du har gennemført dette trin korrekt, skal du se din brugerdefinerede CSS-fil eller filer i din Installationstemaeditor.
sammenkædning af brugerdefinerede CSS-filer sidens hovedsektion
nu hvor du har tilføjet dine brugerdefinerede CSS-filer til din TEMAMAPPE, er det tid til at linke filerne til din sides <hoved> sektion. På denne måde kan siden anvende dine brugerdefinerede stilarter på dets elementer.
du kan blot tilføje et<link > element til din sides<hoved > sektion, helst lige før lukningen< /hoved > tag. På denne måde indlæses brugerdefinerede CSS-stilarter sidst og tilsidesætter standardformater. Afsnittet <head> på din side er normalt placeret i din temamappeoverskrift.php-fil og er tilgængelig gennem Temaeditoren.
her er et eksempel på elementet når din side er placeret i mappen “test-site” i rodmappen på din server, kaldes din temamappe “test-tema” og din CSS-fil kaldes “brugerdefineret.css”:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">denne enkle løsning vil fungere fint, men det er ikke den bedste praksis at integrere CSS-filer i
integrering af en CSS-fil ved hjælp af funktioner
den anbefalede praksis til at integrere brugerdefinerede CSS-filer på dit site er ved at registrere dit stylesheet i dit temas funktioner.php-fil ved hjælp af funktioner. På denne måde indlæses dine CSS-filer i det øjeblik, hvor handlingen udløses. Dit stilark placeres lige efter temaets standardstilark. og giver dig mulighed for at tilsidesætte standard stilarter.
den første ting at gøre er at finde dit temas funktioner.php-fil. Det er placeret inde i Temaeditoren. Du kan også gøre det ved hjælp af FTP eller cPanels File Manager. Hvis du arbejder på et barn-tema, redigere barn-temaer funktioner fil, ikke den overordnede-tema en. På denne måde undgår du at miste din brugerdefinerede kode, når du opdaterer overordnet tema. Rul ned til bunden af funktioner.php og tilføj følgende kodestykke:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );Tilpas uddraget: i eksemplet ovenfor navngav vi registreringsfunktionen “additional_stylesheets” og registrerede en stylesheet CSS-fil med navnet “custom.css”, tidligere uploadet til vores temamappe. Du kan navngive funktionen, som du vil, og erstatte funktionsnavnet i den øverste og nederste række af snipet. Hvis din stilarkfil er navngivet anderledes end brugerdefineret.CSS erstatter ordet brugerdefineret i snipet med dit eget filnavn.
hvis du har gjort alt korrekt, kan du begynde at skrive din egen CSS-kode i dit stilark. Du vil bemærke, at dine stilarter påvirker siden, når du gemmer ændringer og genindlæser siden. Glem ikke at rense din cache, når du opdaterer siden.
indlejring af flere brugerdefinerede stylesheet CSS-filer i funktioner.
før du tilføjer flere CSS-filer til dit CSS-tema, skal du tage i betragtning, at det forårsager flere serveranmodninger, når siden indlæses, hvilket påvirker din sides indlæsningshastighed. Prøv at bruge så mindre stilark som muligt.
lad os nu sige, at du har en separat stylesheet-fil til desktop-stilarter med navnet custom.css og en anden stilark fil med navnet responsive.css til mobile enheder. Indlejring begge stylesheets i dine funktioner.php-filen er enkel og kræver en lille ændring af det enkelte filuddrag vist ovenfor:
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' );samme som at tilpasse enkeltfiluddraget, ændre filnavne i overensstemmelse med din situation.
mere om funktioner
hvis du vil vide mere om brug af funktioner til registrering af typografier, kan du besøge siden dedikeret kodeks for typografier.