Mājas lapa » WordPress » WordPress ātruma optimizācija, izmantojot pielāgotas sociālās koplietošanas ikonas
WordPress ātruma optimizācija, izmantojot pielāgotas sociālās koplietošanas ikonas
Tas var šķist viegls uzdevums, taču, lai pievienotu WordPress vietnei labas uzvedības pogas, var būt problēmu. Kad es saku labu uzvedību, es domāju vienkāršus, vieglus, resursiem draudzīgus, ātri visbiežāk sociālos koplietošanas spraudņus, kas tur nav līdzīgi. Viņi mēdz ēst resursus, piemēram, crazy, un kāpēc kāds gribētu palielināt spraudņa ielādes laiku par 25-35%, lai parādītu dažas ikonas savā vietnē?
Labā ziņa ir tā, ka jums nav nepieciešams spraudnis, lai veiktu šo uzdevumu. Šajā apmācībā es jums parādīšu, kā jūs varat viegli pievienot pielāgotas sociālās koplietošanas pogas līdz jūsu WordPress vietnes amatu beigām tikai dažas rindas kodu.
1. solis. Izveidojiet sociālās koplietošanas pogas
Mēs izmantosim vienkāršās koplietošanas pogas ģeneratoru, kas ir ērts un viegli lietojams tīmekļa rīks, lai ģenerētu koplietošanas ikonas. Šīs lietotnes galvenā priekšrocība ir tā, ka pogas, ko tas ģenerē, darbojas uz priekšu tie netiks slogs jūsu serverim un jūs varat arī saglabāt savu lietotāju darbību privāti.
Lai izveidotu pielāgotās pogas, dodieties šeit un nospiediet Sāciet. Izvēlieties 1 no 6 dažādiem pogu stiliem. Klikšķis Nākamais un atzīmējiet sociālie tīkli jūs vēlaties pievienot savai vietnei. Kad esat pabeidzis, jums būs jāaizpilda jūsu vietnes informācija.
Šajā ekrānā (zemāk) jūs atradīsiet divas iespējas: 'Bez JavaScript' un 'JavaScript'. Atzīmējiet JavaScript, tas ļaus pārlūkprogrammai dinamiski noteikt URL, tāpēc apmeklētāji varēs kopīgot katru ziņu atsevišķi ne tikai mājas lapas URL.
Tagad jums būs jāpievieno ģenerētās ikonas un kods savai vietnei. Vispirms jums būs nepieciešams izveidot bērnu tēmu.
Jūs varat viegli izveidot WP bērna tēmu ar mūsu apmācības palīdzību, vai arī varat izpildīt šī WP Codex raksta darbības. Ja jums jau ir tāds, jūs varat pāriet uz 3. soli.
Bērnu tēma ir saistīta ar tēmu, ko jūs pašlaik izmantojat - nedaudz līdzīgi kā bērns attiecas uz viņa vecākiem. Tā mantojis visu (stilu un funkcionalitāti) no vecāka tēmas bet jūs varat pievienot papildu funkcionalitāti uz to.
Mūsu gadījumā papildu funkcionalitāte būs pielāgotas sociālās koplietošanas pogas.
3. solis: izveidojiet pielāgotu funkciju, kas parāda ikonas
Mēs pievienosim pielāgotu funkciju bērna tēmas funkcijām.php.
Ar šīs funkcijas palīdzību jūs varēsiet pievienot sociālās ikonas, kur vien vēlaties, izmantojot pielāgoto darbību āķi. Ja jūsu bērna tēmai vēl nav faila function.php, izveidojiet tukšu teksta failu bērna tēmas saknes mapē ar nosaukuma funkcijām un mainiet tā paplašinājumu uz .php.
Ievietojiet šo tukšu failu šādā koda rindiņā:
Kad jūsu funkcijas.php fails ir iestatīts, pievienojiet tai šādu koda fragmentu:
/ * * Pievieno pielāgotās sociālās koplietošanas ikonas * / funkcija add_social_sharing () ?>
Kopīgojiet šo ziņu
Visbeidzot izdzēsiet HTML komentāra rindu no iepriekš minētā koda fragmenta nomainiet to ar HTML kodu jūs radījāt 1. solī ar sociālās koplietošanas pogas ģeneratoru.
Pēc noklusējuma atsevišķas ziņas tiek pārvaldītas ar veidnes failu, ko sauc single.php. Dažreiz - jo īpaši modernākos tematos - single.php ir sarežģītāka, jo tā arī ielādē papildu veidnes failus. Šajā solī mums ir jāatrod atbilstošais veidnes fails, kurā vēlāk varam pievienot ikonas.
Lai atrastu pareizo vietu sociālajām pogām, mums ir jāatrod veidnes fails ir funkcija, kas ielādē atsevišķu amatu saturu.
Atvērsim tēmas redaktoru WordPress administratora panelī zem Izskats> Redaktors. Labajā augšējā stūrī atrodiet nolaižamo sarakstu, kurā var izvēlēties vecāku tēmu. Zem nolaižamā saraksta var redzēt visus veidnes failus, kas ir jūsu vecāku tēmā. Ritiniet uz leju, līdz atrodat Viena ieraksta veidne (ko sauc par single.php) un atveriet to.
Ja vecāku tēma izmanto get_template_part () WP funkcija single.php tas nozīmē, ka tas izmanto papildu veidnes failu, lai ielādētu viena ziņojuma saturu.
Vispirms jums ir jānoskaidro, kurš no tiem ir. Papildu veidnes faila nosaukums ir pirmais get_template_part () funkciju.
In Divdesmit piecpadsmit tas izskatās šādi:
get_template_part ('saturs', get_post_format ());
Pirmais parametrs ir "saturs" tas nozīmē, ka meklējam veidnes failu content.php. Lai modificētu to, jums ir nepieciešams kopēt šo failu no vecāku tēmas saknes mapes uz bērnu tēmas saknes mapi.
Mēs izveidojām izsaukto funkciju add_social_sharing () 3. solī, un mēs pievienojām to pielāgotās darbības āķim, ko sauca custom_social_share. Tagad mums būs jāpievieno šis āķis uz vietu, kur mēs vēlamies, lai šī funkcija tiktu izpildīta.
Šeit ir koda fragments, kas jums būs jāievieto pareizajā vietā:
Tālāk atradīsim pareizo vietu.
Atveriet veidnes failu, ko pievienojāt bērna tēmai 4. solī koda redaktorā vai WordPress administratora informācijas paneļa motīvu redaktorā un meklējiet saturs() funkciju.
Pārbaudiet, vai ir wp_link_pages () funkcija tūlīt pēc saturs() funkciju. Ja tāds ir, tad koda fragments nāk pēc tam; pretējā gadījumā tā seko saturs() funkciju.
6. solis: pievienojiet CSS kodu bērna tēmai
Atveriet style.css jūsu bērna tēmas fails vai nu jūsu koda redaktorā vai WordPress administratora informācijas paneļa motīvu redaktorā, kopējiet 1. solī ģenerēto CSS kodu, ielīmējiet to faila beigās un saglabājiet to.
Lai pievienotu sociālās koplietošanas ikonas pareizi, katrai tēmai CSS failam pievienosim divas papildu rindas. Nokopējiet un ielīmējiet šādu koda fragmentu uz style.css fails:
ul.share-pogas li a border: 0; ul.share-button li img display: inline;
7. solis: augšupielādējiet sociālo mediju ikonu uz servera
Augšupielādējiet izvēlēto sociālo multivides ikonu kopu, kuru lejupielādējāt 1. solī, uz savu bērnu tēmu mapi. Pievienojiet savu serveri, izmantojot FTP, izveidojiet jaunu mapi attēlus bērna tēmas mapes (/ wp-content / themes / your-child-theme / images) saknes iekšpusē un augšupielādējiet šeit iestatīto ikonu.
Mēs nosaukumu nosaukumu attēlus tāpēc, ka tas ir attēlu mapes noklusējuma nosaukums, ko izmanto vienkāršās koplietošanas pogas ģenerators.
8. solis: pārbaudiet ikonas failu ceļu
Pēc tam, kad 7. solī esat augšupielādējis sociālās multivides ikonas serverī, ir svarīgi pārbaudīt ikonu failu ceļu, lai pārliecinātos, ka tie tiks ielādēti.
Attēla faila ceļš sniedz pārlūkam ieteikumu par tās atrašanās vietu serverī. Pārbaudīsim attēla ceļus iekšpusē funkcijas.php bērna tēmas fails. Atveriet failu savā koda redaktorā un dodieties uz add_social_sharing () funkcija, kurā jāpārbauda HTML kods, ko izveidojāt ar vienkāršu koplietošanas pogu ģeneratoru.
HTML kodā atradīsiet tagu ar src katras ikonas atribūts. Pārbaudiet, vai katrs src atribūti norāda uz precīzu atrašanās vietu, kur jūsu ikonas kopa tika augšupielādēta 7. darbībā.
Vienkāršās koplietošanas pogas ģenerators pievieno relatīvos ceļus failus. Dažreiz pārlūkprogrammas nevar attēlot attēlus, ja izmantojat relatīvo ceļu, tāpēc tā ir laba ideja izmantojiet absolūtos ceļus. Tādā veidā katrs pārlūkprogramma, ko jūsu apmeklētāji var izmantot, var būt pārliecināts par nepieciešamo ikonas failu atrašanās vietu.
Ģeneratora radītais relatīvais attēla ceļš izskatās šādi:
Mainīsim src katras ikonas atribūts absolūtā ceļā, kas nozīmē, ka tajā būs pilns faila URL.
Iepriekš redzamais URL ceļš izskatīsies šādi:
9. solis: augšupielādējiet modificētos failus un aktivizējiet bērnu tēmu
Pievienojiet savu serveri, izmantojot FTP, un augšupielādējiet visus šajā apmācībā izveidotos failus, kurus vēl neesat augšupielādējis: funkcijas.php, the style.css, un atbilstošo veidnes failu (šajā apmācībā vai nu single.php vai content.php).
Visbeidzot aktivizējiet bērnu tēmu WP administrācijas panelī zem Izskats> Motīvi izvēlnē.
Tagad jūs esat gatavs ar savām super-vieglajām, resursu taupīšanas, pielāgotajām sociālās sadales ikonām. Jūs varat doties tiešsaistē un pārbaudīt, vai tā darbojas jūsu vietnē.
Secinājums
Šajā apmācībā es parādīju, kā pievienot atsevišķas sociālās koplietošanas pogas atsevišķu amatu beigās. Koplietošanas ikonas varat pievienot jebkurai citai vietnes vietnei, izmantojot mūsu izveidoto darbības āķi.
Vienkārši pievienojiet 5. solī izmantoto kodu uz vietu, kur vēlaties, lai pogas tiktu rādītas:
Ja vēlaties izvietot ikonas citur, jums ir jāatrod pareizais veidnes fails. Atsevišķas lapas pārvalda veidnes fails, ko sauc page.php, kamēr multivides pielikumi, piemēram, attēli, tiek ielādēti attachment.php.
Ja vēlaties parādīt sociālās koplietošanas pogas citā vietā jūsu vietnē, varat to izmantot, izmantojot WordPress veidnes hierarhiju.
