Optimizarea vitezei WordPress cu pictograme personalizate de partajare socială

Poate părea o sarcină ușoară, dar adăugarea unor butoane de partajare socială bine comportamentală la un site WordPress poate fi un hassle. Când spun că se comportă bine, vreau să spun că pluginurile simple, ușoare, bazate pe resurse, cele mai rapide aplicații de partajare socială nu sunt așa. Ei tind să mănânce resurse ca nebunia și de ce ar vrea cineva să crească timpul de încărcare a plugin-ului cu 25-35% doar pentru a afișa câteva pictograme pe site-ul lor?

Vestea bună este că nu aveți nevoie neapărat de un plugin pentru a îndeplini această sarcină. În acest tutorial, vă voi arăta cum puteți cu ușurință adăugați butoane de partajare socială personalizată la sfârșitul postărilor de pe site-ul dvs. WordPress cu doar câteva linii de cod.

Pasul 1: Generați butoanele de distribuire socială

Vom folosi Generatorul de butoane de partajare simplă, un instrument Web la îndemână și ușor de utilizat pentru a genera pictogramele de distribuire. Principalul avantaj al acestei aplicații este faptul că butoanele pe care le generează rulează pe interfață, prin urmare acestea nu vă vor împovăra serverul și puteți, de asemenea, să păstrați activitățile utilizatorilor dvs. private.

Pentru a genera butoanele personalizate, accesați aici și apăsați Începe. Alegeți 1 din cele 6 stiluri de butoane diferite. Clic Următor → și bifați retele sociale pe care doriți să le adăugați pe site-ul dvs. După ce ați terminat, va trebui să completați informațiile despre site-ul dvs..

Pe acest ecran (de mai jos), veți găsi două opțiuni: "Nu există JavaScript" și 'JavaScript'. căpușă JavaScript, deoarece va permite browserului să detecteze dinamic adresa URL, prin urmare vizitatorii dvs. vor putea să partajeze fiecare post individual, nu doar cu adresa URL a paginii de pornire.

În sfârșit, aruncați o privire la previzualizarea live, descărcați setul de pictograme ales și apucați codul pe care l-ați generat.

Pasul 2: Creați o temă pentru copii

Acum va trebui să adăugați pictogramele și codul generat pe site-ul dvs. În primul rând, va trebui să creați o temă pentru copii.

Puteți crea cu ușurință o temă WP copil cu ajutorul tutorialului nostru sau puteți urma pașii acestui articol WP Codex. Dacă aveți deja unul, puteți să treceți la Pasul 3.

Tema copilului se referă la tema pe care o utilizați în prezent - într-un mod relativ similar celui în care copilul se referă la părinții săi. Aceasta moștenește tot (stil și funcționalitate) din tema părinte dar tu poti adăugați funcționalități suplimentare la el.

În cazul nostru, funcționalitatea suplimentară va fi butoanele de partajare socială personalizată.

Pasul 3: Creați o funcție personalizată care afișează pictogramele

Vom adăuga o funcție personalizată fișierului functions.php al temei copilului.

Cu ajutorul acestei funcții, veți putea adăuga pictogramele sociale oriunde doriți pe site-ul dvs. utilizând un cârlig de acțiune personalizat. Dacă tema copilului dvs. nu are încă un fișier funcțional.php, creați un fișier text gol în dosarul rădăcină al temei copilului cu funcțiile de nume și modificați extensia acestuia la .php.

Inserați următoarea linie de cod în acest fișier gol:

 
Când ești tu functions.php fișierul este configurat să adauge la el următorul fragment de cod:
 
 / * * Adaugă pictogramele personalizate de partajare socială * / funcția add_social_sharing () ?> 
Distribuie aceasta postare
   
In cele din urma ștergeți linia comentariului HTML din fragmentul de cod de mai sus și din înlocuiți-l cu codul HTML ați generat la pasul 1 cu generatorul de distribuire a butoanelor sociale.
 
Pasul 4: Copiați fișierul corespunzător șablonului în folderul tematic pentru copii
 
În mod prestabilit, postările unice sunt conduse de un fișier șablon numit single.php. Uneori - în special în teme mai moderne - structura single.php este mai complicat, deoarece încarcă și alte fișiere șablon. În acest pas trebuie să găsim fișierul șablon corespunzător în care să adăugăm pictogramele mai târziu.
 
Pentru a localiza punctul potrivit pentru butoanele sociale, trebuie să găsim fișierul șablon care conține funcția care încarcă conținutul posturilor unice.
 
Să deschidem editorul de teme în tabloul de bord al administratorului WordPress Aspect> Editor. În colțul din dreapta sus, găsiți o listă drop-down în care puteți selecta tema părinte. Sub meniul derulant puteți vedea toate fișierele șablon pe care le conține tema părinte. Derulați în jos până când găsiți Șablon unic de postare (numit single.php) și deschideți-l.
 
Dacă tema părinte utilizează get_template_part () Funcția WP în single.php fișier care înseamnă că folosește un fișier de șablon suplimentar pentru a încărca conținutul postului unic.
 
Mai intai trebuie sa afli care este aceasta. Numele fișierului șablon suplimentar este primul parametru al get_template_part () funcţie.
 
În Douăzeci și cincisprezece se pare ca aceasta:
 
get_template_part ('conținut', get_post_format ());
 
