Domača » WordPress » WordPress Optimizacija hitrosti z ikonami za skupno rabo po meri
WordPress Optimizacija hitrosti z ikonami za skupno rabo po meri
Morda se zdi, da je lahka naloga, vendar lahko dodajanje dobro delujočih gumbov za skupno rabo v spletno mesto WordPress predstavlja težave. Ko pravim, da se dobro obnašam, mislim na preproste, lahke, prijazne vire, hitro - najbolj vtičniki za skupno rabo v družbi niso takšni. Navadno jedo vire, kot so nori, in zakaj bi kdorkoli želel povečati čas nalaganja vtičnika za 25-35% samo za prikaz nekaterih ikon na njihovem spletnem mestu?
Dobra novica je, da za izpolnitev te naloge ni nujno, da potrebujete vtičnik. V tej vadnici vam bom pokazal, kako lahko zlahka dodajte gumbe za skupno rabo po meri do konca objav na vaši strani WordPress samo nekaj vrstic kode.
1. korak: Ustvarite gumbe za družabno skupno rabo
Za ustvarjanje ikon za skupno rabo bomo uporabili Generator gumbov za preprosto skupno rabo, priročno in preprosto spletno orodje. Glavna prednost te aplikacije je, da gumbi, ki jih generira, tečejo na frontend ne bodo obremenili strežnika lahko pa tudi ohranite zasebnost svojih uporabnikov.
Če želite ustvariti gumbe po meri, pojdite tukaj in pritisnite Začeti. Izberite 1 od 6 različnih stilov gumbov. Kliknite Naslednji in označite socialna omrežja želite dodati na svoje spletno mesto. Ko končate, boste morali izpolniti informacije o vaši spletni strani.
Na tem zaslonu (spodaj) boste našli dve možnosti: »Brez JavaScripta« in »JavaScript«. Označite JavaScript, ker bo brskalnik omogočil dinamično zaznavanje URL-ja, zato bodo lahko vaši obiskovalci delili vsako objavo posebej in ne samo URL domače strani.
Nazadnje si oglejte predogled v živo, prenesite izbrani niz ikon in zgrabite kodo, ki ste jo ustvarili.
2. korak: Ustvarite otrokovo temo
Zdaj boste morali ustvariti ikone in kodo na svoje spletno mesto. Najprej boste morali ustvariti podrejeno temo.
S pomočjo našega vodnika lahko preprosto ustvarite otroško temo WP ali pa sledite korakom tega članka WP Codexa. Če ga že imate, lahko skočite na 3. korak.
Otroška tema se nanaša na temo, ki jo trenutno uporabljate - na podoben način, kot se otrok nanaša na starše. To podeduje vse (slog in funkcionalnost) od nadrejene teme ampak lahko dodajte dodatne funkcije nanj.
V našem primeru bodo dodatne funkcije na voljo po meri.
3. korak: Ustvarite funkcijo po meri, ki prikaže ikone
Dodali bomo funkcijo po meri v datoteko functions.php otrokove teme.
S pomočjo te funkcije boste lahko dodali družabne ikone, kjer koli želite, na vašo spletno stran s kavljem po meri. Če vaša podrejena tema še nima datoteke functions.php, ustvarite prazno besedilno datoteko v korenski mapi vašega otroka s funkcijami imena in spremenite njeno razširitev na .php.
V to prazno datoteko vstavite naslednjo vrstico kode:
Ko boš functions.php Datoteka je nastavljena tako, da ji dodate naslednji odrezek kode:
/ * * Doda ikone za skupno rabo po meri * / function add_social_sharing () ?>
Delite to objavo
Končno izbrišite vrstico komentarja HTML iz odrezka kode zgoraj in nadomestite ga s kodo HTML ste ustvarili v 1. koraku z generatorjem gumbov za družabno skupno rabo.
4. korak: Kopirajte ustrezno datoteko s predlogami v mapo Child Theme
Po privzetku posamezne objave vodijo datoteke z predlogo, ki se imenuje single.php. Včasih - predvsem v sodobnejših temah - struktura single.php je bolj zapletena, saj nalaga tudi dodatne datoteke predlog. V tem koraku moramo poiskati ustrezno datoteko predloge, kjer lahko kasneje dodate ikone.
Da bi našli pravo mesto za družbene gumbe, moramo najti datoteko s predlogo, ki vsebuje funkcijo, ki nalaga vsebino posameznih objav.
Odprimo urejevalnik teme v nadzorni plošči za WordPress pod Videz> Urejevalnik. V zgornjem desnem kotu najdete spustni seznam, kjer lahko izberete nadrejeno temo. Pod spustnim menijem lahko vidite vse predloge, ki jih vsebuje nadrejena tema. Pomaknite se navzdol, dokler ne najdete Predloga za eno objavo (imenovan single.php) in ga odprite.
Če nadrejena tema uporablja get_template_part () Funkcija WP v single.php To pomeni, da uporablja dodatno predlogo za nalaganje vsebine posamezne objave.
Najprej morate ugotoviti, katera je to. Ime datoteke dodatne predloge je prvi parameter get_template_part () funkcijo.
Prvi parameter je "vsebina" kar pomeni, da iščemo datoteko s predlogo content.php. To datoteko morate prekopirati iz nadrejene korenske mape teme v korensko mapo podrejene teme, da jo spremenite.
5. korak: Dodajte priklop akcij v desno datoteko s predlogami
Ustvarili smo funkcijo, imenovano add_social_sharing () v 3. koraku, in smo ga priključili na kljukico po meri custom_social_share. Sedaj bomo morali dodati ta kavelj na mesto, kjer želimo, da se funkcija izvede.
Tukaj je odrezek kode, ki ga boste morali vstaviti na pravo mesto:
Nato poiščimo pravo mesto.
Odprite datoteko predloge, ki ste jo dodali v podrejeno temo v 4. koraku, v urejevalniku kode ali v urejevalniku teme v nadzorni plošči za WordPress in poiščite vsebina() funkcijo.
Preverite, ali obstaja wp_link_pages () funkcijo takoj po vsebina() funkcijo. Če obstaja, potem zgornji odrezek kode sledi; drugače sledi vsebina() funkcijo.
6. korak: Dodajte CSS kodo otrokovi temi
Odprite style.css datoteko podrejene teme v urejevalniku kode ali v urejevalniku teme v nadzorni plošči za WordPress, kopirajte kodo CSS, ki ste jo ustvarili v 1. koraku, jo prilepite na konec datoteke in jo shranite..
Dodali bomo dve dodatni vrstici v datoteko CSS, da bi ikone družabnih delitev pravilno prikazali v vsaki temi. Kopirajte in prilepite naslednji odrezek kode na konec style.css mapa:
ul.share-gumbi li a border: 0; ul.share-gumbi li img display: inline;
7. korak: Prenesite ikono za družabne medije na strežnik
Prenesite izbrani niz ikon za družabne medije, ki ste ga prenesli v 1. koraku, v mapo za otroke. Povežite strežnik prek FTP-ja, ustvarite novo imenovano mapo slik znotraj korena mape za otroke (/ wp-content / themes / your-child-theme / images) in tukaj naložite ikono.
Imenujemo mapo slik ker je to privzeto ime mape s slikami, ki jo uporablja Generator gumbov za preprosto skupno rabo.
8. korak: Preverite pot do datotek z ikonami
Ko v 7. koraku prenesete ikone družabnih omrežij v strežnik, je pomembno, da preverite pot datotek z ikonami, da se prepričate, ali bodo naložene..
Pot slikovne datoteke brskalniku daje namig o njeni lokaciji na strežniku. Preverimo slike poti znotraj functions.php datoteka otrokove teme. Odprite datoteko v urejevalniku kode in se pomaknite do add_social_sharing () funkcijo, kjer morate preveriti kodo HTML, ki ste jo ustvarili z generatorjem gumbov za preprosto skupno rabo.
V HTML kodi boste našli z oznako src atribut za vsako ikono. Preverite, če je vsak src atributi kažejo na točno lokacijo, kamor je bil prenesen vaš ikona v 7. koraku.
Generator gumbov za preprosto skupno rabo doda relativne poti k datotek. Včasih brskalniki ne morejo prikazati slik, če uporabljate relativno pot, zato je dobra ideja namesto tega uporabite absolutne poti. Na ta način lahko vsak brskalnik, ki ga potencialno uporabljajo vaši obiskovalci, ni prepričan o lokaciji potrebnih datotek z ikonami.
Relativna pot slike, ki jo dodaja generator, izgleda približno tako:
Spremenimo src atribut vsake ikone na absolutno pot, kar pomeni, da bo vsebovala celoten URL datoteke.
Zgornja pot URL-ja bo videti tako:
9. korak: Prenesite spremenjene datoteke in aktivirajte temo za otroke
Povežite strežnik prek FTP in naložite vse datoteke, ki smo jih ustvarili v tej vadnici, ki jih še niste prenesli: functions.php, style.css, in ustrezno datoteko predloge (v tej vadnici bodisi. \ t single.php ali content.php).
Na koncu aktivirajte podrejeno temo v nadzorni plošči WP admin pod Videz> Teme meni.
Zdaj ste pripravljeni s svojimi izjemno lahkimi ikonami za skupno rabo, ki varčujejo z viri. Lahko greste na spletu in ga preverite v živo na vašem spletnem mestu.
Zaključek
V tem vodiču sem vam pokazal, kako dodati gumbe za skupno rabo po meri do konca posameznih objav. Ikone za skupno rabo lahko dodate na vse druge lokacije na svojem spletnem mestu s pomočjo akcijskega kljuka, ki smo ga ustvarili.
Samo dodajte kodo, ki smo jo uporabili v 5. koraku, na mesto, kjer želite prikazati gumbe:
Prav tako boste morali najti pravo predlogo datoteko, če želite, da se ikone nekje drugje. Posamezne strani vodijo datoteke z predlogo, ki se imenuje page.php, medijske datoteke, kot so slike, naložijo attachment.php.
Če želite prikazati gumbe za skupno rabo na drugem mestu na vašem spletnem mestu, ga lahko poiščete s hierarhijo predlog za WordPress..
