WordPress Optimizacija brzine s prilagođenim društvenim ikonama

Može se činiti da je jednostavan zadatak, ali dodavanje dobro promjenjivih gumba društvenog dijeljenja na web-lokaciju WordPress može biti gnjavaža. Kada kažem da se dobro ponašam, mislim na jednostavnu, laganu, brzu i jednostavnu podršku za dijeljenje društvenih sadržaja koja nije takva. Oni imaju tendenciju jesti resurse kao što su ludi, i zašto bi bilo tko želio povećati vrijeme učitavanja dodatka za 25-35% samo za prikaz nekih ikona na njihovim stranicama?

Dobra vijest je da vam nije nužno potreban dodatak za ispunjavanje ovog zadatka. U ovom vodiču pokazat ću vam kako možete lako dodajte prilagođene gumbe za društveno dijeljenje do kraja postova na vašoj WordPress stranici samo nekoliko redaka koda.

Korak 1: Generirajte gumbe za društveno dijeljenje

Koristit ćemo Generator tipki Jednostavno dijeljenje, praktičan i jednostavan za korištenje web alat za generiranje ikona dijeljenja. Glavna prednost ove aplikacije je u tome što se tipke koje generira pokreću na sučelju neće opteretiti vaš poslužitelj i također možete zadržati privatnost svojih korisnika.

Da biste izradili prilagođene gumbe, idite ovdje i pritisnite Početi. Odaberite 1 od 6 različitih stilova gumba. Klik Sljedeći i označite društvene mreže koju želite dodati na svoju web-lokaciju. Kada završite, morat ćete popuniti podatke svoje web-lokacije.

Na ovom zaslonu (u nastavku) naći ćete dvije opcije: "Nema JavaScripta" i 'JavaScript'. krpelj JavaScript, jer će omogućiti pregledniku da dinamički detektira URL pa će vaši posjetitelji moći podijeliti svaki post pojedinačno, a ne samo URL početne stranice.

Napokon pogledajte prikaz uživo, preuzmite odabrani skup ikona i uhvatite generirani kod.

Korak 2: Stvaranje teme djeteta

Sada ćete morati dodati generirane ikone i kôd svojoj web-lokaciji. Prije svega morat ćete stvoriti podređenu temu.

Možete jednostavno stvoriti WP temu za dijete uz pomoć našeg vodiča, ili možete slijediti korake ovog članka WP Codexa. Ako ga već imate, možete skočiti na 3. korak.

Djetetova se tema odnosi na temu koju trenutno koristite - na sličan način kao što se dijete odnosi na roditelje. To nasljeđuje sve (stil i funkcionalnost) od nadređene teme ali možeš dodajte dodatnu funkcionalnost na to.

U našem slučaju dodatna funkcionalnost bit će prilagođeni gumbi za društveno dijeljenje.

Korak 3: Stvorite prilagođenu funkciju koja prikazuje ikone

Dodat ćemo prilagođenu funkciju datoteci funkcije.php podređene teme.

Pomoću ove funkcije moći ćete dodati društvene ikone gdje god želite na svojoj web-lokaciji pomoću kukice za prilagođenu radnju. Ako vaša podređena tema još nema datoteku functions.php, izradite praznu tekstualnu datoteku u korijenskoj mapi djetetove teme s funkcijama naziva i promijenite njeno proširenje na .php.

Umetnite sljedeći redak koda u ovu praznu datoteku:

 
Kada functions.php Datoteka je postavljena dodajte joj sljedeći isječak koda:
 
 / * * Dodaje prilagođene ikone društvenog dijeljenja * / function add_social_sharing () ?> 
Dijeli ovaj post
   
Konačno izbrišite redak HTML komentara iz isječka koda iznad i zamijenite ga s HTML kôdom ste generirali u 1. koraku pomoću generatora gumba društvenog dijeljenja.
 
Korak 4: Kopirajte odgovarajuću datoteku predloška u mapu Dječja tema
 
Po zadanim se postavkama pojedini postovi upravljaju datotekom predloška single.php. Ponekad - osobito u modernijim temama - strukturu single.php složeniji je jer u njega učitava i dodatne predloške. U ovom koraku trebamo pronaći odgovarajuću datoteku predloška gdje možemo kasnije dodati ikone.
 
Da biste pronašli pravo mjesto za društvene gumbe, trebamo pronaći datoteku predloška koja sadrži funkciju koja učitava sadržaj pojedinačnih postova.
 
Otvorimo temu urednika u WordPress admin dashboard pod Izgled> Uređivač. U gornjem desnom kutu pronaći ćete padajući popis u kojem možete odabrati roditeljsku temu. Ispod padajućeg izbornika možete vidjeti sve datoteke predložaka koje sadrži roditeljska tema. Pomaknite se prema dolje dok ne pronađete Predložak pojedinačne pošte (zove se single.php) i otvorite ga.
 
Ako nadređena tema koristi get_template_part () WP funkcija u single.php datoteka koja znači da koristi dodatnu datoteku predloška za učitavanje sadržaja pojedinačnog posta.
 
Prvo morate saznati koji je ovo. Naziv dodatne datoteke predloška prvi je parametar get_template_part () funkcija.
 
U Dvadeset petnaest izgleda ovako:
 
get_template_part ('sadržaj', get_post_format ());
 
