Kaip tinkamai pridėti JavaScripts ir stilius

Ar norite išmokti tinkamai pridėti „JavaScripts“ ir CSS stilių lenteles „WordPress“? Daugelis „pasidaryk pats“ vartotojų dažnai daro klaidą, tiesiogiai pašaukdami savo scenarijus ir stiliaus lentelę į papildinius ir temas. Šiame straipsnyje mes jums parodysime, kaip tinkamai pridėti „JavaScripts“ ir stiliaus lentelę „WordPress“. Tai bus ypač naudinga tiems, kurie tik pradeda mokytis „WordPress“ temos ir įskiepių kūrimo.


Tinkamai pridedant „JavaScripts“ ir stilius „WordPress“

Dažna klaida pridedant scenarijus ir stilių su WordPress

Daugybė naujų „WordPress“ įskiepių ir temų kūrėjų daro klaidą tiesiogiai pridėdami scenarijus ar įterptą CSS į savo papildinius ir temas..

Kai kurie klaidingai naudoja funkciją wp_head, kad įkeltų savo scenarijus ir stiliaus lapelius.

<?php
add_action (‘wp_head’, ‘wpb_bad_script’);
funkcija wpb_bad_script () {
echo ‘jQuery eina čia’;
}
?>

Nors aukščiau pateiktas kodas gali atrodyti lengvesnis, jis yra neteisingas scenarijų pridėjimo būdas „WordPress“ ir ateityje sukelia daugiau konfliktų..

Pvz., Jei „jQuery“ įkeliate rankiniu būdu, o kitas įskiepis įkelia „jQuery“ naudodamas tinkamą metodą, tada „jQuery“ turite būti įkeliami du kartus. Jei jis įkeliamas kiekviename puslapyje, tai neigiamai paveiks „WordPress“ greitį ir našumą.

Taip pat gali būti, kad šios dvi versijos yra skirtingos, o tai taip pat gali sukelti konfliktus.

Atsižvelgiant į tai, pažvelkime į tinkamą scenarijų ir stiliaus lentelių pridėjimo būdą.

Kodėl „WordPress“ įkeičia scenarijus ir stilius?

„WordPress“ turi stiprią kūrėjų bendruomenę. Tūkstančiai žmonių iš viso pasaulio kuria „WordPress“ temas ir papildinius.

Norėdami įsitikinti, kad viskas veikia tinkamai, ir niekas nesikiša į kito kojų pirštus, „WordPress“ turi enkuravimo sistemą. Ši sistema suteikia programuojamą „JavaScripts“ ir CSS stilių lentelių įkėlimo būdą.

Naudodamiesi funkcijomis wp_enqueue_script ir wp_enqueue_style, jūs nurodote „WordPress“, kada reikia įkelti failą, kur jį įkelti ir kokios yra jo priklausomybės.

Ši sistema taip pat leidžia kūrėjams naudoti įmontuotas „Java“ bibliotekas, kurios pateikiamos kartu su „WordPress“, o ne kelis kartus įkelti tą patį trečiosios šalies scenarijų. Tai sumažina puslapio įkėlimo laiką ir padeda išvengti konfliktų su kitomis temomis ir papildiniais.

Kaip tinkamai panaudoti scenarijus “WordPress”?

Tinkamai įkelti scenarijus į „WordPress“ yra labai paprasta. Žemiau pateiktas kodo pavyzdys, kurį galėtumėte įklijuoti į papildinių failą arba į savo programos „function.php“ failą, kad tinkamai įkeltumėte scenarijus „WordPress“..

?php
funkcija wpb_adding_scripts () {

wp_register_script (‘my_amazing_script’, plugins_url (‘amazing_script.js’, __FILE__), masyvas (‘jquery’), ‘1.1’, tiesa);

wp_enqueue_script (‘my_amazing_script’);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_adding_scripts’);
?>

Paaiškinimas:

