WordPress Speed ​​Optimization med brugerdefinerede Social Sharing ikoner

Det kan synes at være en nem opgave, men det kan være en besvær at føje godt opførende sociale delingsknapper til et WordPress-websted. Når jeg siger det godt, mener jeg simpelt, letvægts, ressourcevenligt, hurtigt - de fleste sociale deling plugins derude er ikke sådan. De har tendens til at spise ressourcer som skøre, og hvorfor vil nogen gerne øge plugin load time med 25-35% bare for at vise nogle ikoner på deres websted?

Den gode nyhed er, at du ikke nødvendigvis behøver et plugin for at udføre denne opgave. I denne vejledning vil jeg vise dig, hvordan du nemt kan Tilføj tilpassede sociale delingsknapper til slutningen af ​​stillingerne på din WordPress-side med bare nogle få linjer kode.

Trin 1: Generer de sociale delingsknapper

Vi vil bruge Simple Sharing Buttons Generator, et praktisk og nemt at bruge webværktøj til at generere delingsikoner. Den største fordel ved denne app er, at de knapper, det genererer, kører på frontenden derfor de vil ikke byrde din server og du kan også holde dine brugeres aktiviteter private.

For at generere dine brugerdefinerede knapper, skal du gå her og trykke på Begynde. Vælg 1 fra de 6 forskellige knapper. Klik Næste og kryds den sociale netværk du vil tilføje til dit websted. Når du er færdig, skal du udfylde din hjemmeside info.

På denne skærm (nedenfor) finder du to muligheder: 'Ingen JavaScript' og 'JavaScript'. Tick JavaScript, da det vil gøre det muligt for browseren at registrere URL'en dynamisk, vil dine besøgende derfor kunne dele hvert indlæg hver for sig, ikke blot webadressen på hjemmesiden.

Endelig kig på det levende eksempel, download det valgte ikon sæt, og tag den kode, du genererede.

Trin 2: Opret et barn tema

Nu skal du tilføje de genererede ikoner og kode til dit websted. Først og fremmest skal du oprette et barnemne.

Du kan nemt oprette et WP barnetema ved hjælp af vores vejledning, eller du kan følge trinene i denne WP Codex-artikel. Hvis du allerede har en, kan du hoppe til trin 3.

Barnetemaet vedrører det tema, du bruger i øjeblikket - på en måde, som barnet relaterer til sine forældre. Det arver alt (stil og funktionalitet) fra forælderstemaet men du kan Tilføj ekstra funktionalitet til det.

I vores tilfælde er den ekstra funktionalitet de brugerdefinerede sociale delingsknapper.

Trin 3: Opret en brugerdefineret funktion, der viser ikonerne

Vi vil tilføje en brugerdefineret funktion til barnets tema's funktioner.php-fil.

Ved hjælp af denne funktion vil du være i stand til at tilføje de sociale ikoner, hvor du vil have på dit websted, ved at bruge en brugerdefineret handlingskrog. Hvis dit barntema ikke har en functions.php-fil endnu, skal du oprette en tom tekstfil i dit børntemaets rodmappe med navnefunktionerne og ændre dens udvidelse til .php.

Indsæt følgende linje kode i denne tomme fil:

 
Når din functions.php filen er sat op Tilføj følgende kodestykke til det:
 
 / * * Tilføjer de brugerdefinerede sociale delingsikoner * / funktion add_social_sharing () ?> 
Del dette indlæg
   
Langt om længe slet linjen i HTML-kommentaren fra kodestykket ovenfor og erstatt det med HTML-koden du genererede i trin 1 med social deling knapper generatoren.
 
Trin 4: Kopier den passende skabelonfil til børnememappen
 
Som standard styres enkelte indlæg af en navngivet skabelonfil single.php. Nogle gange - især i mere moderne temaer - strukturen af single.php er mere kompliceret, da det også indlæser yderligere skabelonfiler. I dette trin skal vi finde den passende template fil, hvor vi kan tilføje ikonerne senere.
 
For at finde det rigtige sted for de sociale knapper, skal vi finde den skabelonfil der indeholder den funktion, der indlæser indholdet af de enkelte indlæg.
 
Lad os åbne tema editoren i WordPress admin dashboard under Udseende> Redaktør. Øverst til højre finder du en dropdown liste, hvor du kan vælge dit overordnede tema. Under rullemenuen kan du se alle de skabelonfiler, som dit forælderstema indeholder. Rul ned til du finder Single Post-skabelon (kaldet single.php) og åbne den.
 
Hvis forældetema bruger get_template_part () WP funktion i single.php fil, der betyder, at den bruger en ekstra skabelonfil til at indlæse indholdet af det enkelte indlæg.
 
Først skal du finde ud af, hvem der er her. Navnet på den ekstra skabelonfil er den første parameter i get_template_part () fungere.
 
I Tyve Femten det ser sådan ud:
 
get_template_part ('indhold', get_post_format ());
 
