Twenty Seventeen er det mest allsidige standardtemaet for WordPress noensinne. Alternativene som er innebygd i temaet, etterlater imidlertid noe å ønske.

I denne opplæringen vil jeg vise deg fem metoder for å tilpasse dette temaet til å matche bloggen din. Vi starter med det grunnleggende og går videre til vanskeligere og mer effektfulle tilpasninger.

Når vi er ferdig, vil du kunne gjøre tjue sytten til et vakkert og moderne nettsted for virksomheter eller blogger. Tror du ikke på meg? Se, her er hva du kan lage:

Tjue sytten tilpasning

#1 Lag en meny for sosiale koblinger

Vel, denne første delen er mer enn bare et hack. Men det er en personalisering å gjøre bare på tjue sytten.

Twenty Seventeen har en attraktiv meny for sosiale koblinger på bunnteksten.

Sosiale lenker tjue sytten

Problemet er at noen brukere har rapportert at de har problemer med å finne ut hvordan de kan legge til koblinger på det sosiale nettverket til denne menyen. Heldigvis er det egentlig veldig enkelt når du vet hvordan du gjør det.

Alt du trenger å gjøre er å lage en meny med lenker til dine sosiale nettverk og tilordne den til Sosiale lenker-menyen.

  • La oss utforske gjennom prosessen.
  • Start med å åpne “Customizer” (Utseende> Tilpass).
  • Velg "Menyer" og velg deretter "Social Links Menu".
  • Gi nytt navn til den nye menyen.
  • Legg til en lenke til hvert av de sosiale nettverkene som er tilgjengelige.
  • Merk av i ruten ved siden av " Sosiale Links Meny '.

Når du er ferdig, skal menyen se slik ut:

Tjue sytten personaliseringsside

Det siste trinnet er å klikke på "Lagre og publiser" -knappen i Tilpasseren for å lagre den nye menyen. Koblingene dine til sosiale nettverk vil nå vises i menyen nederst på siden.

# 2 Endre signaturen "Stolt drevet av WordPress"

Wordpress situasjon

Det er to grunner til at du kanskje vil endre teksten i bunnteksten som sier at nettstedet ditt er "Stolt drevet av WordPress." "

Kanskje du vil utvide det ved å legge til ekstra tekst: "Stolt drevet av WordPress, designet av WebPress Designs, og hostet av LAMPress Hosting. "

Kanskje du vil endre signaturen din helt for noe mer personlig.

Det første du trenger å gjøre er å opprette og aktivere et tema for barnet (hint: Hvis du vil forenkle livet ditt, kan du laste ned barnet tema forutinntatt for det).

Når du har opprettet og aktivert barnetemaet ditt, kopier du "footer.php" -filen. Åpne deretter denne "footer.php" -filen og finn denne koden: get_template_part ('template-parts / footer / site', 'info');.

Nå har du to alternativer. Du kan ganske enkelt kommentere denne linjen ved å legge til "//" like før koden, eller du kan vurdere å erstatte den med din egen tilpassede bunntekst. Her er koden du skal legge til for å lage bunnteksten.

Tilpasset bunntekst

#3 Forbedret navigasjonsmeny

I tillegg til å lage en funksjonell navigasjonsmeny på en navigasjonsside, vil vi også fikse navigasjonsmenyens svevende effekt og legge til jevn rulling for å forbedre den generelle opplevelsen.

Først begynner vi å legge til følgende kode på ditt (underordnede) tema:

/ * Navnkode på én side * / jQuery (dokument) .ready (function () {/ * Legg til utfylling og ID-er til hver forside-seksjon * / jQuery ("h2.entry-title"). Hver (funksjon () {var panelId = jQuery (dette) .html (). tilLowerCase (). erstatt (/ s + / g, "-"); jQuery (dette) .wrapInner (funksjon () {retur " ";})}) / * Fjern navigeringslenkeheving * / jQuery ('# toppmeny li'). RemoveClass ('current-menu-item current_page_item'); / * Legg til utheving ved å klikke * / jQuery ('# top -meny li a '). på (' klikk ', funksjon (hendelse) {jQuery (dette). foreldre (). foreldre (). finn (' li '). removeClass (' gjeldende menyelement '); jQuery (dette) .parent (). addClass ('current-menu-item');}); / * Kontroller gjeldende URL og uthev nav for gjeldende side * / jQuery ('# toppmeny li a'). hver (funksjon () {var pageUrl = jQuery (location) .attr ('href'); var navUrl = jQuery (this) .attr ('href'); if (navUrl == pageUrl) {jQuery (this) .parent (). addClass ('gjeldende menyelement');}})})

Du kan legge til denne koden på en Javascript-fil lastet av et barn-tema (hva som anbefales) eller bruk et plugin som lar deg legge til JavaScript på nettstedet ditt. Sørg for å laste inn koden etter at jQuery allerede har lastet inn.

Ta en titt på kommentarene i koden for å få et fullstendig bilde av hva som skjer.

I tillegg kan vi gjøre bevegelsen til hver seksjon mye jevnere ved å installere og aktivere en plugin gratis: jQuery Smooth Rull.

Selvfølgelig vil du fortsatt måtte bygge navigasjonsmenyen din ved å legge til en tilpasset lenke til hver seksjon ved å bruke navnet på siden som vises i denne delen.

Hvis du for eksempel skal koble til delen "Om", må du opprette en tilpasset lenke og bruke " #about Som anker for lenken. For mer informasjon, se Slik tilpasser du temaet " Twenty Seventeen WordPress '.

Med litt innsats vil du komme til et overbevisende resultat:

Tjue sytten navigasjonsresultat

Dette er absolutt ikke alt vi kan gjøre med Twenty Seventeen, vi vil senere tilby andre tutorials om Twenty Seventeen.