Gå til hovedinnhold

3 nytt tema tilpasninger Twenty Seventeen

Divi: det enkleste WordPress-temaet som skal brukes

Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler. [Anbefalt]

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 måter å tilpasse dette temaet til å passe til bloggen din. Vi vil starte med det grunnleggende og gå videre til vanskeligere og mer effektive 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 plasseringen av Social Links Menu.

  • 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:

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg enkelt lage ethvert webdesign med et profesjonelt utseende. Slutt å betale dyrt for det du kan gjøre selv. [Free]

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 sistnevnte ved å legge til ekstra tekst: “Stolt drevet av WordPress, Designet av WebPress Designs, og vert 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).

Leter du etter de beste WordPress-temaene og pluginene?

Last ned de beste pluginene og WordPress-temaene på Envato, og lag ditt nettsted enkelt. Allerede mer enn 49.720.000 nedlastinger. [EKSKLUSIV]

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 få flytte til hvert avsnitt mye jevnere ved å installere og aktivere en gratis plugin: 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 '.

Lag din nettbutikk enkelt

Last ned gratis WooCommerce, de beste e-handelspluggene for å selge dine fysiske og digitale produkter på WordPress. [Anbefalt]

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.

Denne artikkelen inneholder kommentarer 5

  1. rare,

    aksenttegn er ikke akseptert! Jeg ender opp med spørsmålstegn i stedet noen ide?

    ps: takk for disse tipsene uansett!

  2. Bonjour,

    Jeg fulgte instruksjonene dine, men ikonene mine vises bare på mobilversjonen av bloggen min og ikke på pc-versjonen, hvis du kan hjelpe meg ville det vært bra!
    Takk,
    Julie

    1. Bonjour,
      du bør sjekke at menyen stilen er faktisk lastet. Du kan også sjekke menyen kode for å sørge for at kodene som bærer ikonene er til stede.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket *

Dette nettstedet bruker Akismet for å redusere uønsket. Lær mer om hvordan dine kommentarer data blir brukt.

Tilbake til toppen
14 aksjer
del8
tweet1
Enregistrer5