Chcete zistiť, ako načítať JavaScript na WordPress?

Všetko WordPress tému sa zvyčajne skladá zo súborov PHP, HTML, CSS a JavaScript. JavaScript je populárny programovací jazyk medzi vývojármi. WordPress tému. Je to jazyk, ktorý robí stránku HTML interaktívnou a umožňuje vám tiež interakciu so serverom.

Vedieť, ako ho používať na svojom webe, bude obrovskou výhodou.

Ak chcete skutočne používať JavaScript, musíte vedieť, ako ho načítať na svoju webovú stránku.

Ale predtým, ak ste nikdy nenainštalovali WordPress objaviť Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu 

Potom späť k tomu, prečo sme tu.

Ako načítať JavaScript WordPress

Vráťme sa o krok späť a najskôr sa pozrime, ako WordPress načítava skripty a štýly. Dozvedeli ste sa, že pri vytváraní súborov JavaScript ich môžete pridať na svoju stránku v sekcii hlavičky alebo na päte.

Objavte aj náš tutoriál o Ako komprimovať súbory CSS, HTML a Javascript

WordPress robí presne to isté, ale tieto značky skriptu nemôžete len tak vložiť do súboru hlavičky alebo päty svojho WordPress tému. WordPress používa inteligentný mechanizmus načítania s názvom „ enqueueing ".

Tento mechanizmus je potrebný na to, aby závislostiam dával zmysel. Ak píšete kód jQuery pre svoju tému WordPress, musí sa najprv načítať jQuery samotný.

Píšete kód, ktorý sa opiera o plugin jQuery. V takom prípade musíte najprv načítať jQuery, potom plugin jQuery a potom váš kód.

Ako "enqueovať" skripty (pridať do frontu)

Skripty môžete zaradiť do frontu v priečinku témy WordPress alebo vo vašom WordPress Plugin. Tu je úplný kód, ktorý obsahuje skript, ktorý sa spolieha na jQuery:

