Web og WordPressWordpress-temaer

Komme i gang med WordPress-barnetemaer?

1
Innhold Gjemme seg
Hva du kan gjøre med WordPress-barnetemaer
Dette trenger du:
Hvordan lage et WordPress-barnetema?
Registrerer overordnet temas stilark
Overstyre overordnede temastiler
Tilpasse hovednavigasjon
Siste ord

I denne opplæringen lærer du hvordan du lager et WordPress-barnetema. Hvis du er ny på WordPress og ikke vet hva som er et WordPress-barnetema, vil jeg forklare alt.

WordPress-temaer er en samling av en rekke PHP-, JavaScript- og CSS-filer. Med enkle ord, med WordPress-temaer, kan du endre utseendet og følelsen til bloggen din. WordPress-temaer kan være veldig kraftige.

Premium WordPress-temaer tilbyr mange avanserte funksjoner og funksjonalitet. Tusenvis av gratis og premium WordPress-temaer er tilgjengelige.

Du kan lage et WordPress-tema fra bunnen av, eller du kan lage et WordPress-tema basert på et annet tema. Hver versjon av WordPress kommer med forhåndsinstallerte WordPress-temaer, og hvis du ikke liker det forhåndsinstallerte WordPress-temaet, kan du installere et annet WordPress-tema eller du kan lage et undertema.

Hvorfor WordPress barnetemaer?

Å lage et WordPress-barnetema betyr at du tar et eksisterende tema og lager ditt eget tema som er basert på det. Barnetema arver de fleste funksjonene fra det originale temaet, kjent som overordnet tema.

Barnetema sparer mye arbeid og tid. Å lage et WordPress-tema fra bunnen av tar mye tid og noen ganger øker kunnskapen om HTML, CSS, PHP og er nødvendig. Med barnetemaer kan du gjøre mange endringer.

Hvis du ikke er fornøyd med tilpasningen, alternativene og funksjonene som WordPress-temaet du bruker gir, kan du lage et undertema. Selv om du ønsker å gjøre én endring i WordPress-temaet ditt, bør du lage et undertema eller bruke CSS-editor-plugin.

Du kan redigere eksisterende WordPress-temafiler direkte, men når du foretar en oppdatering mister du alle tilpasningene dine. Derfor trenger du et barnetema.

Hva du kan gjøre med WordPress-barnetemaer

Med WordPress-barnetemaer kan du legge til så mange funksjoner du vil. Det er opp til deg. Hvis du vil endre skriftstørrelse eller farge for overskrifter eller lenker, kan du gjøre det veldig enkelt med CSS.

Du kan legge til nye navigasjonsmenyer, registrere nye sidefelt, lage egendefinerte sider for produkter eller legge til støtte for egendefinerte webfonter.

Dette trenger du:

Nå vet du hva som er et WordPress-barnetema og hvorfor du bør lage barnetema. Det er på tide å lære hvordan du lager et WordPress-barnetema.

Det er ikke nødvendig, men anbefaler å sette opp en lokal WordPress-installasjon for utviklings- og læringsformål. Med lokal WordPress-installasjon kan du raskt og veldig enkelt teste dine nye plugins og temaer.

Det er mange måter å installere WordPress lokalt på. Hvis du er en MAC-bruker, kan du bruke MAMP, Windows-brukere kan bruke XAMPP, WAMP eller Bitnami WordPress installasjonsprogram.

Hvis du er en absolutt nybegynner, kan du laste ned og installere Bitnami WordPress-stack for å lage et fullt funksjonelt WordPress-nettsted på din MAC eller PC.

Jeg personlig foretrekker WAMP-server for lokal utvikling. Det er ikke vanskelig å installere WordPress på WAMP, du kan lese opplæringen eller se videoer for å lære hvordan du installerer WordPress ved å bruke WAMP, XAMPP eller MAMP.

Du trenger også en koderedigerer for å redigere temafiler. Sublimetext, Brackets, Atom er få populære koderedigerere.

Hvordan lage et WordPress-barnetema?

Når ditt lokale WordPress-nettsted er klart, kan vi begynne å lage barnetemaet vårt. Hvis du bruker WAMP-server, gå til WAMP-installasjonskatalogen din > WWW > WordPress > wp-innhold > mappen temaer.

I WordPress-tema-mappen, lag en ny mappe og navngi den tjueseksten-barn eller noe du liker, f.eks. InstantShift. Vi skal bruke tjueseksten-tema som et foreldretema. Det betyr at barnetemaet vårt vil være basert på TwentySixteen-temaet.

For hvert barnetema trenger vi to filer.

  • functions.php
  • style.css

