Ako správne pridať JavaScripty a štýly v WordPress

Chcete sa naučiť, ako do WordPress správne pridať JavaScripty a CSS štýly? Mnohí používatelia domácich majstrov často robia chybu, keď priamo volajú svoje skripty a štýly do doplnkov a tém. V tomto článku vám ukážeme, ako správne pridať JavaScripty a šablóny štýlov do WordPress. Toto bude užitočné najmä pre tých, ktorí sa začínajú učiť rozvíjať témy a doplnky WordPress.

Správne pridajte JavaScripty a štýly do WordPress

Bežná chyba pri pridávaní skriptov a šablón so štýlmi v programe WordPress

Mnoho nových vývojárov doplnkov a tém WordPress robí chybu, keď priamo pridávajú svoje skripty alebo CSS vložené do ich doplnkov a tém.

Niektorí používajú funkciu wp_head omylom na načítanie svojich skriptov a štýlov.

Aj keď sa vyššie uvedený kód môže zdať ľahší, je to nesprávny spôsob pridávania skriptov v programe WordPress a v budúcnosti sa tým vygenerujú ďalšie konflikty.

Napríklad, ak načítate jQuery manuálne a ďalšie plug-in načíta jQuery vhodnou metódou, jQuery sa načíta dvakrát. Ak sa načíta na všetkých stránkach, bude to mať nepriaznivý vplyv na rýchlosť a výkon WordPress.

Je tiež možné, že ide o rôzne verzie, ktoré môžu tiež spôsobiť konflikty.

Po tom sa pozrime na správny spôsob pridávania skriptov a štýlov.

Prečo vkladať skripty a štýly na WordPress?

WordPress má silnú komunitu vývojárov. Tisíce ľudí na celom svete vyvíjajú témy a doplnky WordPress.

Na zaistenie toho, že všetko funguje správne a nikto na seba nevstúpil, má systém WordPress systém Queued. tento systém poskytuje programovateľný spôsob načítania šablón štýlov JavaScripts a CSS.

Pomocou funkcií wp_enqueue_script a wp_enqueue_style povie WordPress, kedy má byť súbor nahraný, kde má byť nahraný a aké sú jeho závislosti.

tento systém Vývojárom tiež umožňuje používať integrované knižnice JavaScript, ktoré sa dodávajú s programom WordPress, namiesto toho, aby znova a znovu načítali skript rovnakej tretej strany. Znižuje sa tým čas načítania stránky a pomáha predchádzať konfliktom s inými témami a doplnkami.

Ako správne vložiť skripty do WordPressu?

Správne načítavanie skriptov v programe WordPress je veľmi ľahké. Nižšie je uvedený ukážkový kód, ktorý by ste vložili do súboru doplnku alebo do súboru function.php vášho motívu, aby ste úspešne načítali skripty WordPress.

? php function wpb_adding_scripts () {wp_register_script (‘my_amazing_script’, plugins_url (‘amazing_script.js’, __FILE__), array (‘jquery’), ‘1,1’, pravda); wp_enqueue_script (‘my_amazing_script’); } add_action (‘wp_enqueue_scripts’, ‘wpb_adding_scripts’); ?>

vysvetlenie:

Začneme registráciou nášho skriptu pomocou funkcie wp_register_script (). Táto funkcia je akceptovaná 5 parametre:

  • $ handle – Rukoväť je jedinečný názov skriptu. Naše sa volá „my_amazing_script“
  • $ src – src je umiestnenie skriptu. Používame funkciu plugins_url na získanie správnej adresy URL pre náš priečinok s pluginmi. Keď to WordPress zistí, vyhľadá v našom priečinku názov nášho súboru amazing_script.js.
  • $ deps – Deps nemá závislosť. Pretože náš skript používa jQuery, pridávame jQuery do oblasti závislosti. WordPress automaticky načíta jQuery, ak sa už na web nenačítava.
  • $ pozri – Toto je číslo verzie nášho skriptu. Tento parameter nie je povinný.
  • $ in_footer – Chceme načítať náš skript do päty, takže sme nastavili hodnotu na true. Ak chcete načítať skript v hlavičke, urobíte ho falošným.
  • Po zadaní všetkých parametrov v súbore wp_register_script môžeme tento skript volať vo formáte wp_enqueue_script (), vďaka ktorému sa všetko stane.

    Posledným krokom je použitie akčného háku wp_enqueue_scripts na skutočné načítanie skriptu. Pretože toto je príklad kódu, pridali sme ho hneď pod všetko ostatné.

    Ak ste to pridali do svojho motívu alebo doplnku, môžete tento akčný háčik umiestniť tam, kde je skript skutočne potrebný. To vám umožní znížiť stopu pamäte vášho doplnku.

    Teraz sa môže niekto čudovať, prečo urobíme ďalší krok, keď si najprv zaregistrujeme skript a potom ho zaradíme do frontu? Toto umožňuje ostatným vlastníkom webových stránok zrušiť registráciu skriptu bez úpravy hlavného kódu doplnku.

    Správne štýly frontov vo WordPress

    Rovnako ako skripty, môžete tiež radiť svoje šablóny štýlov. Pozrite si nasledujúci príklad:

    Namiesto použitia súboru wp_enqueue_script teraz pridávame náš hárok so štýlmi pomocou súboru wp_enqueue_style.

    Upozorňujeme, že pre štýly a skripty používame akčný hák wp_enqueue_scripts. Napriek názvu funguje táto funkcia pre vás oboch.

    Vo vyššie uvedených príkladoch používame funkciu plugins_url na ukázanie umiestnenia skriptu alebo štýlu, ktorý chceme zaradiť do frontu.

    Ak však vo svojej téme používate funkciu skriptu vo fronte, použite get_template_directory_uri (). Ak pracujete s podradenou témou, použite get_stylesheet_directory_uri ().

    Nižšie je uvedený príklad kódu:

    Dúfame, že vám tento článok pomohol naučiť sa, ako správne pridať javascript a štýly v programe WordPress. Môžete si tiež preštudovať zdrojový kód hlavných doplnkov WordPress a získať príklady praktického kódu.

    Ak sa vám tento článok páčil, prihláste sa na odber nášho kanála YouTube pozerať videozáznamy z programu WordPress. Nájdete nás aj na Twitter a Facebook,