Pradėjome registruodami scenarijų naudodami funkciją wp_register_script (). Ši funkcija priima 5 parametrus:

  • $ rankena – Rankena yra unikalus scenarijaus pavadinimas. Mūsų vardas yra „my_amazing_script“
  • USD src – src yra jūsų scenarijaus vieta. Mes naudojame funkciją plugins_url, kad gautume tinkamą savo papildinių aplanko URL. Kai „WordPress“ tai sužinos, tada jame aplanke ieškos mūsų failo pavadinimo „amazing_script.js“.
  • $ deps – Deps yra priklausomybė. Kadangi mūsų scenarijus naudoja „jQuery“, priklausomybės srityje pridėjome „jQuery“. „WordPress“ automatiškai įkels „jQuery“, jei ji dar nėra įkeliama svetainėje.
  • $ ver – Tai yra mūsų scenarijaus versijos numeris. Šis parametras nėra būtinas.
  • $ in_footer – Norime įkelti poraštę savo scenarijų, todėl nustatėme, kad vertė būtų teisinga. Jei norite įkelti scenarijų į antraštę, padarykite tai klaidingu.

Pateikę visus parametrus „wp_register_script“, mes galime tiesiog paskambinti scenarijui „wp_enqueue_script ()“, todėl viskas įvyks.

Paskutinis žingsnis yra naudoti wp_enqueue_scripts veiksmo kabliuką, kad iš tikrųjų būtų įkeltas scenarijus. Kadangi tai yra kodo pavyzdys, mes pridėjome jį tiesiai prie viso kito.

Jei pridėjote tai prie savo temos ar papildinio, tuomet galite uždėti šį veiksmo kabliuką ten, kur iš tikrųjų reikia scenarijaus. Tai leidžia sumažinti įskiepio atmintį.

Dabar kai kam gali kilti klausimas, kodėl mes žengiame papildomą žingsnį, kad pirmiausia įregistruotume scenarijų, o paskui jį pavyktų? Na, tai leidžia kitiems svetainių savininkams išregistruoti jūsų scenarijų nekeisdami pagrindinio jūsų papildinio kodo.

Tinkamai užrašykite stilius „WordPress“

Kaip scenarijus, taip pat galite užmaskuoti savo stiliaus lenteles. Pažvelkite į žemiau pateiktą pavyzdį:

<?php
funkcija wpb_adding_styles () {
wp_register_style (‘my_stylesheet’, plugins_url (‘my-styleheet.css’, __FILE__));
wp_enqueue_style (‘my_stylesheet’);
}
add_action (‘wp_enqueue_scripts’, ‘wpb_adding_styles’);
?>

Vietoj wp_enqueue_script, norėdami pridėti savo stiliaus lentelę, dabar naudojame wp_enqueue_style.

Atkreipkite dėmesį, kad mes panaudojome wp_enqueue_scripts veiksmo kabliuką tiek stiliams, tiek scenarijams. Nepaisant pavadinimo, ši funkcija veikia abu.

Aukščiau pateiktuose pavyzdžiuose mes panaudojome funkciją plugins_url, norėdami nurodyti scenarijaus ar stiliaus, kurį norėjome užkoduoti, vietą.

Tačiau jei savo temoje naudojate enqueue scripts funkciją, tiesiog naudokite get_template_directory_uri (). Jei dirbate su vaiko tema, naudokite get_stylesheet_directory_uri ().

Žemiau pateiktas kodo pavyzdys:

<?php

funkcija wpb_adding_scripts () {
wp_register_script (‘my_amazing_script’, get_template_directory_uri (). ‘/js/amazing_script.js’, masyvas (‘jquery’), ‘1.1’, tiesa);
wp_enqueue_script (‘my_amazing_script’);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_adding_scripts’);
?>

Tikimės, kad šis straipsnis padėjo jums išmokti tinkamai pridėti „Java“ scenarijų ir stilių „WordPress“. Taip pat galbūt norėsite išstudijuoti geriausių „WordPress“ papildinių šaltinio kodą, kad pateiktumėte kelis realaus gyvenimo kodo pavyzdžius.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map