my_theme_scripts of function () {

 wp_enqueue_script ('my-script ", get_template_directory_uri ().' /js/my-script.js ', pole (' jquery '),' 1.0.0 ', pravda);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Najskôr musí byť funkcia „ zahnutý Na WordPress (Používanie Háčiky WordPress). Prvý argument funkcie ADD_ACTION () hovorí WordPress, kam majú byť umiestnené tieto skripty:

• Na verejnom priestranstve
• Na prístrojovej doske

Ak použijete „ wp_enqueue_scripts Načítajú sa na verejný priestor, ak použijete možnosť „ admin_enqueue_scripts Načítajú sa na palubnú dosku.

Vo funkcii « ADD_ACTION Môžete použiť „ wp_enqueue_script Ak chcete pridať potrebné skripty. Funkcia preberá požadovaný parameter a štyri voliteľné parametre:

• Prvým parametrom je názov skriptu. Môžete si vybrať, čo chcete, ale nezabudnite použiť jedinečný názov.
• Druhý parameter by mal obsahovať umiestnenie súboru na vašej WordPress téme resp WordPress Plugin.
• Tretí parameter obsahuje pole závislostí. Vo vyššie uvedenom príklade som uviedol, že jQuery je závislosť. Všetky závislosti sa načítajú pred daným skriptom.
• Štvrtý parameter je číslo verzie
• Piaty a posledný parameter označuje, či chcete načítať skript do hlavičky alebo päty. Použite „true“ na načítanie v päte, „true“ na načítanie skriptu do hlavičky (tento parameter tiež nemôžete vyplniť).

stavení

WordPress ponúka kópiu jQuery, a preto ju môžete bez problémov pridať ako závislosť. Existuje veľké množstvo ďalších skriptov a doplnkov jQuery, ktoré WordPress ponúka. Ak váš kód závisí na jednom z nich, nemusíte používať jednu zo svojich kópií, stačí ho pridať ako závislosť. tu je zoznam skriptov, ktoré WordPress ponúk.

Ak zahrniete viac nezávislých skriptov, môžete ich pridať ako závislosti úplne rovnakým spôsobom. Pozrite sa na príklad nižšie:

my_theme_scripts of function () {

 wp_enqueue_script ("môj-základný skript", get_template_directory_uri (). '/js/my-base-script.js', pole ('jquery'), '1.0.0', pravda);

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', pole ("my-script-base '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Pretože prvý skript závisí od jQuery, potom od neho závisí aj nasledujúci skript. Takže nemusíte pridať jQuery ako závislosť pre obidve. To uľahčuje správu závislostí.

podmienečný Loading

Niekedy budete chcieť použiť svoj skript na každej stránke, ale často budete chcieť načítať skript na konkrétnej stránke. Platí to najmä pri zvažovaní pridania skriptov na palubnú dosku. Dobrým príkladom je používanie krátkych kódov. Skratky umožňujú používateľom vytvárať pokročilé zobrazenia vo vizuálnom textovom editore pomocou niekoľkých jednoduchých trikov.

my_theme_scripts of function () {

 wp_register_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ('môj-skript');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Skript sme uložili, aby sa program WordPress o skripte naučil, ale používame Enqueue ". Týmto spôsobom sa skript pridá na stránku, iba ak sa na tejto stránke použije skratka.

Ďalším spôsobom načítania skriptov s podmienkami je použitie podmienených funkcií. Ak chcete načítať skript na všetky archívne stránky kategórie, môžete použiť túto funkciu is_category ().

Môžete napríklad vytvoriť kolotoč obrázkov, ktoré môžu používatelia pridať do článku, takto: [carousel ids = '42,124,123,331,90, XNUMX XNUMX XNUMX ′]. Na stránke článku sa vytvorí kolotoč pomocou obrázkov označených ich ID.

Ak to chcete urobiť, musíte vytvoriť súbor “ carousel.js , Ktorá je založená na jQuery. Tu je kód, ktorý sa tam dá dostať (nevytvára kolotoč, ale umožňuje vám vidieť, ako sa proces načítania vyskytuje):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('my-carousel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', true);

}

add_shortcode ('carousel', 'my_carousel');

funkcia my_carousel ($ args) {

 $ atts = shortcode_atts (pole (

 'Ids' => ",

 ), $ Atts, „kolotoč“);

 wp_enqueue_script ('môj-kolotoč');

 // Kód na zobrazenie karuselu tu

}

Odstránenie a nahradenie skripty

Toto je zďaleka bežný scenár, niekedy však budete musieť skript odstrániť alebo nahradiť. Dostal som sa do situácií, keď skript pridaný doplnkom (ale téma nie je použitá) spôsoboval problémy s kompatibilitou. Najlepšou možnosťou bolo „Odstúpenie“, pretože chyba úplne zmizla.

Môžete tiež nahradiť jQuery novšou verziou, ak niečo testujete, aby ste sa uistili, že bude kompatibilná s novšími verziami.

V týchto situáciách funkcie wp_deregister_script () "A" wp_dequeue_script () Sú užitočné. Tu je postup, ako upraviť kód, ktorý už bol pridaný na WordPress.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

 wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', pole ('jquery'), '1.0.0', pravda);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Záverečné myšlienky

Tento spôsob nahrávania na WordPress je vynikajúci, pretože vám umožňuje modulárne pridávať svoje skripty. To vám umožní zabezpečiť, aby sa závislosti pridávali modulárnym spôsobom.

Objavte aj niektoré prémiové doplnky WordPress  

Môžete použiť iné WordPress pluginy poskytnúť moderný vzhľad a optimalizovať prácu s vaším blogom alebo webovou stránkou.

Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.

1. Premium SEO Pack

Premium SEO Pack je a WordPress Plugin ktorý optimalizuje vaše SEO a komprimuje CSS, aby sa zvýšila rýchlosť načítania vášho webu.

Doplnok tiež umožňuje spravovať dizajn vášho webu niekoľkými kliknutiami. Medzi jeho vlastnosti patrí: kompresia CSS a JS, integrácia súborov Sitemap pre video a úryvky, formátovanie súborov HTML a XML, presmerovanie stránok 404 a 301, zdieľanie na sociálnych sieťach, poskytovanie „Štítok ALT, vysoko prispôsobiteľné rozloženie

Stiahnuť | demo | web hosting

2. Woocommerce dodacia lehota na dopravu

Woocommerce Delivery Time Picker for Shipping je rozšírenie WooCommerce, ktoré zákazníkom umožňuje zvoliť si dátum a čas dodania na stránke platby. 

Zákazníci si budú môcť vybrať čas dodania balíka doma. Dodacia lehota bude viditeľná pre správcov webových stránok a bude tiež zaslaná e-mailom správcom webových stránok alebo online obchodu.

Stiahnuť | demo | web hosting

3. menu Hero

Tento doplnok vám umožňuje vytvoriť si vlastnú vlastnú ponuku WordPress v niekoľkých dosť jednoduchých krokoch. Umožňuje najmä ľahko a intuitívne vytvoriť elegantné a profesionálne menu WordPress. 

Od najzložitejšej mega ponuky plnej funkcií až po najjednoduchšie menu s rozbaľovacou ponukou, doplnok WordPress HeroMenu nastaví akýkoľvek typ ponuky a uvedie ho do chodu v priebehu niekoľkých minút.

Pokiaľ ide o funkcie, ktoré okrem iného ponúka: perfektná prevádzka na PC, tablete a smartfóne, od Vlastné CSS pridajte do ponuky svoje vlastné štýly, builder megamenu, niekoľko podporovaných prehliadačov: Chrome, Firefox, Safari, Opera, IE9 a ďalšie.

Stiahnuť | demo | web hosting

Odporúčané zdroje

Vyskúšajte ďalšie odporúčané zdroje, ktoré vám pomôžu vyriešiť ďalšie bežné chyby WordPress. 

• Ako Fix presmerovanie chyby na WordPress
• Ako vytvoriť vlastné rozloženie s Elementor
• Ako vytvoriť intranetový WordPress pre vašu organizáciu
• Ako vytvoriť prihlasovaciu stránku na WordPress

záver

Tu je! To je pre tento tutoriál všetko, dúfam, že vám pomohlo pochopiť, ako načítať JavaScript na WordPress. Neváhajte ho zdieľať so svojimi priateľmi vo svojom sociálne siete prednostné. 

Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress.

Medzitým nám však povedzte o svojom Komentáre a návrhy vo vyhradenej sekcii.

...