Primul parametru este 'conţinut' ceea ce înseamnă că căutăm fișierul șablon numit content.php. Trebuie să copiați acest fișier din folderul părinte rădăcină temă în directorul rădăcină tematică copil, astfel încât acesta să fie modificat.
 
 
Pasul 5: Adăugați cârligul de acțiune în fișierul de șablon din dreapta
 
Am creat o funcție numită add_social_sharing () în Pasul 3, și l-am atașat la un cârlig de acțiune personalizat numit custom_social_share. Acum, va trebui să adăugăm acest cârlig la locul în care vrem ca funcția să fie executată.
 
Aici este fragmentul de cod pe care va trebui să îl inserați în locul potrivit:
 
 
Apoi, hai să găsim locul potrivit.
 
Deschideți fișierul șablon pe care l-ați adăugat la tema copilului dvs. în Pasul 4 într-un editor de cod sau în editorul de teme al tabloului de bord al administratorului WordPress și căutați continutul() funcţie.
 
Verificați dacă există a wp_link_pages () funcția imediat după continutul() funcţie. Dacă există, atunci fragmentul de cod de mai sus vine după; în caz contrar, urmează continutul() funcţie.
 
 
Pasul 6: Adăugați codul CSS la tema Copil
 
Deschide style.css fișierul temei copilului dvs. fie în editorul de coduri, fie în editorul de teme al tabloului de bord al administratorului WordPress, copiați codul CSS generat în Pasul 1, lipiți-l până la sfârșitul fișierului și salvați-l.
 
 
Vom adăuga două linii suplimentare în fișierul CSS pentru a afișa corect pictogramele de partajare socială în fiecare temă. Copiați și inserați următorul fragment de cod la sfârșitul secțiunii style.css fişier:
 
 butoanele ul.share li a border: 0;  ul.share-butoane li img afișare: inline;  
 
Pasul 7: Încărcați setul de pictograme Social Media pe server
 
Încărcați setul de pictograme media sociale selectat pe care l-ați descărcat în Pasul 1 în dosarul tematic pentru copii. Conectați-vă serverul prin FTP, creați un folder nou numit imagini în interiorul rădăcină a folderului tematic pentru copii (/ wp-content / themes / your-child-theme / images) și încărcați aici setul de pictograme.
 
Denumim dosarul imagini deoarece acesta este numele implicit al folderului de imagini pe care îl folosește generatorul de distribuire simplă a butoanelor.
 
Pasul 8: Verificați calea fișierelor de pictograme
 
După ce ați încărcat pictogramele social media pe serverul dvs. în Pasul 7, este important să verificați calea fișierelor cu pictograme pentru a vă asigura că acestea vor fi încărcate.
 
Calea unui fișier imagine oferă un indiciu browserului despre locația acestuia pe server. Să verificăm căile de imagine din interiorul lui functions.php fișier al temei copilului. Deschideți fișierul din editorul de cod și navigați la add_social_sharing () funcția în care trebuie să verificați codul HTML pe care l-ați generat cu generatorul de simplă partajare a butoanelor.
 
În codul HTML veți găsi un  eticheta cu src atribut pentru fiecare pictogramă. Verificați dacă fiecare src atributele indică locația exactă în care setul dvs. de pictograme a fost încărcat în Pasul 7.
 
Generatorul de butoane de partajare simplă adaugă căi relative la  fișiere. Uneori browserele nu pot reda imaginile dacă utilizați o cale relativă, deci este o idee bună utilizați în schimb căile absolute. În acest fel, fiecare browser potențial utilizat de vizitatorii dvs. poate fi sigur sigur de localizarea fișierelor cu pictograme necesare.
 
Calea relativă a imaginii adăugată de generator arată cam așa:
 
 
Să schimbăm src atributul fiecărei pictograme la o cale absolută, ceea ce înseamnă că va include adresa URL completă a fișierului.
 
Calea URL de mai sus va arăta astfel:
 
 
Pasul 9: Încărcați fișierele modificate și activați tema copilului
 
Conectați-vă serverul prin FTP și încărcați toate fișierele pe care le-am creat în acest tutorial pe care nu l-ați încărcat încă: functions.php,  style.css, și fișierul șablon corespunzător (în acest tutorial fie single.php sau content.php).
 
În cele din urmă, activați tema copilului din tabloul de bord admin al administratorului WP sub Aspect> Teme meniul.
 
Acum sunteți pregătiți cu ajutorul icoanelor super-ușoare, de economisire a resurselor, personalizate, de partajare socială. Puteți să vă conectați online și să o verificați live pe site-ul dvs..
 
 
Concluzie
 
În acest tutorial v-am arătat cum să adăugați butoanele personalizate de partajare socială la sfârșitul postărilor unice. Puteți adăuga pictogramele de distribuire în orice altă locație de pe site-ul dvs. web cu ajutorul cârligului de acțiune pe care l-am creat.
 
Doar adăugați codul pe care l-am utilizat la pasul 5 în locul în care doriți să fie afișate butoanele:
 
 
De asemenea, va trebui să găsiți fișierul de șablon potrivit dacă doriți să plasați pictogramele în altă parte. Paginile unice sunt conduse de un fișier șablon numit page.php, în timp ce atașamentele media precum imaginile sunt încărcate attachment.php.
 
Dacă doriți să afișați butoanele de partajare socială într-un alt loc pe site-ul dvs., puteți utiliza ierarhia șabloanelor WordPress pentru ao găsi.
 
Descărcați sursa