WordPress Speed Optimalisering med egendefinerte sosiale deling ikoner
Det kan virke som en enkel oppgave, men det kan være et problem å legge til godt oppførsel av sosiale delingsknapper til et WordPress-nettsted. Når jeg sier godt opptatt, mener jeg enkle, lette, ressursvennlige, raskeste - de fleste sosiale delingsplugger der ute, er ikke sånn. De har en tendens til å spise opp ressurser som gal, og hvorfor ønsker noen å øke plugin load time med 25-35% bare for å vise noen ikoner på deres nettsted?
Den gode nyheten er at du ikke nødvendigvis trenger et plugin for å utføre denne oppgaven. I denne veiledningen vil jeg vise deg hvordan du enkelt kan Legg til egendefinerte sosiale delingsknapper til slutten av innleggene på WordPress-siden din med bare noen få linjer med kode.
Trinn 1: Generer de sosiale delingsknappene
Vi vil bruke Simple Sharing Buttons Generator, et praktisk og brukervennlig webverktøy for å generere delingsikonene. Den største fordelen med denne appen er at knappene det genererer kjører på frontenden, derfor de vil ikke byrde serveren din og du kan også beholde brukerens aktiviteter privat.
For å generere dine egendefinerte knapper, gå hit og trykk Begynne. Velg 1 fra 6 forskjellige knappestiler. Klikk neste og kryss av sosiale nettverk du vil legge til på nettstedet ditt. Når du er ferdig, må du fylle informasjonen til nettstedet ditt.
På denne skjermen (nedenfor) finner du to alternativer: 'Ingen JavaScript' og 'Javascript'. Sett kryss Javascript, da det vil gjøre det mulig for nettleseren å oppdage nettadressen dynamisk, vil derfor dine besøkende kunne dele hvert innlegg hver for seg, ikke bare nettadressen til hjemmesiden.
Endelig ta en titt på live forhåndsvisning, last ned det valgte ikonsettet, og ta tak i koden du genererte.
Trinn 2: Opprett et barn tema
Nå må du legge til de genererte ikonene og koden til nettstedet ditt. Først av alt må du opprette et barntema.
Du kan enkelt lage et WP barn tema ved hjelp av vår veiledning, eller du kan følge trinnene i denne WP Codex artikkelen. Hvis du allerede har en, kan du hoppe til trinn 3.
Barnetemaet relaterer seg til temaet du bruker for tiden - på en lignende måte som et barn relaterer seg til foreldrene sine. Den arver alt (stil og funksjonalitet) fra foreldetemaet men du kan legg til ekstra funksjonalitet til det.
I vårt tilfelle vil den ekstra funksjonaliteten være de egendefinerte sosiale delingsknappene.
Trinn 3: Lag en tilpasset funksjon som viser ikonene
Vi legger til en egendefinert funksjon i barnetemaets funksjoner.php-fil.
Ved hjelp av denne funksjonen vil du kunne legge til de sosiale ikonene hvor du vil på nettstedet ditt ved å bruke en tilpasset handlingskrog. Hvis barnetemaet ditt ikke har en functions.php-fil, oppretter du en tom tekstfil i barnetemaets rotmappe med navnefunksjonene, og endrer utvidelsen til .php.
Sett inn følgende linje kode i denne tomme filen:
Når din functions.php filen er satt opp legg til følgende kodestykke til det:
/ * * Legger til de egendefinerte sosiale delingsikonene * / funksjon add_social_sharing () ?>
Del dette innlegget
Endelig Slett linjen i HTML-kommentaren fra kodestykket over og erstatt den med HTML-koden du genererte i trinn 1 med generell deling av knapper.
Trinn 4: Kopier passende malfil til barnememappe
Som standard styres enkelte innlegg av en malfil som heter single.php. Noen ganger - spesielt i mer moderne temaer - strukturen av single.php er mer komplisert, da det også laster inn flere malfiler. I dette trinnet må vi finne den aktuelle malfilen der vi kan legge til ikonene senere.
For å finne riktig sted for sosiale knapper må vi finne malfilen som inneholder funksjonen som laster innholdet i de enkelte innleggene.
La oss åpne tema editoren i WordPress admin dashboard under Utseende> Redaktør. Øverst til høyre finner du en rullegardinliste hvor du kan velge ditt overordnede tema. Under rullegardinmenyen kan du se alle malfiler som ditt foreldetema inneholder. Rull ned til du finner Enkelt innleggsmal (kalt single.php) og åpne den.
Hvis foreldetemaet bruker get_template_part () WP funksjon i single.php fil som betyr at den bruker en ekstra malfil for å laste inn innholdet i det enkelte innlegget.
Først må du finne ut hvilken er dette. Navnet på den ekstra malfilen er den første parameteren til get_template_part () funksjon.
Den første parameteren er 'innhold' som betyr at vi ser etter malfilen som heter content.php. Du må kopiere denne filen fra forgrunnsmappen til overordnet tema til rotasjonsmappen for barnets tema for å modifisere den.
Trinn 5: Legg til handlingshaken til høyre malfil
Vi opprettet en funksjon som heter add_social_sharing () i trinn 3, og vi festet den til en egendefinert action hook kalt custom_social_share. Nå må vi legge til denne kroken til stedet der vi vil at funksjonen skal utføres.
Her er kodestykket du må sette inn på riktig sted:
Deretter finner vi det riktige stedet.
Åpne malfilen du la til barnetemaet ditt i trinn 4 i en kodeditor eller inne i editoren til WordPress admin-dashbordet, og se etter innholdet() funksjon.
Sjekk om det er en wp_link_pages () fungere rett etter innholdet() funksjon. Hvis det er det, kommer kodebiten ovenfor over det; ellers følger det innholdet() funksjon.
Trinn 6: Legg til CSS-koden til barnetemaet
Åpne style.css fil av barnetemaet ditt enten i kodeditoren din eller i temaredigereren av WordPress admin-dashbordet, kopier CSS-koden du genererte i trinn 1, lim den inn til slutten av filen og lagre den.
Vi legger til to ekstra linjer i CSS-filen for å få de sosiale delingsikonene til å vises riktig i hvert tema. Kopier og lim inn følgende kodestykke til slutten av style.css fil:
ul.share-knappene li a border: 0; ul.share-knapper li img display: inline;
Trinn 7: Last opp ikonet for sosiale medier satt til serveren
Last opp det valgte sosiale medierikonet du lastet ned i trinn 1 til temaet til barnetemaet ditt. Koble serveren din via FTP, opprett en ny mappe som heter Bilder inne i roten til temaet ditt barn tema (/ wp-innhold / temaer / ditt barn-tema / bilder) og last opp ikonet sett her.
Vi heter mappen Bilder fordi dette er standardnavnet til bildemappen bruker Simple Sharing Buttons Generator.
Trinn 8: Kontroller banen til ikonfiler
Når du har lastet opp sosiale medier-ikonene til serveren din i trinn 7, er det viktig å sjekke banen til ikonfiler for å sikre at de lastes inn.
Banen til en bildefil gir et hint til nettleseren om beliggenheten på serveren. La oss se på bildestiene inni functions.php fil av barnet temaet. Åpne filen i kodeditoren din, og naviger til add_social_sharing () funksjon der du må sjekke HTML-koden du genererte med Generell Generator for enkel deling.
I HTML-koden finner du en tag med en src attributt for hvert ikon. Sjekk om hver src Attributter peker på det nøyaktige stedet hvor ikonet ditt ble lastet opp i trinn 7.
Den enkle delingsknapper Generator legger til relative baner til filer. Noen ganger nettlesere kan ikke gjengi bildene hvis du bruker en relativ bane, så det er en god ide å bruk absolutt stier i stedet. På denne måten kan hver nettleser som potensielt brukes av de besøkende, være dår sikker på plasseringen av de nødvendige ikonfiler.
Den relative bildebanen som er lagt til av generatoren ser noe ut som dette:
La oss endre src Attributt av hvert ikon til en absolutt bane, som betyr at den vil inneholde den fulle URLen til filen.
URL-banen ovenfor vil se slik ut:
Trinn 9: Last opp de endrede filene og aktiver barnetemaet
Koble serveren din via FTP og last opp alle filene vi opprettet i denne opplæringen som du ikke har lastet opp ennå: functions.php, de style.css, og riktig malfil (i denne opplæringen enten single.php eller content.php).
Endelig aktiver barnetemaet i WP admin dashbordet under Utseende> Temaer Meny.
Nå er du klar med dine superlette, ressursbesparende, tilpassede sosiale delingsikoner. Du kan gå online og sjekke det live på nettstedet ditt.
Konklusjon
I denne veiledningen viste jeg deg hvordan du legger til de egendefinerte sosiale delingsknappene til slutten av enkelt innlegg. Du kan legge til delingsikonene til andre steder på nettstedet ditt ved hjelp av handlingen kroken vi opprettet.
Bare legg til koden vi brukte i trinn 5 til stedet der du vil at knappene skal vises:
Du må også finne den riktige malfilen hvis du vil plassere ikonene et annet sted. Enkeltsider styres av en malfil som heter page.php, mens medievedlegg som bilder er lastet inn av attachment.php.
Hvis du ønsker å vise de sosiale delingsknappene på et annet sted på nettstedet ditt, kan du bruke WordPress Template Hierarchy for å finne det.
