Adăugați Lazy Butoane de încărcare socială pe Blogul dvs. WordPress

Una dintre cele mai comune și importante părți ale fiecărui blog este o colecție de butoane de social media, cum ar fi butonul Facebook Like, butonul Tweet Twitter, butonul +1 al Google etc. Fiecare platformă socială adaugă un fișier JavaScript cu butoanele sale, adică când o pagină de blog Încărcăturile trebuie să aștepte 300 de kilograme de conținut social. Acest lucru blochează redarea paginii, ceea ce duce la creșterea timpului de încărcare a paginii. Pentru a rezolva această problemă, unele dintre blogurile foarte mari au creat anumite tehnici prin care butoanele de social media pot fi încărcate asincron. În acest tutorial veți învăța cum să adăugați butoanele de distribuire socială "leneș de încărcare" pe blogul dvs. WordPress.

Introducere:

Aceste pictograme vor folosi o bibliotecă JavaScript realizată de David Bushell. .Net revista a publicat întrebarea Mare: ar trebui să renunțăm la butoanele de social media? cu opinii și anecdote de la diverși profesioniști. Acest lucru la inspirat să le răspundă cu un fragment de cod frumos.

Sunt widget-uri sociale masiv. În mod eficient, site-urile suplimentare sunt împachetate cu nisip în interiorul unor mici iframe și cele mai puțin optimizate. Butonul "ca" al Facebook este îngrozitor. Această problemă nu poate fi subevaluată și am dezvoltat Socialite.js din acest motiv. Partidele socialiste se încarcă și funcționează foarte bine. Nu reduce cantitatea de octeți care este expediată, dar vă permite să încărcați primul site înainte ca fluxul să fie saturat cu extrasuri sociale.
- David

Unele cuvinte despre Socialite

Socialite oferă o modalitate foarte ușoară de a implementa și de a activa o mulțime de butoane de partajare socială - oricând doriți. La încărcarea documentelor, la hover, la orice eveniment!

Dacă îți vinzi sufletul, poți să o faci și în mod asincron.
- David

Caracteristici și Beneficii

Nu există dependențe de utilizat.
Încarcă resursele externe numai atunci când este necesar.
Mai puțin de 5kb când este minificat și comprimat.
Mai multe valori implicite și mai stricte.
Sprijin pentru Twitter, Google+, Facebook, LinkedIn, Pinterest și Spotify.
Extensibil cu alte rețele sociale.
Dezactivează implementarea nativă atunci când este activată.
Suportat în toate browserele (furnizând butoanele).

Pasul 1 Încărcarea JavaScript

Sa mergem. Primul pas este să încărcați socialite.min.js fișier, pe care vă recomand să-l încărcați în subsolul dvs. Descărcați pachetul de pe socialitejs.com, deschideți-l și încărcați socialite.min.js fișierul către dvs. wp-content / teme / ta temă folder / js / folder (în cazul în care js dosarul nu există, creați-l mai întâi).

Pasul 2 Adăugarea scriptului la subsol

Adăugați Socialite

După încărcarea fișierului JS în dosarul temei, adăugați următorul cod în tema proprie functions.php fişier.

 functie wptuts_load_socialite () // Inregistreaza Socialite wp_register_script ('socialite', get_template_directory_uri () ./js/socialite.min.js ', array (),', true); // Acum enqueue Socialite wp_enqueue_script ('socialite') ; add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Inițializați Socialite

