Oprettelse af dit første WordPress Child Theme
Uanset om du bare ønsker at oprette et lidt tilpasset tema eller noget helt unikt, skaber et WordPress barnemne det i høj grad hurtigere udviklingsprocessen.
Barnemner giver dig mulighed for at starte med det grundlæggende i et eksisterende tema, så du behøver ikke at genopfinde hjulet. Du kan vælge et tema, der har funktionaliteten og det grundlæggende layout, du har brug for, men tilpas alt om det, som du ville designe et tema fra bunden.
Til denne øvelse skaber vi et børntema baseret på det nyeste WordPress-standardtema, Twenty Eleven. Vi bruger også nogle praktiske plugins og andre tricks, der gør det endnu nemmere at oprette et barnemne.
Du skal bruge nogle meget grundlæggende HTML- og CSS-viden, men den gode nyhed er, at for et grundlæggende barntema behøver du ikke at kende PHP! Det tema, der oprettes, er meget grundlæggende, men det vil give dig de byggesten du har brug for til at komme i gang med at lave dine egne temaer, selvom du aldrig har oprettet et WordPress-tema før!
Temaet vi skaber
Her er et kort kig på det endelige tema, vi skaber:
Et ord om overordnede temaer
Sandsynligvis er det vigtigste skridt i at skabe et barntema at vælge dit forælderstema. For denne tutorial, som vi allerede nævnt, bruger vi tyve elleve. Årsagerne til dette er, at det er let tilgængeligt, gratis, er sandsynligvis allerede installeret på en opdateret WP-installation, og er velkodet.
Den sidste er den vigtigste ting at overveje, når du vælger dit overordnede tema: Sørg for, at det er godt kodet. Hovedårsagen til dette er, at hvis dit forælderstema er godt kodet, vil det være uendeligt nemmere at oprette et barnemne, der er kodet, fordi du ikke behøver at anvenge hacks for at få tingene til at fungere.
Når du vil lave tilpasninger til et tema, er du bedre i stand til at bruge et børntema i stedet for at redigere forældetemaet direkte. På denne måde, hvis en opdatering til det oprindelige tema er udstedt, vil dit tema ikke brydes. Og hvis både forælderstemaet og dit tema er kodet godt, vil du sandsynligvis ikke se nogen forskelle i det opdaterede tema på dit websteds front-end.
One-Click Child Theme
Den hurtigste og nemmeste måde at komme i gang med et barn tema er at bruge One-Click Child Theme plugin. Du skal bare installere det, aktivere det overordnede tema, du vil have, at dit barn tema skal baseres på (hvis det ikke allerede er aktivt), og klik på "Barn tema" under Udseende i WP dashboard.
Derefter skal du indtaste et navn til dit nye børntema, en kort beskrivelse og dit navn og klikke på "Opret barn". Det er alt der er til det. Ét ord eller advarsel: Jeg fik en fejlmeddelelse efter at have klikket på "Opret barn", men barnetemaet blev oprettet uden hitch.
Alternativt kan du oprette et børntema fra bunden. For at gøre det, skal du åbne din valgte tekst eller kode redaktør og indtaste følgende oplysninger (dette tager højde for, at du bruger det tjue elleve overordnede tema):
/*Theme Name: Your Child Theme's NameDescription: Your theme's description.Author: Your Name HereTemplate: twentyeleven(optional values you can add: Theme URI, Author URI, Version)*/@import url("../twentyeleven/style.css");"Skabelon" -delen er, hvad der gør dette til et barntema snarere end et almindeligt tema, så sørg for at du korrekt identificerer temaets forælder.
Indstilling af temaindstillinger
Før du begynder at tilpasse dit nye barntema's CSS, skal du sørge for at tjekke temaindstillingerne og lave nogle tilpasninger der. Det er bedre at foretage ændringer inden for de eksisterende rammer af temaet, hvis det er en mulighed, da det gør det lettere at styre dit tema kode.
Til denne tilpasning har jeg valgt et layout fra indhold til venstre med et enkelt sidebjælke, og efterladt farveskemaet og standard linkfarve (for nu). Jeg har også forladt baggrunden hvid, overskriften med et af standardbillederne og overskriften tekstfarve sort.
Bemærk: Hvis du vil deaktivere farvevalg i temaindstillinger, skal du tilføje !important til farvespecifikationerne i dit CSS.
Grundlæggende om at redigere dit tema
Hvis du går til WordPress-temaredaktøren, kan du se et stort set blankt stilark til dit nye barnetema. Den første linje i din nye CSS-fil (efter barnets temainfo) importerer stilarket fra overordnetemaet. Dette er vigtigt, og det skal forblive øverst på dit ark, eller overordnet stilark vil blive ugyldigt og vil ikke importere.
En ting du måske vil gøre på dette tidspunkt er at installere et bedre kode editor plugin til tema redigering. Farvekodet syntaks gør det væsentligt lettere at kode direkte i WP, og det vil især være nyttigt for dem, der er vant til at farve syntax med eksterne redaktører. Mit personlige valg er Advanced Code Editor .
Du vil også have en slags tekstredaktør til opsætning af vores functions.php-fil, helst en med syntaxfremhævning.
Finde koden til at ændre
Dette kan være en af de mest frustrerende dele af barnetemaudvikling: At finde ud af, hvilke dele af koden der skal redigeres, og hvilke der kan stå alene. Hele punktet med et barntema er at gøre temaoprettelse og vedligeholdelse nemmere. Til det formål ønsker vi at oprette så lidt ny kode som muligt.
For at gøre dette meget nemmere, vil du gerne gøre, er at installere et plugin som Firebug . Dette vil give dig mulighed for at klikke på en del af dit side design og se den tilknyttede div og CSS klasser. Du kan også prøve kode for at se, hvad der virker, og derefter kopiere og indsætte det i dit tema's CSS. Jeg har fundet ud af at holde dit front-end tema åbent i en fane sammen med en anden fane med WP dashboardet, hvor du redigerer filer, er den mest effektive måde at redigere din kode på.
Det grundlæggende
Lad os begynde med at definere ting som kroppens baggrundsfarve, typografi og andre grundlæggende grunde, som vil give os grundlaget for vores børntema. Denne kode opretter alt i overskriften, med undtagelse af at flytte vores navigationsmenu. Lad os bryde det ned i et par forskellige trin.
Denne første blok kode giver os alle vores grundlæggende typografier (vi trækker i "Droid Sans" og "Dancing Script" fra Google Web Fonts; mere i det afsnit i functions.php ):
body, input, textarea, p {color: #000000;font-family: 'Droid Sans', sans-serif;}p {font-size: 14px;line-height: 24px;}h1, h2, h3, h4, h5, h6 {font-family: 'Dancing Script', cursive;}Denne næste sektion opretter hovedindholdsbakgrunden og drop skygge .
#page {background: #f5f5dc;-moz-box-shadow: 0 0 10px #67949c;-webkit-box-shadow: 0 0 10px #67949c;box-shadow: 0 0 10px #67949c;}Derefter vil vi foretage nogle tilpasninger på vores blogtitel og -beskrivelse samt ændre den øverste grænse for overskriften og fjerne søgeformularen (som erstattes af vores navigationsmenu i næste trin).
#site-title a {font-size: 48px;font-weight: 700;line-height: 60px;}#branding {border-top: 2px solid #67949c;}#branding #searchform {display: none;}#site-description {font-size: 18px;margin: 0 270px 3em 0;}Dette giver os et overskrift, der ser sådan ud:
Flyt hovednavigationsmenuen
Den næste ændring, vi ønsker at gøre, er at flytte navigationsmenuen fra dens standardposition under overskriftsbilledet øverst til højre modsat blogtitel eller logo.
Dette format fungerer bedst for websteder, der kun har et lille antal sider. Større websteder eller websteder med undersider vil have brug for yderligere overvejelse, og det vil sandsynligvis ikke fungere godt med denne form for layout.
Her er koden du skal bruge:
#access {clear: both;display: block;float: right;margin: 0 auto 6px;position: relative;top: -410px;width: 500px;background: none;box-shadow: none;}Din navigationsmenu skal nu sidde op over headerbilledet, ved siden af dit logo. Dernæst tilføjer vi nogle stilarter til vores navigation og gør dem til knapper i stedet for en solid bar. Her er koden til den grundlæggende skrifttypestyling:
#access a {font-family: 'Dancing Script', 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 1.4em;font-weight: 700;padding: 0 1em;line-height: 2.666em;}Her er den grundlæggende formatering for knappen bag teksten, herunder en fin indre skygge:
#access li {background: #84bbc5;margin-right: 15px;-moz-box-shadow: inset 0 0 3px 3px #739ca3;-webkit-box-shadow: inset 0 0 3px 3px #739ca3;box-shadow: inset 0 0 3px 3px #739ca3;}Og her er koden for at tilføje en dropskygge bag knapperne, når de svæver over (som faktisk giver indtryk af en animationseffekt i brug):
#access li:hover > a, #access a:focus {background: #84bbc5;color: #EEEEEE;-moz-box-shadow: 0 0 3px 3px #739ca3;-webkit-box-shadow: 0 0 3px 3px #739ca3;box-shadow: 0 0 3px 3px #739ca3;}Nu vil din overskrift se sådan ud:
Grundlæggende styling til dit sidebjælke
Lad os tilføje nogle meget grundlæggende stilarter til dit sidebjælke. De ændringer, vi laver her, er primært at få sidebjælkerne til at passe til designet af resten af webstedet. Her er koden:
.widget a {font-weight: 400;font-family: 'Droid Sans', sans-serif !important;}.widget-title {color: #282828;letter-spacing: 0.1em;line-height: 1.5em;text-transform: none;} Det .widget-title findes allerede i et H3-tag, så det kræver den skrifttype, der allerede er angivet der.
Og sådan ser det ud:
Ændringer i postformatet
Først vil vi ændre polstring til toppen af indlægene, så den første post linjer op med toppen af sidepanelet.
.entry-title {padding-top: 0px;}Næste ændrer vi kommentarikonet, der vises ved siden af posttitel på startsiden. Dette er simpelt: Opret bare dit nye ikon (jeg har oprettet versioner til aktive og inaktive versioner) og derefter upload dem ved hjælp af WPs media uploader. Tag URL'en for hver, og indsæt dem som denne:
.entry-header .comments-link a {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-link.png") no-repeat scroll 0 0;top: 0;}.entry-header .comments-link a:hover, .entry-header .comments-link a:focus, .entry-header .comments-link a:active {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-active.png") no-repeat scroll 0 0;background-color: #f5f5dc !important;} Du skal tilføje !important til background-color attribut til hover state for at tilsidesætte styling gjort til links andetsteds i temaet. Hover-billedet er en udfyldt tekstboble, mens den normale tilstand kun er en disposition. Her er resultatet:
Næste arbejder vi på kommentar styling. Dette er simpelt, da alt vi laver, ændrer farveskemaet. Her er koden:
#respond {background: none repeat scroll 0 0 #dadabe;border: 1px solid #67949c;}#respond input[type="text"], #respond textarea {background: none repeat scroll 0 0 #FFFFFF;border: 4px solid #b3b398;}#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label {background: none repeat scroll 0 0 #b3b398;box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);color: #555555;}#respond input#submit {background: none repeat scroll 0 0 #67949c;}Og her er slutresultatet:
Indsæt kode i dit hoved eller andetsteds i dit tema
Dette er nok den mest tekniske del af oprettelsen af et børntema, og det er kun nødvendigt, hvis du vil gøre noget som at tilføje Google Web Fonts til dit websted. Det er præcis det, vi skal gøre her. Dette er den eneste gang i oprettelsen af dit barntema, som du skal arbejde med PHP, og hvis du ikke behøver at indsætte noget i dit temaoverskrift eller andre steder, behøver du ikke at arbejde med PHP overhovedet.
Opret først en functions.php-fil i din valgte tekst eller kodeneditor. Den grundlæggende kode, du vil bruge, vil se sådan ud:
For barnets tema ovenfor måtte vi indsætte kode i vores overskrift for at linke de relevante Google Web Fonts, så vi kunne kalde dem ind i vores CSS. Sådan gør vi det (du kan få det link direkte fra Google med hvilke skrifttyper du vil bruge):
Nu skal dine skrifttyper alle fungere ordentligt! Og alle de funktioner, der var inkluderet i det oprindelige forælder tema, vil stadig arbejde.
Download temafilerne
Hvis du vil se hele koden for både CSS og functions.php filen, kan du downloade dem her . Også inkluderet er kommentoboble ikoner.
Konklusion
Oprettelse af et barnemne er utrolig simpelt sammenlignet med design og kodning af et tema fra bunden. Med nogle grundlæggende CSS viden og kun en lille smule PHP, kan du skabe stort set enhver form for tema, du ønsker. Barnemner kan i mange tilfælde også bruges kommercielt (så længe forældetemaet tillader sådan brug) eller sælges som lagertemaer (bare husk at lade dine købere vide, at temaet kræver et forælderstema).
Sørg for, at din kode er velskrevet, kommenteret og organiseret. På denne måde, hvis dit forældre tema er opdateret, er dit barntema usandsynligt at bryde.
Barnetemaet, vi har oprettet i denne tutorial, er meget, meget grundlæggende. Men det giver dig de oplysninger, du har brug for til at begynde at designe dine egne temaer. Start med grundlæggende restyling for at få dine fødder våde, og begynd derefter at udforske de ting, du kan gøre med PHP i din functions.php-fil. Barnemner, når de er bygget på et stort forælderstema, kan være lige så magtfulde som ethvert andet tema. For mere information om børns temaer, tjek den WordPress Codex .
Har du flere tips til at skabe gode barnemner? Lad os vide i kommentarerne!