Legg Lazy Loading Social Sharing Knapper til WordPress Blog

En av de vanligste og viktigste delene av hver blogg er en samling av sosiale medier, dvs. Facebook's Like-knappen, Twitter's tweet-knapp, Googles +1-knapp osv. Hver sosial plattform legger til en JavaScript-fil med knappene, dette betyr når en bloggside masse det må vente på 300kb sosiale medier. Dette henger gjengivelsen av siden som resulterer i økt sidelastningstid. For å løse dette problemet har noen av de virkelig store bloggene utviklet bestemte teknikker som de sosiale medier-knappene kan lastes asynkront på. I denne opplæringen lærer du hvordan du legger til disse "lazy loading" sosiale delingsknappene til WordPress-bloggen din.

Introduksjon:

Disse ikonene vil bruke et JavaScript-bibliotek laget av David Bushell. . Net magazine publiserte det store spørsmålet: skal vi slippe sosiale medier knapper? med meninger og anekdoter fra ulike fagfolk. Dette inspirerte ham til å svare på dem med en fin, praktisk kodebit.

Sosiale widgets er massiv. De er faktisk flere nettsteder sandkassert i små omrammer, og de fleste er dårlig optimalisert. Facebook's "like" -knapp er appalling. Dette problemet kan ikke understates og jeg utviklet Socialite.js for akkurat den grunnen. Socialite forsvarer lasting og fungerer ekstremt bra. Det reduserer ikke mengden av byte som sendes, men det gjør at nettstedet ditt lastes først før strømmen er mettet med sosiale tillegg.
- David

Noen ord om Socialite

Socialite gir en veldig enkel måte å implementere og aktivere en mengde sosiale deling knapper - når som helst du ønsker. På dokumentbelastning, på artikkel svever, på en hvilken som helst hendelse!

Hvis du selger din sjel, kan du også gjøre det asynkront.
- David

Funksjoner og fordeler

Ingen avhengighet å bruke.
Laster kun eksterne ressurser når det trengs.
Mindre enn 5kb når det blir minifisert og komprimert.
Mer tilgjengelige og stilige standardinnstillinger / fallbacks.
Støtte for Twitter, Google+, Facebook, LinkedIn, Pinterest og Spotify.
Utvidbar med andre sosiale nettverk.
Mimics innfødt implementering når aktivert.
Støttes i alle nettlesere (som gir knappene).

Trinn 1 Laster opp JavaScript

La oss rulle. Første skritt er å laste opp socialite.min.js fil, som jeg anbefaler at du legger inn i bunnteksten. Last ned pakken fra socialitejs.com, åpne den, og last opp socialite.min.js filen til din wp-content / themes / din-tema-mappen / js / mappe (hvis js mappen eksisterer ikke, lager den først).

Trinn 2 Legge til skriptet til bunnteksten

Legg til Socialite

Når du har lastet opp JS-filen til temaets mappe, legger du til følgende kode i temaet ditt functions.php fil.

 funksjon wptuts_load_socialite () // Registrer Socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), "true); // Nå enqueue Socialite wp_enqueue_script ('socialite') ; add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Initialiser Socialite

Opprett nå en ny JS-fil i din wp-content / themes / din-tema-mappen / js / mappe kalt wptuts-social.js og legg inn følgende kode i den.

 jQuery (dokument) .ready (funksjon ($) $ ('sosiale knapper'). En ('musenter', funksjon () Socialite.load ($ (dette) [0]););) ;

Nå har vi en andre JS-fil, vi må endre PHP-koden vi har lagt til functions.php fil, så det skal nå se ut som følgende.

 funksjon wptuts_load_socialite () // Registrer Socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), "true); // Registrere sosial initialiseringsskript wp_register_script ('wptuts- sosialt ', get_template_directory_uri ().' /js/wptuts-social.js ', array (' jquery ',' socialite '), "true"); // Nå enqueue Socialite wp_enqueue_script ('wptuts-social');  add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Hva er denne koden?

I det første trinnet du lastet opp socialite.min.js til temaets mappe, etter at i det andre trinnet inkluderte du dette skriptet i temaets bunntekst. Deretter la du til en liten kode for å utløse den sosiale knappen på mouseenter eiendom for en bestemt klasse, dvs. klassen av våre sosiale knapper er sosial-knapper, når musen kommer inn i den klassen eller du kan si når noen svinger musen over sosial-knapper klassen, vil de sosiale delingsknappene lastes rett i det øyeblikket.

