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

Chcete sa naučiť, ako správne pridať JavaScripty a CSS šablóny štýlov v WordPress? 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 pridávať skripty JavaScripty a šablóny štýlov v programe WordPress. Toto bude užitočné najmä pre tých, ktorí sa začínajú učiť vývoj WordPressu a vývoj doplnkov.

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ď do svojich doplnkov a tém priamo pridávajú svoje skripty alebo vložené CSS.

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


Zatiaľ čo vyššie uvedený kód sa môže zdať ľahší, je to nesprávny spôsob pridávania skriptov do WordPressu a v budúcnosti sa tým generujú ďalšie konflikty.

Napríklad, ak načítate jQuery ručne a iný doplnok načíta jQuery pomocou príslušnej metódy, potom sa jQuery načíta dvakrát. Ak sa načíta na každej stránke, negatívne to ovplyvní 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 do WordPress vkladať skripty a štýly?

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

Aby sa ubezpečil, že všetko funguje správne a nikto na seba nevstúpil, má WordPress systém v rade. Tento systém poskytuje programovateľný spôsob načítania štýlov jazyka JavaScripts a CSS.

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

Tento systém tiež umožňuje vývojárom používať vstavané knižnice JavaScriptu, ktoré sú dodávané s programom WordPress, namiesto toho, aby viackrát načítali ten istý skript 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 umiestniť 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 s doplnkami alebo do súboru function.php s témou, aby ste úspešne načítali skripty do WordPress.

?php
function wpb_adding_scripts() {

wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

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. Na získanie správnej adresy URL nášho priečinka s doplnkami používame funkciu plugins_url. Keď to WordPress zistí, vyhľadá v tomto priečinku názov nášho súboru amazing_script.js.
  • $ deps – Deps nie je závislý. Pretože náš skript používa jQuery, pridali sme 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, bolo by to nesprávne.

Po zadaní všetkých parametrov vo wp_register_script môžeme skript volať v wp_enqueue_script (), vďaka ktorému sa to 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 svojej témy alebo doplnku, môžete tento akčný háčik umiestniť tam, kde je skript skutočne potrebný. To vám umožní znížiť veľkosť pamäte vášho doplnku.

Teraz by sa niektorí mohli pýtať, prečo sa chystáme urobiť ďalší krok, keď si najprv zaregistrujeme skript a potom ho zaradíme do frontu? Toto umožňuje ostatným vlastníkom stránok zrušiť registráciu skriptu bez úpravy základného kódu doplnku.

Správne štýly frontov vo WordPress

Rovnako ako skripty, môžete tiež radiť svoje šablóny štýlov. Pozrite sa na 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.

Všimnite si, že sme použili akčný hák wp_enqueue_scripts pre štýly a skripty. Napriek názvu funguje táto funkcia pre vás oboch.

Vo vyššie uvedených príkladoch sme použili funkciu plugins_url na poukázanie na umiestnenie skriptu alebo štýl, ktorý sme chceli zaradiť do frontu.

Ak však vo svojej téme používate funkciu skriptovania vo fronte, použite radšej 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 do programu WordPress správne pridať javascript a štýly. Môžete si tiež preštudovať zdrojový kód hlavných doplnkov WordPress, aby ste získali príklady skutočného kódu života.

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