Prvi parametar je 'sadržaj' što znači da tražimo datoteku predložaka content.php. Trebate kopirati tu datoteku iz nadređene tematske korijenske mape u korijensku mapu podređene teme kako biste je izmijenili.
 
 
Korak 5: Dodajte akcijsku kuku u desnu datoteku predloška
 
Stvorili smo funkciju koja se zove add_social_sharing () u koraku 3, a mi smo ga priključili na prilagođenu kuku za akciju custom_social_share. Sada ćemo morati dodati ovu kuku na mjesto gdje želimo izvršiti funkciju.
 
Ovo je isječak koda koji ćete morati umetnuti na pravo mjesto:
 
 
Zatim, pronađimo pravo mjesto.
 
Otvorite datoteku predloška koju ste dodali u temu za dijete u 4. koraku u uređivaču koda ili unutar uređivača tema u WordPressovoj nadzornoj ploči administratora i potražite sadržaj() funkcija.
 
Provjerite postoji li wp_link_pages () funkcija odmah nakon sadržaj() funkcija. Ako postoji, nakon toga slijedi isječak koda; inače slijedi sadržaj() funkcija.
 
 
Korak 6: Dodajte CSS kod djetetovoj temi
 
Otvori style.css datoteka vašeg djeteta u uređivaču koda ili u uređivaču tema nadzorne ploče administratora programa WordPress, kopirajte CSS kôd koji ste generirali u 1. koraku, zalijepite ga na kraj datoteke i spremite.
 
 
Dodat ćemo dvije dodatne linije u CSS datoteku da bi se ikone društvenog dijeljenja pravilno prikazale u svakoj temi. Kopirajte i zalijepite sljedeći isječak koda na kraj style.css datoteka:
 
 ul.share-gumbi li a border: 0;  ul.share-gumbi li img display: inline;  
 
Korak 7: Prijenos skupa ikona društvenih medija na poslužitelj
 
Prenesite odabrani skup ikona društvenih medija koji ste preuzeli u 1. koraku u mapu podređene teme. Povežite svoj poslužitelj putem FTP-a, stvorite novu mapu pod nazivom slika unutar korijena mape teme djeteta (/ wp-content / themes / your-child-theme / images) i postavite ovdje postavljenu ikonu.
 
Imenujemo mapu slika jer je to zadani naziv mape slika koju Generator tipki za jednostavno dijeljenje koristi.
 
Korak 8: Provjerite putanju datoteka ikona
 
Nakon što ste učitali ikone društvenih medija na svoj poslužitelj u 7. koraku, važno je provjeriti put datoteka ikona kako biste bili sigurni da će biti učitani.
 
Putanja slikovne datoteke pregledniku daje savjet o njegovoj lokaciji na poslužitelju. Provjerimo putanje slike unutar functions.php datoteka djeteta. Otvorite datoteku u uređivaču koda i idite na add_social_sharing () gdje trebate provjeriti HTML kod koji ste generirali pomoću Generatora tipki za jednostavno dijeljenje.
 
U HTML kodu pronaći ćete  s oznakom src atribut za svaku ikonu. Provjerite je li svaki src atributi ukazuju na točnu lokaciju na kojoj je vaš skup ikona prenesen u 7. koraku.
 
Generator tipki Jednostavno dijeljenje dodaje relativne putove u  datoteka. Ponekad preglednici ne mogu prikazati slike ako koristite relativni put, tako da je dobra ideja umjesto toga koristite apsolutne putanje. Na taj način svaki preglednik koji potencijalno koriste vaši posjetitelji može biti siguran o lokaciji potrebnih datoteka ikona.
 
Relativna staza slike koju dodaje generator izgleda ovako:
 
 
Promijenimo src atribut svake ikone na apsolutnu putanju, što znači da će sadržavati puni URL datoteke.
 
Gore navedena putanja URL-a izgledat će ovako:
 
 
Korak 9: Prenesite izmijenjene datoteke i aktivirajte temu djeteta
 
Povežite svoj poslužitelj putem FTP-a i prenesite sve datoteke koje smo stvorili u ovom vodiču koji još niste učitali: functions.php,  style.css, i odgovarajuću datoteku predloška (u ovom vodiču ili single.php ili content.php).
 
Konačno aktivirajte temu djeteta u nadzornoj ploči WP administratora pod Izgled> Teme izbornik.
 
Sada ste spremni sa svojim izuzetno laganim, prilagođenim resursima, prilagođenim ikonama za dijeljenje društvenih sadržaja. Možete otići online i provjeriti ga uživo na svojoj web-lokaciji.
 
 
Zaključak
 
U ovom tutorialu pokazao sam vam kako dodati prilagođene gumbe za dijeljenje na kraju pojedinačnih postova. Ikone za dijeljenje možete dodati na bilo koje drugo mjesto na web-lokaciji uz pomoć kukice za radnju koju smo stvorili.
 
Samo dodajte kôd koji smo koristili u 5. koraku na mjesto na kojem želite prikazati gumbe:
 
 
Također ćete morati pronaći pravu datoteku predloška ako želite postaviti ikone negdje drugdje. Jednim stranicama upravlja predložena datoteka predloška page.php, dok se medijski prilozi poput slika učitavaju attachment.php.
 
Ako želite prikazati gumbe društvenog dijeljenja na nekom drugom mjestu na web-lokaciji, možete ga koristiti u hijerarhiji predložaka za WordPress..
 
Preuzimanje izvora