WordPress Speed Optimization med anpassade sociala delningsikoner
Det kan tyckas vara en lätt uppgift, men det kan vara ett problem att lägga till väl fungerande sociala delningsknappar till ett WordPress-område. När jag säger bra beteende menar jag enkel, lättvikt, resursvänlig, snabbast - de flesta sociala delproppar där ute är inte så. De tenderar att äta upp resurser som galen och varför skulle någon vilja öka plugin-laddningstiden med 25-35% bara för att visa några ikoner på deras webbplats?
Den goda nyheten är att du inte nödvändigtvis behöver ett plugin för att uppnå denna uppgift. I denna handledning kommer jag att visa dig hur du enkelt kan Lägg till anpassade sociala delningsknappar till slutet av inlägg på din WordPress-webbplats med bara några rader av kod.
Steg 1: Skapa de sociala delningsknapparna
Vi kommer att använda Simple Sharing Buttons Generator, ett användbart och lättanvänt webbverktyg för att generera delningsikonen. Den största fördelen med den här appen är att knapparna det genererar kör på fronten därför de kommer inte att belasta din server och du kan också hålla dina användares aktiviteter privata.
För att skapa dina anpassade knappar, gå hit och tryck på Börja. Välj 1 från de 6 olika knappstilarna. Klick Nästa och kryssa på sociala nätverk du vill lägga till din webbplats. När du är klar måste du fylla i din webbplats information.
På den här skärmen (nedan) hittar du två alternativ: "Ingen JavaScript" och 'JavaScript'. Bock JavaScript, eftersom det kommer att göra det möjligt för webbläsaren att upptäcka URL-adressen dynamiskt, kommer dina besökare därför att kunna dela varje inlägg enskilt, inte bara webbadressen till hemsidan.
Slutligen ta en titt på live-förhandsgranskningen, ladda ner den valda ikonuppsättningen och ta tag i koden du skapade.
Steg 2: Skapa ett barntema
Nu måste du lägga till de genererade ikonerna och koden till din webbplats. Först och främst behöver du skapa ett barntema.
Du kan enkelt skapa ett WP-barntema med hjälp av vår handledning, eller du kan följa stegen i den här WP Codex-artikeln. Om du redan har en, kan du hoppa till steg 3.
Barntematet hänför sig till det tema du för närvarande använder - på ett sätt som liknar barnet med sina föräldrar. Det ärver allt (stil och funktionalitet) från modertemat men du kan lägg till extra funktionalitet till det.
I vårt fall är extrafunktionaliteten de anpassade sociala delningsknapparna.
Steg 3: Skapa en anpassad funktion som visar ikonerna
Vi lägger till en anpassad funktion för barntemaets funktioner.php-fil.
Med hjälp av den här funktionen kan du lägga till de sociala ikonerna var du än vill ha på din webbplats med hjälp av en anpassad handlingskrog. Om ditt barntema inte har en functions.php-fil än, skapa en tom textfil i ditt barntemas rotmapp med namnfunktionerna och ändra dess tillägg till .php.
Infoga följande kodlinje i den här tomma filen:
När din functions.php filen är konfigurerad lägg till följande kodbit till den:
/ * * Lägger till de anpassade sociala delningsikonen * / funktion add_social_sharing () ?>
Dela det här inlägget
Till sist Ta bort raden i HTML-kommentaren från kodsteget ovan och ersätt det med HTML-koden du genererade i steg 1 med Generell Generation Generator.
Steg 4: Kopiera lämplig mallfil till barntema-mappen
Som standard styrs enstaka inlägg av en mallfil som heter single.php. Ibland - speciellt i mer moderna teman - strukturen av single.php är mer komplicerat, eftersom det också laddar ytterligare mallfiler. I det här steget behöver vi hitta den lämpliga mallfilen där vi kan lägga till ikonerna senare.
För att hitta rätt plats för sociala knappar måste vi hitta mallfilen som innehåller den funktion som laddar innehållet i de enskilda inläggen.
Låt oss öppna temaredigeraren i WordPress admin dashboard under Utseende> Redaktör. I övre högra hörnet hittar du en rullgardinslista där du kan välja ditt överordnade tema. Nedanför rullgardinsmenyn kan du se alla mallfiler som ditt förhörstema innehåller. Bläddra ner tills du hittar Enkel inläggsmall (kallad single.php) och öppna den.
Om modertemat använder get_template_part () WP-funktionen i single.php fil som betyder att den använder en extra mallfil för att ladda innehållet i det enskilda inlägget.
Först måste du ta reda på vilken som är här. Namnet på den extra mallfilen är den första parametern för get_template_part () fungera.
Den första parametern är 'innehåll' vilket innebär att vi letar efter mallfilen som heter content.php. Du måste kopiera den här filen från huvudmappen för överordnade temat till barntema-rotmappen så att den ändras.
Steg 5: Lägg till åtgärdshaken till rätt mallfil
Vi skapade en funktion som heter add_social_sharing () i steg 3, och vi bifogade den till en anpassad handlingskrok som heter custom_social_share. Nu måste vi lägga till den här kroken till den plats där vi vill att funktionen ska utföras.
Här är koden som du behöver sätta in på rätt ställe:
Låt oss hitta rätt plats.
Öppna den mallfil du lagt till i ditt barntema i steg 4 i en kodredigerare eller inuti temedatorn på WordPress admin-instrumentpanelen och leta efter innehållet() fungera.
Kontrollera om det finns a wp_link_pages () funktion direkt efter innehållet() fungera. Om det finns, kommer kodavsnittet ovan efter det; annars följer det innehållet() fungera.
Steg 6: Lägg till CSS-koden till barntemat
Öppna style.css fil av ditt barntema antingen i kodredigeraren eller i temedatorn på WordPress admin-instrumentpanelen, kopiera den CSS-kod du skapade i steg 1, klistra in den till slutet av filen och spara den.
Vi lägger till två extra rader till CSS-filen för att få de sociala delningsikonen att visas korrekt i varje tema. Kopiera och klistra in följande kodbit till slutet av style.css fil:
ul.share-knappar li a border: 0; ul.share-knappar li img display: inline;
Steg 7: Ladda upp Social Media Icon Set till Server
Ladda upp den valda sociala medierikonen som du hämtade i steg 1 till din tematmapp för barn. Anslut din server via FTP, skapa en ny mapp som heter bilder inuti roten till din tematmapp för barn (/ wp-innehåll / teman / ditt barn-tema / bilder) och ladda upp ikonen här.
Vi namnger mappen bilder eftersom det här är standardnamnet för bildmappen använder Simple Sharing Buttons Generator.
Steg 8: Kontrollera sökvägen för ikonfilerna
När du har laddat upp sociala medierikonen till din server i steg 7 är det viktigt att kontrollera ikonfilerna för att se till att de laddas.
Banan i en bildfil ger en aning till webbläsaren om dess plats på servern. Låt oss kolla bildvägarna inuti functions.php fil av barntemat. Öppna filen i kodredigeraren och navigera till add_social_sharing () funktion där du måste kontrollera HTML-koden du genererade med generatorn för enkel delning.
I HTML-koden hittar du en tagga med en src attribut för varje ikon. Kontrollera om varje src attribut pekar på den exakta platsen där din ikonuppsättning laddades upp i steg 7.
Den enkla delningsknappgeneratorn lägger till relativa sökvägar till filer. Ibland webbläsare kan inte göra bilderna om du använder en relativ sökväg, så det är en bra idé att använd absoluta vägar istället. På så sätt kan varje webbläsare som potentiellt används av dina besökare vara dyra säker på platsen för de önskade ikonfilerna.
Den relativa bildvägen som genereras av generatorn ser något ut så här:
Låt oss ändra src attributet för varje ikon till en absolut sökväg som betyder att den kommer att innehålla filens fullständiga URL.
URL-sökvägen ovan kommer att se ut så här:
Steg 9: Ladda upp de ändrade filerna och aktivera barntema
Anslut din server via FTP och ladda upp alla filer som vi skapade i den här handledningen som du inte har laddat upp ännu: functions.php, de style.css, och lämplig mallfil (i denna handledning antingen single.php eller den content.php).
Aktivera slutligen barntemat i WP admin dashboard under Utseende> Teman meny.
Nu är du redo med dina superlätta, resursbesparande, anpassade sociala delningsikoner. Du kan gå online och kontrollera den live på din webbplats.
Slutsats
I denna handledning visade jag dig hur man lägger till de anpassade sociala delningsknapparna till slutet av enskilda inlägg. Du kan lägga till delningsikonen till andra platser på din webbplats med hjälp av den action krok som vi skapade.
Lägg bara till koden vi använde i steg 5 till den plats där du vill att knapparna ska visas:
Du måste också hitta rätt mallfil om du vill placera ikonerna någon annanstans. Enstaka sidor regleras av en mallfil som heter page.php, medan mediafiler som bilder laddas av attachment.php.
Om du vill visa sociala delningsknapparna på en annan plats på din webbplats kan du använda WordPress Template Hierarchy för att hitta den.