Acum creați un nou fișier JS în dvs. wp-content / teme / ta temă folder / js / director numit wptuts-social.js și puneți următorul cod în el.

 jQuery (document) .ready (functie ($) $ ('. social-buttons'). ;

Acum avem un al doilea fișier JS, trebuie să modificăm codul PHP pe care l-am adăugat la adresa noastră functions.php fișier, așa că acum ar trebui să pară următoarele.

 () wt_register_script ('witech'), ', true'; // Register socialite wp_register_script ('socialite', get_template_directory_uri () '/js/socialite.min.js' social ', get_template_directory_uri () ./js/wptuts-social.js', array ('jquery', 'socialite'), ", adevărat); // Acum enqueue Socialite wp_enqueue_script ('wptuts-social');  add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Ce este acest cod?

În primul pas pe care l-ați încărcat socialite.min.js în dosarul temei, după care, în al doilea pas, ați inclus acest script în subsolul temei. Apoi ați adăugat un mic cod pentru a declanșa butonul social de pe mouseenter proprietate pentru o anumită clasă, adică clasa butoanelor noastre sociale -butoane sociale, când mouse-ul intră în clasa respectivă sau puteți spune când cineva se deplasează cu mouse-ul peste -butoane sociale clasa, butoanele de partajare socială se vor încărca chiar în acel moment.

În codul de mai sus această linie este responsabilă pentru declanșarea butoanelor sociale, puteți schimba clasa (adică. -butoane sociale) pentru oricare altul pe care îl doriți.

 $ (', butoane sociale') unul ('mouseenter', functie ()

Pasul 3 Adăugarea CSS

Vom discuta unde să adăugăm HTML ulterior, să adăugăm mai întâi CSS. Deci, suntem pe cale să adăugăm CSS care va ascunde textul butonului și va afișa o imagine în locul lor atunci când acestea nu sunt încărcate. Esti liber sa modifici CSS pentru a te potrivi temei, astfel te va face sa iesi de la altii. David a codat următorul CSS.

Creați un nou fișier CSS numit wptuts-social.css în tine wp-content / teme / dumneavoastră temă-director / css / folder (în cazul în care css dosarul nu există, creați-l mai întâi).

Apoi adăugați următorul cod în fișier.

 / * * Socialite Aspectul implicit implicit * / .social-butoane display: block; listă: nu există; umplutura: 0; margine: 20 pixeli; . butoane sociale> li display: block; marja: 0; padding: 10px; plutește la stânga;  .social-butoane .socialite display: bloc; poziție: relativă; fundal: url ("images_22 / add-lazy-loading-social-sharing-buttons-to-your-wordpress-blog.png" date-original-url = "https://tuts-authors.s3.amazonaws.com/ wp.tutsplus.com/AhmadAwais/2012/08/29/social-sprite.png ') 0 0 nu-repeta;  .social-butoane .socialite-încărcate fundal: nici unul! important;  .social-butoane .twitter-share width: 55px; înălțime: 65px; pozitie pozitie: 0 0;  .social-butoane .googleplus-one width: 50px; înălțime: 65px; pozitie fundal: -75px 0;  .social-buttons.facebook-like width: 50px; înălțime: 65px; pozitie fundal: -145px 0;  .social-butoane .linkedin-share width: 60px; înălțime: 65px; pozitie de fundal: -215px 0;  .vhidden frontieră: 0; clip: rect (0 0 0 0); înălțime: 1px; margine: -1px; overflow: ascuns; umplutura: 0; poziția: absolută; lățime: 1px;

Acum să ne întoarcem și să modificăm codul PHP pe care l-am pus în lista noastră functions.php din nou, pentru a încărca noul fișier CSS, după cum urmează.

 () wt_register_script ('witech'), ', true'; // Register socialite wp_register_script ('socialite', get_template_directory_uri () '/js/socialite.min.js' social ', get_template_directory_uri () ./js/wptuts-social.js', array ('jquery', 'socialite'), ", adevărat); // Acum enqueue Socialite wp_enqueue_script ('wptuts-social'); // Înregistrați CSS social wp_register_style ('wptuts-social', get_template_directory_uri () ./css/wptuts-social.css '); // Acum enqueue social wp_enqueue_style ('wptuts-social');  add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Indreptați-vă la Ponder

Asigurați-vă că schimbați calea de imagine sprite la propriul server. Puteți descărca imaginea de mai jos și încărcați-o pe blogul dvs. și apoi schimbați locația sa la linia # 7 din codul CSS de mai sus.

Pasul 4 Marcarea HTML

Să vedem codul HTML pentru aceste butoane

  "date-url =""data-count =" vertical "data-via =" twitter-username-aici ">Distribuiți pe Twitter
 „>Distribuiți pe Google+
 "date-send =" false "date-layout =" box_count "date-width =" 60 "date-show-faces =" false ">Distribuiți pe Facebook
 & Title ="rel =" nofollow "target =" _ blank "date-url =""date-counter =" sus ">Distribuiți pe LinkedIn

Lucruri de făcut aici:

Schimbare twitter-username-aici cu propriul nume de utilizator Twitter în codul de mai sus.

Unde să adăugați acest cod?

Acest cod poate fi adăugat într-o mulțime de locuri prin numeroase metode. Permiteți-mi să vă dau câteva exemple

Puteți adăuga acest cod:

Sub postul meta din dvs. single.php
Sub conținutul dvs. single.php
În tine index.php în bucla etc.

Pasul 5 Adăugarea HTML în WordPress

Metoda manuală

Du-te la tine wp-content / teme / dumneavoastră temă-director / și deschideți-vă single.php fişier. Atunci găsiți continutul, și veți găsi un cod ca acesta . Adăugați codul HTML afișat mai jos sau deasupra acestuia.

Adăugarea înaintea unei postări

Du-te la tine wp-content / teme / dumneavoastră temă-director / și deschideți-vă functions.php fişier. Adăugați codul de mai jos la sfârșitul acestuia:

 funcția social_before_the_content ($ content) $ custom_content = '  "date-url =""data-count =" vertical "data-via =" twitter-username-aici ">Distribuiți pe Twitter
 „>Distribuiți pe Google+
 "date-send =" false "date-layout =" box_count "date-width =" 60 "date-show-faces =" false ">Distribuiți pe Facebook
 & Title ="rel =" nofollow "target =" _ blank "date-url =""date-counter =" sus ">Distribuiți pe LinkedIn
 
 „; $ custom_content. = $ conținut; return $ custom_content;  add_filter ('the_content', 'social_before_the_content');

Adăugarea după o postare

Din nou du-te la dvs. wp-content / teme / dumneavoastră temă-director / și deschideți-vă functions.php fişier. Adăugați codul de mai jos la sfârșitul acestuia:

 funcția social_after_the_content ($ conținut) $ custom_content. = $ content; $ custom_content. = '  "date-url =""data-count =" vertical "data-via =" twitter-username-aici ">Distribuiți pe Twitter
 „>Distribuiți pe Google+
 "date-send =" false "date-layout =" box_count "date-width =" 60 "date-show-faces =" false ">Distribuiți pe Facebook
 & Title ="rel =" nofollow "target =" _ blank "date-url =""date-counter =" sus ">Distribuiți pe LinkedIn
 
 „; return $ custom_content;  add_filter ('the_content', 'social_after_the_content');

Imagini

Să aruncăm o privire la aceste butoane leneș de încărcare socială de încărcare:

Înainte de Hover

Acesta este modul în care arată pictogramele sociale când prima pagină se încarcă

Dupa Hover

Când treceți deasupra lor, butoanele le încarcă fișierele așa cum se arată mai jos

Cuvintele finale

Bacsis: Fiți creativi, nu copiați / lipiți codul de mai sus și puneți-l pe blogul dvs., încercați să îi oferiți un aspect nou. Lăsați sucurile creative să curgă!

Cateva exemple

TechCrunch
Mashable

Cum le folosesc?

Puteți vedea imaginea de mai jos din blogul meu, cum le folosesc. (Inspirat de Mashable) (Vizualizare live)

Cod