Lag disse to filene i mappen med tjueseksten barns temaer. Åpne nå filene dine i tekstredigering, for rask tilgang kan du dra mappen med tjueseksten underordnede i tekstredigeringssidefeltet. Åpne filen style.css og legg til følgende kode.

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

Merking ovenfor kreves for et undertema. Uten et stilark med nødvendig markering vil ikke WordPress kunne gjenkjenne barnets tema.

Jeg tror du kan forstå alt. Det er ingenting å forklare. Barnetemanavnet mitt er InstantShift, men du kan navngi barnet ditt hva du vil. Det viktigste er mal: tjueseksten. Dette er navnet på foreldretemaet vårt. Pass på at du staver det riktig.

Hvis du bruker et annet tema som et overordnet tema, endrer du ganske enkelt Mal: ​​tjueseksten med Mal: ​​overordnet-tema-navn.

I stilarkoverskriften kan vi også legge til mer informasjon, men det er ikke nødvendig. Logg nå på WordPress-dashbordet ditt. Gå til Utseende > Temaer. Du bør se InstantShift-tema uten skjermbilde, fordi vi ikke har lagt til noen skjermdumper for barnetemaet vårt.

Hold musen over InstantShift-temaet og klikk på Temadetaljer-knappen. Her er skjermbildet av barnets tema.

Hvis du kan se denne skjermen, betyr det at barnetemaet ditt er klart. Nå kan vi begynne å tilpasse temaet vårt. Aktiver dette nye temaet og besøk forsiden av bloggen din. Du vil se alt innholdet uten stil.

Ikke bekymre deg. Det er normalt. Vi kan ikke se noen stiler fordi vi ikke har inkludert stilarkfil for overordnede temaer. la oss sørge for at stilarket til barnetemaet vårt fungerer. Legg til følgende kode i barnetemaets style.css-fil.

body{
     background-color: #E7F5FB;
}

lagre style.css-filen din, last inn forsiden på din lokale WordPress-side på nytt, og du bør se en lyseblå bakgrunnsfarge.

Registrerer overordnet temas stilark

Vi ønsker ikke å lage alle stilene fra bunnen av. Vi vil bare legge til noen nye stiler med barnetemaets style.css-fil. La oss nå legge til overordnet temas stye.css-fil i undertemaet vårt.

Åpne functions.php-filen og legg til følgende kode i undertemaets functions.php-fil.

<?php
 
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri(). '/style.css',
        array( $parent_style)     );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

Hvis du nå laster inn din lokale WordPress-side på nytt, vil du se det vanlige temaet med alle TwentySixteen-stilene.

Det er alt. Du har opprettet ditt første underordnede tema. Du har også lagt til en ny bakgrunnsfarge for brødteksten.

Men vi lagde ikke barnetemaet vårt for bare å endre bakgrunn for kropp. La oss begynne å tilpasse temaet vårt.

Overstyre overordnede temastiler

Tilpasse topptekst:

Som standard har Twenty Sixteen-temaets overskrift mye polstring. La oss endre polstringen og legge til den nye bakgrunnsfargen for sideoverskriften. Legg til følgende kode i barnetemaets style.css-fil, lagre filen og last inn frontenden av nettstedet ditt på nytt for å se endringer.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Her kan du se skjermbildet for sideoverskriften før og etter at du har lagt til våre nye stiler.

Tilpasse hovednavigasjon

La oss nå endre bakgrunnsfargen for hovednavigasjonsmenyelementer. Jeg liker å bruke Chrome-utviklerverktøy for å redigere CSS-stilene mine.

Etter å ha redigert nettsider med Chrome-utviklerverktøy, kan du kopiere den nye koden fra Chrome-utviklerverktøy og lime inn i barnetemaets style.css-fil.

Åpne barnetemaets style.css-fil og legg til følgende kode i den.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Her kan du se skjermbildet av vår nye header. Vi har veldig enkelt tilpasset temaet vårt med barnetema.

Siste ord

Nå vet du hvordan du kan lage WordPress-barnetemaer. Det er veldig enkelt og greit. Med den grunnleggende forståelsen av HTML og CSS, kan du fullstendig endre utformingen av nettstedet ditt.

Du kan også legge til nye navigasjonsmenyer, widgetområder, støtte for nye we-fonter osv. med barnetemaet. Men vi kan ikke dekke alt i en enkelt artikkel.

Hvis du vil lære WordPress-temautvikling, bør du begynne med WordPress-barnetemaer. Lær grunnleggende om tematilpasning.

Opptakskilde: instantshift.com
Kan hende du også liker Mer fra forfatteren

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon