WordPressi kiiruse optimeerimine kohandatud sotsiaalse jagamise ikoonidega

See võib tunduda olevat kerge ülesanne, kuid WordPressi saidile sobiva sotsiaalse jagamise nuppude lisamine võib olla probleem. Kui ma ütlen head käitumist, siis mõtlen lihtsatele, kergetele, ressursisõbralikele ja kiiremini ühiskondlikele jagamise pluginatele. Nad kipuvad sööma ressursse nagu hull ja Miks tahaks keegi lisada plugina laadimise aega 25-35%, et kuvada mõned ikoonid oma saidil?

Hea uudis on see, et selle ülesande täitmiseks ei pea te tingimata olema plugin. Selles juhendis näitan teile, kuidas saate kergesti lisage kohandatud sotsiaalse jagamise nupud WordPress saidi postituste lõpuni vaid paar rida koodi.

1. etapp: genereerige sotsiaalse jagamise nupud

Me kasutame lihtsate jagamisnuppude generaatorit, mis on mugav ja kergesti kasutatav veebitööriist, et luua jagamise ikoone. Selle rakenduse peamiseks eeliseks on see, et nupud, mida see genereerivad, töötavad esipaneelil nad ei koorma teie serverit ja saate ka oma kasutajate tegevuse privaatselt hoida.

Kohandatud nuppude genereerimiseks minge siia ja vajutage Alusta. Valige 6 erinevatest nuppude stiilidest. Klõpsake nuppu järgmine ja märgista sotsiaalsed võrgustikud soovite oma saidile lisada. Kui olete lõpetanud, peate täitma oma veebisaidi info.

Sellel ekraanil (allpool) leiate kaks valikut: „JavaScript puudub” ja 'JavaScript'. Märgistage JavaScript, kuna see võimaldab brauseril URL-i dünaamiliselt tuvastada, saavad teie külastajad jagada iga postitust eraldi mitte ainult kodulehe URL-i.

Lõpuks vaadake live eelvaadet, laadige alla valitud ikoonikomplekt ja võtke loodud kood.

2. etapp: looge lapsteema

Nüüd peate lisama genereeritud ikoonid ja koodi saidile. Kõigepealt peate looma lapse teema.

WP lapse teema saab hõlpsasti luua meie juhendaja abil või järgida käesoleva WP Codexi artikli samme. Kui teil juba on, võite 3. sammu juurde minna.

Lapse teema on seotud praegu kasutatava teemaga - mõnevõrra sarnasel viisil nagu laps on seotud tema vanematega. See pärineb kõik (stiil ja funktsionaalsus) vanema teemast aga saate lisage täiendavaid funktsioone sellele.

Meie puhul on lisafunktsioonid kohandatud sotsiaalse jagamise nupud.

3. samm: looge kohandatud funktsioon, mis kuvab ikoone

Lisame lapse teema funktsioonidele.php kohandatud funktsiooni.

Selle funktsiooni abil saate oma saidil lisada kohandatud toimingukonksu abil sotsiaalseid ikoone, kus iganes soovite. Kui teie lapse teema ei ole veel funktsioone.php faili, looge oma lapse teema juurkataloogis nimifunktsioonidega tühi tekstifail ja muutke selle laiendiks .php.

Sisestage sellesse tühja faili järgmine koodirida:

 
Kui teie funktsioonid.php fail on loodud, lisage sellele järgmine koodilõik:
 
 / * * Lisab kohandatud sotsiaalse jagamise ikoonid * / funktsioon add_social_sharing () ?> 
Jaga seda postitust
   
Lõpuks kustutage HTML-kommentaari rida ülaltoodud koodilõigust ja asenda see HTML-koodiga et sa tegid sammu 1 sotsiaalse jagamise nuppude generaatoriga.
 
4. etapp: kopeerige sobiv teemafail lapse teemakausta
 
Vaikimisi juhib üksikut postitust nimega mallifail single.php. Mõnikord - eriti kaasaegsematel teemadel - single.php on keerulisem, kuna see laadib ka täiendavaid mallifaile. Selles etapis peame leidma sobiva mallifaili, kus saab ikoonid hiljem lisada.
 
Sotsiaalsete nuppude jaoks õige koha leidmiseks peame leidma malli faili sisaldab funktsiooni, mis laadib üksikute postituste sisu.
 
Avage teema redaktor WordPress admin juhtpaneelil all Välimus> Toimetaja. Parempoolses ülanurgas leiate rippmenüü, kus saab valida oma vanemateema. Rippmenüü all näete kõiki mallifaile, mida teie vanemate teema sisaldab. Kerige alla, kuni leiate Ühe postituse mall (nimega single.php) ja avage see.
 
Kui vanemateema kasutab get_template_part () WP funktsioon on single.php fail, mis tähendab, et ta kasutab täiendava malli faili ühe postituse sisu laadimiseks.
 
Kõigepealt tuleb teada, milline neist on. Täiendava malli faili nimi on get_template_part () funktsiooni.
 
Sisse Kakskümmend viisteist see näeb välja selline:
 
get_template_part ('sisu', get_post_format ());
 
Esimene parameeter on 'sisu' mis tähendab, et me otsime nimega malli content.php. Selle muutmiseks peate selle faili vanema teema juurkataloogist kopeerima lapse teema juurkataloogi.
 
 
5. samm: lisage Action Hook paremale mallifailile
 
Me lõime funktsiooni nimega add_social_sharing () 3. etapis, ja me lisasime selle kohandatud toimingukonksule custom_social_share. Nüüd peame lisama selle konksu kohale, kus me tahame, et funktsioon täidetaks.
 
Siin on koodilõik, mida peate õigesse kohta sisestama:
 
 
Järgmisena leiame õige koha.
 
Avage koodi 4. redaktoris oma lapse teemale lisatud mallifail koodiredaktoris või WordPressi administraatori juhtpaneeli teema redaktori sees ja otsige sisu() funktsiooni.
 
Kontrollige, kas on wp_link_pages () funktsioon kohe pärast sisu() funktsiooni. Kui on, siis saab ülalpool toodud koodilõigu; vastasel juhul järgib see sisu() funktsiooni.
 
 
6. samm: lisage CSS-kood lapsele
 
Ava style.css oma lapse teema faili kas oma koodiredaktoris või WordPressi administraatori juhtpaneeli teema redaktoris, kopeerige 1. sammus loodud CSS-kood, kleepige see faili lõppu ja salvestage see.
 
 
Lisame CSS-failile kaks lisarida, et muuta sotsiaalse jagamise ikoonid õigesti igas teemas. Kopeerige ja kleepige järgmine koodilõik style.css fail:
 
 ul.share-nupud li a border: 0;  ul.share-nupud li img kuva: inline;  
 
7. samm: laadige üles sotsiaalmeedia ikoon
 
Laadige üles valitud sotsiaalmeedia ikoonikomplekt, mille olete alla laadinud 1. etapis oma lapse teema kausta. Ühendage server FTP kaudu, looge uus kaust pilte oma lapse teema kausta (/ wp-content / themes / your-child-theme / images) juurest ja laadige siia ikoon.
 
Me nimetame selle kausta pilte kuna see on lihtsa jagamisnupu generaatori kasutatava pildikausta vaikenimi.
 
8. samm: kontrollige ikoonifailide teed
 
Kui olete 7. sammus oma sotsiaalmeedia ikoonid oma serverisse üles laadinud, on oluline kontrollida ikoonifailide teed, et veenduda, et need laaditakse.
 
Pildifaili tee annab brauserile vihje selle asukoha kohta serveris. Vaatame pildi teed sees funktsioonid.php lapse teema fail. Avage fail oma koodiredaktoris ja navigeerige rakendusse add_social_sharing () funktsiooni, kus peate kontrollima lihtsa jagamisnupu generaatoriga loodud HTML-koodi.
 
HTML-koodi leiate  sildiga src iga ikooni atribuut. Kontrollige, kas kõik on src atribuudid osutavad täpsele asukohale, kus teie ikoonikomplekt laaditi üles 7. etapis.
 
Lihtne jagamisnuppude generaator lisab  faile. Mõnikord brauserid ei saa kujutisi suhtelise tee kasutamisel muuta, nii et see on hea mõte kasutage absoluutseid teid. Nii saab iga külastajate poolt potentsiaalselt kasutatav brauser olla kindel vajalike ikoonifailide asukoha kohta.
 
Generaatori lisatud suhteline kujutise tee näeb välja selline:
 
 
Muutkem src iga ikooni atribuut absoluutsele teele, mis tähendab, et see sisaldab faili täielikku URL-i.
 
Ülaltoodud URL-i tee näeb välja selline:
 
 
9. samm: laadige üles muudetud failid ja aktiveerige laste teema
 
Ühendage oma server FTP kaudu ja laadige üles kõik selles juhendis loodud failid, mida te pole veel üles laadinud funktsioonid.php, the style.css, ja sobiv mallifail (selles juhendis kas single.php või content.php).
 
Lõpuks aktiveerige lapse teema WP administreerimispaneeli all Välimus> Teemad menüüst.
 
Nüüd olete valmis oma super-kerge, ressursisäästliku ja kohandatud sotsiaalse jagamise ikoonidega. Võite veebisaidil minna ja oma saidil elada.
 
 
Järeldus
 
Selles juhendis näitasin teile, kuidas lisada kohandatud sotsiaalse jagamise nupud ühe postituse lõppu. Jagamise ikoonid saate lisada oma veebisaidi muudesse asukohtadesse loodud kampaania abil.
 
Lisage lihtsalt kood, mida kasutasime sammus 5, kohale, kus soovite nuppe kuvada:
 
 
Kui soovite ikoonid mujale paigutada, peate leidma ka õige malli faili. Üksikuid lehti juhib malli fail page.php, samas laaditakse meedia manuseid, näiteks pilte attachment.php.
 
Kui soovite sotsiaalse jagamise nuppe oma veebisaidi erinevas kohas kuvada, saate selle leidmiseks kasutada WordPressi malli hierarhiat.
 
Allalaadimise allikas