Startpagina » WordPress » WordPress Snelheid Optimalisatie met Aangepaste Social Sharing-pictogrammen
WordPress Snelheid Optimalisatie met Aangepaste Social Sharing-pictogrammen
Het lijkt misschien een gemakkelijke taak, maar het toevoegen van goedgedragende social sharing-knoppen aan een WordPress-site kan een gedoe zijn. Als ik zeg braaf, bedoel ik simpele, lichtgewicht, resource-vriendelijke, snelle - de meeste social sharing-plug-ins die er zijn, zijn niet zo. Ze hebben de neiging om middelen als een gek op te eten, en waarom zou iemand de laadtijd van de plug-in met 25-35% willen verhogen om alleen wat pictogrammen weer te geven op hun site?
Het goede nieuws is dat je niet per se een plug-in nodig hebt om deze taak te volbrengen. In deze zelfstudie laat ik je zien hoe je gemakkelijk kunt aangepaste sociale knoppen voor het delen toevoegen tot het einde van de berichten op uw WordPress-site met slechts een paar regels code.
Stap 1: Genereer de knoppen voor sociaal delen
We zullen de Simple Sharing Buttons Generator gebruiken, een handige en gemakkelijk te gebruiken webtool om de pictogrammen voor delen te genereren. Het grote voordeel van deze app is dat de knoppen die het genereert, dus op de frontend worden uitgevoerd ze zullen uw server niet belasten en u kunt de activiteiten van uw gebruikers ook privé houden.
Ga hier naartoe en druk op om uw aangepaste knoppen te genereren Beginnen. Kies 1 uit de 6 verschillende knopstijlen. Klik volgende en vink het aan sociale netwerken u wilt toevoegen aan uw site. Als je klaar bent, moet je de info van je website invullen.
Op dit scherm (hieronder) vindt u twee opties: 'Geen JavaScript' en 'JavaScript'. Kruis aan JavaScript, omdat het de browser in staat stelt de URL dynamisch te detecteren, zodat uw bezoekers elk bericht afzonderlijk kunnen delen en niet alleen de URL van de startpagina.
Kijk ten slotte naar de live preview, download de gekozen icon set en pak de code die je hebt gegenereerd.
Stap 2: maak een kindthema
Nu moet u de gegenereerde pictogrammen en code toevoegen aan uw site. Allereerst zul je een kindthema moeten maken.
U kunt eenvoudig een WP-child-thema maken met behulp van onze zelfstudie of u kunt de stappen volgen van dit WP Codex-artikel. Als je er al een hebt, kun je naar Stap 3 springen.
Het kindthema heeft betrekking op het thema dat u momenteel gebruikt - op een enigszins vergelijkbare manier als een kind zich verhoudt tot zijn ouders. Het erft alles (stijl en functionaliteit) van het bovenliggende thema maar je kan voeg extra functionaliteit toe ernaar toe.
In ons geval is de extra functionaliteit de aangepaste knoppen voor sociaal delen.
Stap 3: Maak een aangepaste functie die de pictogrammen weergeeft
We zullen een aangepaste functie toevoegen aan het functions.php-bestand van het kindthema.
Met behulp van deze functie kunt u de sociale pictogrammen toevoegen waar u maar wilt op uw site met behulp van een aangepaste actiehaak. Als uw kindthema nog geen function.php-bestand heeft, maakt u een leeg tekstbestand in de hoofdmap van uw kindthema met de naamfuncties en wijzigt u de extensie in .php.
Voeg de volgende regel code in dit lege bestand in:
Wanneer je functions.php bestand is ingesteld, voeg het volgende codefragment eraan toe:
/ * * Voegt de aangepaste pictogrammen voor sociaal delen * / function add_social_sharing () ?> Toe
Deel dit bericht
Tenslotte verwijder de regel van de HTML-opmerking van het codefragment hierboven en vervang het door de HTML-code je hebt in stap 1 gegenereerd met de Generator voor het delen van sociale delen.
Stap 4: Kopieer het juiste sjabloonbestand naar de themakader voor kinderen
Standaard worden enkele berichten bepaald door een sjabloonbestand met de naam single.php. Soms - vooral in meer moderne thema's - de structuur van single.php is ingewikkelder, omdat het ook extra sjabloonbestanden laadt. In deze stap moeten we het juiste sjabloonbestand vinden waar we de pictogrammen later kunnen toevoegen.
Om de juiste plek voor de sociale knoppen te vinden, moeten we het sjabloonbestand vinden dat bevat de functie die de inhoud van de afzonderlijke berichten laadt.
Laten we de thema-editor openen in het WordPress-beheerdersdashboard hieronder Uiterlijk> Editor. In de rechterbovenhoek vindt u een vervolgkeuzelijst waarin u uw bovenliggende thema kunt selecteren. Onder de vervolgkeuzelijst ziet u alle sjabloonbestanden die uw bovenliggende thema bevat. Blader omlaag totdat je de Enkele berichtsjabloon (genaamd single.php) en open het.
Als het bovenliggende thema de get_template_part () WP-functie in de single.php bestand betekent dat het een extra sjabloonbestand gebruikt om de inhoud van de enkele post te laden.
Eerst moet je uitvinden welke dit is. De naam van het aanvullende sjabloonbestand is de eerste parameter van de get_template_part () functie.
De eerste parameter is 'inhoud' wat betekent dat we op zoek zijn naar het sjabloonbestand met de naam content.php. U moet dit bestand kopiëren van de hoofdmap hoofdmap naar de hoofdmap van het onderliggende thema om het te wijzigen.
Stap 5: Voeg de actiehaak toe aan het juiste sjabloonbestand
We hebben een functie gemaakt met de naam add_social_sharing () in stap 3, en we hebben het gekoppeld aan een aangepaste actie haak genaamd custom_social_share. Nu zullen we deze haak moeten toevoegen aan de plek waar we de functie willen laten uitvoeren.
Hier is het codefragment dat u op de juiste plaats moet invoegen:
Laten we vervolgens de juiste plaats zoeken.
Open het sjabloonbestand dat u aan uw kindthema hebt toegevoegd in stap 4 in een code-editor of in de thema-editor van het WordPress-beheerdersdashboard en zoek naar de de inhoud() functie.
Controleer of er een is wp_link_pages () functie rechts na de de inhoud() functie. Als dat het geval is, komt het codefragment hierboven; anders volgt het de de inhoud() functie.
Stap 6: voeg de CSS-code toe aan het kindthema
Open de style.css bestand van uw kindthema in uw coderedacteur of in de themabewerker van het WordPress-beheerdersdashboard, kopieert u de CSS-code die u in stap 1 hebt gegenereerd, plakt u deze aan het einde van het bestand en slaat u deze op.
We voegen twee extra regels toe aan het CSS-bestand om de pictogrammen voor sociaal delen correct weer te geven in elk thema. Kopieer en plak het volgende codefragment aan het einde van de style.css het dossier:
ul.share-knoppen li a border: 0; ul.share-knoppen li img display: inline;
Stap 7: upload de Social Media Icon Set naar de server
Upload de gekozen sociale mediapictogramset die u in stap 1 hebt gedownload naar de themak map van uw kind. Verbind uw server via FTP, maak een nieuwe map genaamd afbeeldingen in de hoofdmap van de thememap van uw kind (/ wp-content / themes / your-child-theme / images) en upload het pictogram hier.
We noemen de map afbeeldingen omdat dit de standaardnaam is van de afbeeldingsmap die de Simple Sharing Buttons Generator gebruikt.
Stap 8: Controleer het pad van de pictogrambestanden
Nadat u de social media-pictogrammen in stap 7 naar uw server hebt geüpload, is het belangrijk om het pad van de pictogrambestanden te controleren om er zeker van te zijn dat ze worden geladen.
Het pad van een afbeeldingsbestand geeft een hint aan de browser over zijn locatie op de server. Laten we de afbeeldingspaden binnen de functions.php bestand van het kindthema. Open het bestand in uw codebewerker en ga naar add_social_sharing () functie waar u de HTML-code moet controleren die u hebt gegenereerd met de Generator voor eenvoudig delen van knoppen.
In de HTML-code vindt u een tag met een src kenmerk voor elk pictogram. Controleer of elk src attributen wijst naar de exacte locatie waar je icon set was geüpload in stap 7.
De Generator voor eenvoudig delen van knoppen voegt relatieve paden toe aan de bestanden. Soms browsers kunnen de afbeeldingen niet renderen als u een relatief pad gebruikt, dus het is een goed idee om gebruik in plaats daarvan absolute paden. Op deze manier kan elke browser die mogelijk door uw bezoekers wordt gebruikt, zeker weten waar de vereiste pictogrambestanden zich bevinden.
Het relatieve afbeeldingspad toegevoegd door de generator ziet er ongeveer zo uit:
Laten we de veranderen src attribuut van elk pictogram op een absoluut pad, wat betekent dat het de volledige URL van het bestand bevat.
Het URL-pad hierboven ziet er als volgt uit:
Stap 9: Upload de gewijzigde bestanden en activeer het kindthema
Verbind uw server via FTP en upload alle bestanden die we hebben gemaakt in deze tutorial die u nog niet hebt geüpload: de functions.php, de style.css, en het juiste sjabloonbestand (in deze zelfstudie de single.php of de content.php).
Activeer tot slot het onderliggende thema in het WP-beheerdersdashboard onder de Uiterlijk> Thema's menu.
Nu bent u klaar met uw superlichte, hulpbronnenbesparende, aangepaste pictogrammen voor sociaal delen. U kunt online gaan en het live bekijken op uw site.
Conclusie
In deze zelfstudie heb ik je laten zien hoe je de aangepaste knoppen voor sociaal delen aan het einde van afzonderlijke berichten kunt toevoegen. U kunt de pictogrammen voor delen toevoegen aan andere locaties op uw website met behulp van de actiehaak die we hebben gemaakt.
Voeg de code die we in stap 5 hebben gebruikt toe aan de plek waar u de knoppen wilt weergeven:
U zult ook het juiste sjabloonbestand moeten vinden als u de pictogrammen ergens anders wilt plaatsen. Enkele pagina's worden bepaald door een sjabloonbestand met de naam page.php, terwijl media-bijlagen zoals afbeeldingen worden geladen door attachment.php.
Als u de knoppen voor sociaal delen op een andere plek op uw website wilt weergeven, kunt u de WordPress-sjabloonhiërarchie gebruiken om deze te vinden.