Den første parameter er 'indhold' hvilket betyder at vi kigger efter den skabelonfil, der hedder content.php. Du skal kopiere denne fil fra stamtemaet til overordnet tema til børnetemaets rodmappe for at ændre det.
 
 
Trin 5: Tilføj handlingskrog til den rigtige skabelonfil
 
Vi oprettede en kaldet funktion add_social_sharing () i trin 3, og vi vedhæftede det til en brugerdefineret handlingskrog kaldet custom_social_share. Nu bliver vi nødt til at tilføje denne krog til stedet, hvor vi ønsker, at funktionen skal udføres.
 
Her er kodestykket, du skal indsætte til det rigtige sted:
 
 
Næste, lad os finde det rigtige sted.
 
Åbn den skabelonfil, du tilføjede til dit barntema i trin 4 i en kodeeditor eller inden for tema editoren på WordPress admin dashboard, og se efter indholdet() fungere.
 
Kontroller, om der er en wp_link_pages () funktion lige efter indholdet() fungere. Hvis der er, kommer kodestykket ovenfor efter det; ellers følger det indholdet() fungere.
 
 
Trin 6: Tilføj CSS-koden til børnetemaet
 
Åbn style.css fil af dit barn tema, enten i din kode editor eller i tema editoren af ​​WordPress admin dashboard, kopier CSS koden du genererede i Trin 1, indsæt den i slutningen af ​​filen og gem den.
 
 
Vi tilføjer to ekstra linjer til CSS-filen for at få vist de sociale delingsikoner korrekt i hvert tema. Kopier og indsæt følgende kodestykke i slutningen af style.css fil:
 
 ul.share-knapper li a border: 0;  ul.share-knapper li img display: inline;  
 
Trin 7: Upload Social Media Icon Set til serveren
 
Upload det valgte sociale medieikon, som du downloadede i trin 1, til din tematmappe for børn. Tilslut din server via FTP, opret en ny mappe, der hedder billeder inde i roden af ​​din tematema for barnet (/ wp-indhold / temaer / dit-barn-tema / billeder) og uploade ikonet her.
 
Vi navngiver mappen billeder fordi dette er standardnavnet på billedmappen, bruger Simple Sharing Buttons Generator.
 
Trin 8: Kontroller stien i ikonfilerne
 
Når du har uploadet de sociale medier ikoner til din server i trin 7, er det vigtigt at kontrollere ikonfilernes sti for at sikre, at de bliver indlæst.
 
Stien til en billedfil giver et tip til browseren om dens placering på serveren. Lad os kontrollere billedstierne inde i functions.php fil af barnetemaet. Åbn filen i din kodeditor, og naviger til add_social_sharing () funktion, hvor du skal tjekke den HTML-kode, du genererede med generatoren Simple Sharing Buttons.
 
I HTML-koden finder du en  tag med en src attribut for hvert ikon. Tjek om hver src attributter peger på det nøjagtige sted, hvor dit ikonsæt blev uploadet i trin 7.
 
Simple Sharing Buttons Generator tilføjer relative stier til  filer. Sommetider browsere kan ikke gengive billederne, hvis du bruger en relativ sti, så det er en god idé at brug absolutte stier i stedet. På denne måde kan hver browser, der potentielt bruges af dine besøgende, være dår sikker på placeringen af ​​de ønskede ikonfiler.
 
Den relative billedsti, der tilføjes af generatoren, ser noget sådan ud:
 
 
Lad os ændre src attributten til hvert ikon til en absolut sti, hvilket betyder at den vil indeholde den fulde URL for filen.
 
URL-stien ovenfor vil se sådan ud:
 
 
Trin 9: Upload de ændrede filer og aktiver barnetemaet
 
Slut din server via FTP og upload alle filer, vi oprettede i denne vejledning, som du ikke har uploadet endnu: functions.php, det style.css, og den relevante skabelonfil (i denne vejledning enten single.php eller den content.php).
 
Aktivér endelig barnetemaet i WP admin dashboard under Udseende> Temaer menu.
 
Nu er du klar med dine superlette, ressourcebesparende, tilpassede sociale delingsikoner. Du kan gå online og tjekke den live på dit websted.
 
 
Konklusion
 
I denne vejledning viste jeg dig, hvordan du tilføjer de brugerdefinerede sociale delingsknapper til slutningen af ​​enkelte indlæg. Du kan føje delingsikonerne til andre steder på din hjemmeside ved hjælp af den handlingskrog vi oprettede.
 
Tilføj kun koden vi brugte i trin 5 til stedet hvor du vil have knapperne til at blive vist:
 
 
Du skal også finde den rigtige skabelonfil, hvis du vil placere ikonerne et andet sted. Enkelt sider er styret af en navngivet skabelonfil page.php, mens medievedhæftninger som billeder er indlæst af attachment.php.
 
Hvis du ønsker at vise de sociale delingsknapper på et andet sted på din hjemmeside, kan du bruge WordPress Template Hierarchy til at finde det.
 
Download kilde