Pridanie Javascriptu do WordPress Themes správnym spôsobom

Existuje špecifický spôsob, ako pridať Javascript do svojej témy WordPress, aby ste predišli konfliktom s doplnkami alebo nadradenými témami WordPress. Problém je v tom, že veľa „vývojárov“ volá ich súbory javascript priamo v súbore header.php alebo footer.php, čo je nesprávny spôsob, ako to urobiť..


V tejto príručke vám ukážem, ako správne volať súbory javascript pomocou súboru features.php, aby sa načítali priamo do značky hlavy alebo päty vášho webu. Týmto spôsobom, ak vyvíjate tému na distribúciu a váš koncový používateľ chce upraviť skripty prostredníctvom podradenej témy, ktorú môžu použiť, alebo ak používajú doplnkové moduly na minimalizovanie / ukladanie do vyrovnávacej pamäte alebo iné optimalizačné doplnky, budú fungovať správne. A ak pracujete s podradeným motívom, vaše skripty sa pridávajú správnym spôsobom, bez kopírovania súborov header.php alebo footer.php do podradeného motívu, ktoré by nemali byť nikdy potrebné (pri práci s dobre kódovaným motívom).

Nesprávny spôsob, ako pridať Javascript do motívov WordPress

Volanie javascriptu v súbore header.php alebo footer.php, ako je uvedené nižšie, NIE JE správnym spôsobom a dôrazne ho odporúčam, často to spôsobuje konflikty s inými doplnkami a robenie vecí manuálne pri práci s CMS nie je nikdy dobrý nápad.

Správny spôsob, ako pridať Javascript do motívov WordPress

Lepšie na pridanie javascriptu do vašej témy WordPress je urobiť to pomocou súboru features.php pomocou wp_enqueue_script. Použitie akcie wp_enqueue_scripts na načítanie javascriptu pomôže udržať tému bez problémov.

príklad

wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);

Vyššie uvedený kód načíta súbor my-script.js na vaše stránky. Ako vidíte, zahrnoval som iba úchytku $, ale môžete tiež pridať závislosti pre skript, číslo verzie a to, či sa má načítať do hlavičky alebo päty (predvolená je hlavička).

Funkciu wp_enqueue_script () možno technicky použiť v ľubovoľnom súbore šablóny témy alebo doplnku, ale ak načítavate globálne skripty, budete ich chcieť umiestniť buď do súboru function.php vašej témy, alebo do samostatného súboru špecificky určeného na načítanie skriptov do súboru site. Ak však chcete načítať iba skript do konkrétneho súboru šablóny (napríklad na príspevky do galérie), môžete túto funkciu umiestniť priamo do súboru šablóny, osobne však odporúčam všetky skripty ponechať na jednom mieste a na načítanie použiť podmienené podmienky. skripty podľa potreby.

Hostované skripty WordPress

Jedna skvelá vec, o WordPress je, že už existuje veľa skriptov hostených a registrovaných, ktoré môžete použiť pri vývoji témy. Napríklad jQuery, ktoré sa používajú takmer v každom projekte, by sa mali VŽDY načítavať z WordPress a nikdy by nemali byť hostené na stránkach tretích strán, ako je napríklad Google. Predtým, ako do projektu pridáte vlastný skript, skontrolujte zoznam registrované skripty aby ste sa uistili, že ešte nie je súčasťou WordPress, a ak je, mali by ste ho načítať na rozdiel od registrácie svojej vlastnej.

Použitie háčika WordPress Enqueue

Predtým sme sa zmienili o funkcii potrebnej na načítanie skriptu na vašom webe, avšak pri práci so súbormi bez šablón, ako je napríklad súbor features.php, by ste túto funkciu mali pridávať do inej funkcie pripojenej k správnym háčikom WordPress, čím sa vaše skripty dostanú zaregistrovaný vo všetkých ostatných skriptoch zaregistrovaných programom WordPress, doplnkoch tretích strán a vašej nadradenej téme, keď používate podradenú tému.

WordPress má dva rôzne akčné háčiky, ktoré môžete použiť na volanie skriptov.

  1. wp_enqueue_scripts – akcia použitá na načítanie skriptov na klientskom rozhraní
  2. admin_enqueue_scripts – akcia použitá na načítanie skriptov v správcovi WP

Tu je príklad (ktorý by sa pridal do súboru function.php), ako vytvoriť funkciu a potom zavolať skripty pomocou háčika WordPress..

/ **
* Vyžiadajte si skript
* /
function myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Poznámka: Zistite, ako pri definovaní umiestnenia skriptu používame funkciu „get_template_directory_uri“? Táto funkcia vytvorí adresu URL do priečinka s témami. Ak pracujete s podradenou témou, budete namiesto toho chcieť použiť „get_stylesheet_directory_uri“, aby ukazovala na podradenú tému a nie na nadradenú tému..

Pridanie vloženého kódu Javascript

Aj keď môžete vložiť vložený javascript do ľubovoľného súboru šablóny prostredníctvom značky skriptu, je dobré použiť aj na pridanie vloženého kódu háčiky WordPress, najmä ak ide o hlavný doplnok alebo kód témy. Nižšie je uvedený príklad pridania vložených skriptov na vaše stránky:

function myprefix_add_inline_script () {
wp_add_inline_script ('my-script', 'alert ("hello world");', 'after');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Čo urobíte, je pridať vložený javascript za predtým zaregistrovaný skript „my-script“. Pri použití wp_add_inline_script môžete vložiť inline kód iba pred alebo za už zaregistrovaný skript, takže ak sa snažíte zmeniť kód konkrétneho skriptu, uistite sa, že je načítaný za ním, alebo ak potrebujete pridať nejaký vlastný kód, môžete ho pripojiť je to do skriptu jQuery, ktorý je zvyčajne načítaný väčšinou tém WordPressu, a ak nie, môžete použiť wp_enqueue_script na načítanie hostovanej verzie jQuery hostenej WordPressom..

Pomocou tejto metódy môžu ľudia ľahko odstrániť vaše vložené skripty prostredníctvom podradeného motívu alebo doplnku doplnku, všetky vaše vlastné javascripty sú prehľadne usporiadané a analyzujú ho WordPress, čo môže byť bezpečnejšie. A ak používate podradenú tému, môžete načítať skripty prostredníctvom súboru features.php namiesto kopírovania cez súbory header.php alebo footer.php do podradenej témy..

Ak však pracujete v podradenej téme, nemusíte to robiť, môžete jednoducho vložiť kód do hlavičky pomocou háčikov wp_head alebo wp_footer, ako je príklad uvedený nižšie:

add_action ('wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map