I koden over denne linjen er ansvarlig for å utløse de sosiale knappene, kan du endre sin klasse (dvs.. sosial-knapper) til noen andre du vil.

 $ ('.social-knapper'). En ('mouseenter', funksjon ()

Trinn 3 Legge til CSS

Vi vil diskutere hvor du skal legge til HTML senere, la oss legge til CSS først. Så, vi skal legge til CSS som vil gjemme knappens tekst og vise et bilde i stedet for dem når de ikke er lastet inn. Du er fri til å endre CSS for å passe ditt tema, slik at det vil få deg til å skille seg ut fra andre. David har kodet følgende CSS.

Opprett en ny CSS-fil som heter wptuts-social.css i din wp-content / themes / din-tema-mappen / css / mappe (hvis css mappen eksisterer ikke, lager den først).

Legg deretter til følgende kode i filen.

 / * * Socialite Look-a-like standardinnstillinger * / .social-knapper display: block; listestil: none; polstring: 0; margin: 20px;  .social-knapper> li display: block; margin: 0; polstring: 10px; flyte: venstre;  .social-knapper .socialite display: block; stilling: relativ; bakgrunn: url ('images_22 / add-lazy-loading-sosiale-deling-knapper-til-ditt-wordpress-blog.png "data-original-url =" https://tuts-authors.s3.amazonaws.com/ wp.tutsplus.com/AhmadAwais/2012/08/29/social-sprite.png ') 0 0 no-repeat;  .social-knapper .socialite-loaded bakgrunn: ingen! viktig;  .social-knapper .twitter-share width: 55px; høyde: 65px; bakgrunnsposisjon: 0 0;  .social-knapper .googleplus-one width: 50px; høyde: 65px; bakgrunnsposisjon: -75px 0;  .social-knapper .facebook-like width: 50px; høyde: 65px; bakgrunnsposisjon: -145px 0;  .social-knapper .linkedin-share width: 60px; høyde: 65px; bakgrunnsposisjon: -215px 0;  .vhidden border: 0; klips: rekt (0 0 0 0); høyde: 1px; margin: -1px; overløp: skjult; polstring: 0; posisjon: absolutt; bredde: 1px;

La oss nå gå tilbake og endre PHP-koden vi legger inn i vår functions.php filen igjen for å laste den nye CSS-filen, som følger.

 funksjon wptuts_load_socialite () // Registrer Socialite wp_register_script ('socialite', get_template_directory_uri (). '/js/socialite.min.js', array (), "true); // Registrere sosial initialiseringsskript wp_register_script ('wptuts- sosialt ', get_template_directory_uri ().' /js/wptuts-social.js ', array (' jquery ',' socialite '), "true"); // Nå enqueue Socialite wp_enqueue_script ('wptuts-social'); // Registrer sosiale CSS wp_register_style ('wptuts-social', get_template_directory_uri (). '/Css/wptuts-social.css'); // Nå enqueue sosiale wp_enqueue_style ('wptuts-sosiale');  add_action ('wp_enqueue_scripts', 'wptuts_load_socialite');

Punkt å tenke på

Pass på at du endrer sprite-bildebanen til din egen server. Du kan laste ned bildet under og laste det opp til bloggen din og deretter bytte plassering på linje # 7 i den ovennevnte CSS-koden.

Trinn 4 HTML Markup

La oss se HTML-koden for disse knappene

  "data-url =""data-count =" vertikal "data-via =" twitter-brukernavn-her ">Del på Twitter
 ">Del på Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Del på Facebook
 & Title ="rel =" nofollow "target =" _ blank "data-url =""data-counter =" top ">Del på LinkedIn

Ting å gjøre her:

Endring twitter-brukernavn-her med ditt eget Twitter brukernavn i koden ovenfor.

Hvor å legge til denne koden?

Denne koden kan legges til mange steder med mange metoder. La meg gi deg noen eksempler

Du kan legge til denne koden:

Under posten meta i din single.php
Nedenfor innholdet i din single.php
I din index.php inne i løkken osv.

Trinn 5 Legge til HTML til WordPress

Manuell metode

Gå til din wp-content / themes / din-tema-mappen / mappe, og åpne din single.php fil. Finn så innholdet, og du vil finne noe kode som dette . Legg til HTML-koden som vises nedenfor under eller over den.

Legge til før et innlegg

Gå til din wp-content / themes / din-tema-mappen / mappe, og åpne din functions.php fil. Legg til koden nedenfor på slutten:

 fungere social_before_the_content ($ content) $ custom_content = '  "data-url =""data-count =" vertikal "data-via =" twitter-brukernavn-her ">Del på Twitter
 ">Del på Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Del på Facebook
 & Title ="rel =" nofollow "target =" _ blank "data-url =""data-counter =" top ">Del på LinkedIn
 
 '; $ custom_content. = $ content; returner $ custom_content;  add_filter ('the_content', 'social_before_the_content');

Legge til etter et innlegg

Igjen Gå til din wp-content / themes / din-tema-mappen / mappe, og åpne din functions.php fil. Legg til koden nedenfor på slutten:

 fungere social_after_the_content ($ content) $ custom_content. = $ content; $ custom_content. = '  "data-url =""data-count =" vertikal "data-via =" twitter-brukernavn-her ">Del på Twitter
 ">Del på Google+
 "data-send =" false "data-layout =" box_count "data-width =" 60 "data-show-faces =" false ">Del på Facebook
 & Title ="rel =" nofollow "target =" _ blank "data-url =""data-counter =" top ">Del på LinkedIn
 
 '; returner $ custom_content;  add_filter ('the_content', 'social_after_the_content');

Skjerm

La oss ta en titt på disse latse lasting sosiale delingsknappene:

Før Hover

Slik ser de sosiale ikonene ut når siden først lastes

Etter Hover

Når du svinger over dem, laster knappene sine filene slik at de blir som vist nedenfor

Endelige ord

Tips: Vær kreativ, ikke bare kopier / lim inn koden ovenfor og legg den på bloggen din, prøv å gi den et nytt utseende. La kreative juicer flyte!

Noen eksempler

Techcrunch
Mashable

Hvordan bruker jeg dem?

Du kan se bildet nedenfor fra bloggen min, hvordan jeg bruker dem. (Inspirert av Mashable) (Live View)

Kode