WordPressin nopeuden optimointi mukautettujen yhteiskäytön kuvakkeiden avulla
Se voi tuntua olevan helppo tehtävä, mutta lisäämällä hyvin käyttäytyviä sosiaalisia jakamispainikkeita WordPress-sivustoon voi olla vaivaa. Kun sanon hyvin käyttäytyvän, tarkoitan yksinkertaisia, kevyitä, resurssitehokkaita ja nopeasti yhteiskäytössä olevia laajennuksia, jotka eivät ole sellaisia. He pyrkivät syömään resursseja, kuten hulluja, ja miksi kukaan haluaisi lisätä laajennuksen latausaikaa 25-35% vain joidenkin kuvakkeiden näyttämiseksi sivustollaan?
Hyvä uutinen on, että et välttämättä tarvitse pluginia tämän tehtävän suorittamiseksi. Tässä oppaassa näytän sinulle, miten voit helposti lisää mukautettuja yhteiskäytön painikkeita WordPress-sivustosi viestien loppuun vain muutama rivi koodia.
Vaihe 1: Luo sosiaaliset jakamispainikkeet
Käytämme Simple Sharing Buttons Generator -ohjelmaa, joka on kätevä ja helppokäyttöinen web-työkalu, joka luo jakamiskuvakkeet. Tämän sovelluksen tärkein etu on, että painikkeet, joita se luo, kulkevat etupaneelissa he eivät taakkaa palvelinta ja voit myös pitää käyttäjien yksityisyyden.
Voit luoda mukautettuja painikkeita siirtymällä tänne ja painamalla Alkaa. Valitse yksi 6 eri painikkeesta. Klikkaus Seuraava ja valitse sosiaaliset verkostot haluat lisätä sivustoosi. Kun olet valmis, sinun on täytettävä sivustosi tiedot.
Tässä näytössä (alla) on kaksi vaihtoehtoa: "Ei JavaScript" ja "JavaScript. Rasti JavaScript, koska se mahdollistaa selaimen havaitsemaan URL-osoitteen dynaamisesti, joten kävijät voivat jakaa jokaisen viestin erikseen eikä vain kotisivun URL-osoitteen.
Lopuksi tutustu live-esikatseluun, lataa valittu kuvakokonaisuus ja tartu luomasi koodiin.
Vaihe 2: Luo lapsiteema
Nyt sinun on lisättävä luodut kuvakkeet ja koodi sivustoosi. Ensinnäkin sinun täytyy luoda lapsi-teema.
Voit helposti luoda WP-lapsen teeman opetusohjelman avulla, tai voit seurata tämän WP Codex -artikkelin ohjeita. Jos sinulla on jo sellainen, voit siirtyä vaiheeseen 3.
Lapsi-teema liittyy nykyiseen käyttämääsi teemaan - jonkin verran samalla tavalla kuin lapsi liittyy vanhempiinsa. Se perii kaiken (tyyli ja toiminnallisuus) vanhemman aiheesta mutta sinä voit lisää lisätoimintoja siihen.
Meidän tapauksessamme lisätoiminnot ovat mukautettuja yhteiskäytön painikkeita.
Vaihe 3: Luo mukautettu toiminto, joka näyttää kuvakkeet
Lisäämme mukautetun toiminnon lasten teeman funktioihin .php.
Tämän toiminnon avulla voit lisätä sosiaalisia kuvakkeita sivustoosi haluamallasi tavalla käyttämällä mukautettua toimintakonetta. Jos lapsesi teemalla ei ole vielä funktioita.php-tiedostoa, luo tyhjä tekstitiedosto lapsesi teeman juurikansioon nimitoiminnoilla ja muuta sen laajennusta .php.
Lisää seuraava tyhjän tiedoston koodi seuraavasti:
Kun sinun functions.php tiedosto on asetettu lisäämällä siihen seuraava koodinpätkä:
vihdoin poista HTML-kommentin rivi yllä olevasta koodinpätkästä korvaa se HTML-koodilla olet tuottanut vaiheessa 1 Social Sharing Buttons Generator.
Vaihe 4: Kopioi sopiva mallitiedosto lapsen teemakansioon
Oletuksena yksittäiset viestit hallitaan mallitiedostolla, jota kutsutaan single.php. Joskus - varsinkin nykyaikaisemmissa teemoissa - rakennetta single.php on monimutkaisempi, koska se lataa myös muita mallitiedostoja. Tässä vaiheessa meidän on löydettävä sopiva mallitiedosto, johon voimme lisätä kuvakkeet myöhemmin.
Jos haluat löytää oikean paikan sosiaalisille painikkeille, meidän on löydettävä mallitiedosto sisältää toiminnon, joka lataa yksittäisten viestien sisällön.
Avataan teemaeditori WordPress-järjestelmän hallintapaneelissa alla Ulkonäkö> Editor. Oikeassa yläkulmassa on pudotusvalikko, jossa voit valita vanhemman teeman. Pudotusvalikossa näet kaikki vanhemman teeman sisältämät mallitiedostot. Selaa alaspäin, kunnes löydät Yhden postin malli (nimeltään single.php) ja avaa se.
Jos vanhempi teema käyttää get_template_part () WP toimii single.php tiedosto, joka tarkoittaa, että se käyttää ylimääräistä mallitiedostoa yksittäisen viestin sisällön lataamiseen.
Ensin on selvitettävä, mikä on tämä. Lisäkuviotiedoston nimi on get_template_part () toimia.
Ensimmäinen parametri on 'Sisältö' mikä tarkoittaa, että etsimme kutsutun mallitiedoston content.php. Sinun täytyy kopioida tämä tiedosto vanhemman teeman juurikansiosta lapsi-teeman juurikansioon, jotta sitä voidaan muokata.
Vaihe 5: Lisää Action-koukku oikeaan mallitiedostoon
Olemme luoneet funktion nimeltä add_social_sharing () vaiheessa 3, ja kiinnitimme sen mukautettuun toimintakonsoliin, jota kutsuttiin custom_social_share. Nyt meidän on lisättävä tämä koukku paikkaan, jossa haluamme, että toiminto suoritetaan.
Tässä on koodinpätkä, joka sinun täytyy lisätä oikeaan paikkaan:
Seuraavaksi löydetään oikea paikka.
Avaa lapsi-teemaan lisäämäsi mallitiedosto vaiheessa 4 koodieditorissa tai WordPress-järjestelmänvalvojan hallintapaneelin teemaeditorissa ja etsi sisältö() toimia.
Tarkista, onko a wp_link_pages () toiminto heti sisältö() toimia. Jos on, edellä oleva koodinpätkä tulee sen jälkeen; muuten se seuraa sisältö() toimia.
Vaihe 6: Lisää CSS-koodi lapsille
Avaa style.css kopioi vaiheessa 1 luomasi CSS-koodi, liitä se tiedoston loppuun ja tallenna se lapsesi teeman tiedostoksi joko koodieditorissa tai WordPress-järjestelmän hallintapaneelin teemaeditorissa..
Lisäämme CSS-tiedostoon kaksi ylimääräistä riviä, jotta sosiaalisen jakamisen kuvakkeet näkyvät oikein jokaisessa teoksessa. Kopioi ja liitä seuraava koodinpätkä style.css file:
ul.share-painikkeet li a border: 0; ul.share-painikkeet li img näyttö: inline;
Vaihe 7: Lataa sosiaalisen median kuvake Set palvelimeen
Lataa valitsemasi sosiaalisen median kuvakkeet, jotka olet ladannut vaiheessa 1 lapsesi teeman kansioon. Liitä palvelimesi FTP: n kautta, luo uusi kansio kuvien lapsi-teemakansion (/ wp-content / themes / your-child-teema / kuvat) juuren sisällä ja lataa täällä oleva kuvake.
Me nimeämme kansion kuvien koska tämä on Simple Sharing Buttons Generatorin käyttämän kuvakansion oletusnimi.
Vaihe 8: Tarkista ikonitiedostojen polku
Kun olet siirtänyt sosiaalisen median kuvakkeet palvelimellesi vaiheessa 7, on tärkeää tarkistaa ikonitiedostojen polku varmistaaksesi, että ne ladataan.
Kuvatiedoston polku antaa vihjeen selaimelle sen sijainnista palvelimella. Tarkastellaan kuvien polkuja functions.php lapsen teeman tiedosto. Avaa tiedosto koodieditorissa ja siirry kohtaan add_social_sharing () toiminto, jossa sinun on tarkistettava HTML-koodi, jonka olet luonut Simple Sharing Buttons Generator -ohjelmalla.
HTML-koodissa on tunniste src määrite jokaiselle kuvakkeelle. Tarkista, onko jokainen src määritteet osoittavat tarkan sijainnin, jossa kuvakkeet on ladattu vaiheessa 7.
Simple Sharing Buttons Generator lisää suhteelliset polut tiedostot. Joskus selaimet eivät voi tehdä kuvia, jos käytät suhteellista polkua, joten se on hyvä idea käytä absoluuttisia polkuja. Tällä tavoin jokainen selaimesi mahdollisesti käyttämä selain voi olla kuollut varmasti tarvittavien kuvake- tiedostojen sijainnista.
Generaattorin lisäämä suhteellinen kuvan polku näyttää tältä:
Muutetaan src jokaisen kuvakkeen määrite absoluuttiselle polulle, joka tarkoittaa, että se sisältää tiedoston koko URL-osoitteen.
Yllä oleva URL-polku näyttää tältä:
Vaihe 9: Lataa muokatut tiedostot ja aktivoi lapsen teema
Liitä palvelimesi FTP: n kautta ja lataa kaikki tässä opetuksessa luodut tiedostot, joita et ole vielä ladannut functions.php, style.css, ja sopiva mallitiedosto (tässä opetusohjelmassa joko single.php tai content.php).
Aktivoi lopuksi lapsen teema WP-hallintapaneelissa Ulkoasu> Teemat valikko.
Nyt olet valmis super-kevyt, resursseja säästävä, räätälöityjen yhteiskäytön kuvakkeiden kanssa. Voit mennä verkkoon ja tarkistaa, että se toimii sivustossasi.
johtopäätös
Tässä opetusohjelmassa näytin sinulle, miten voit lisätä mukautettuja sosiaalisen jakamisen painikkeita yksittäisten viestien loppuun. Voit lisätä jakamiskuvakkeet mihin tahansa muuhun sivustoosi sijaintiin luomasi toimintakookin avulla.
Lisää vain koodi 5, jota käytimme vaiheessa 5 paikkaan, jossa haluat näkyviin painikkeet:
Sinun on myös löydettävä oikea mallitiedosto, jos haluat sijoittaa kuvakkeet muualle. Yksittäisiä sivuja hallitsee mallitiedosto page.php, kun mediatiedostot kuten kuvat ladataan attachment.php.
Jos haluat näyttää sosiaalisen jakamisen painikkeet eri sivustossasi, voit löytää sen WordPress-mallin hierarkian avulla.
