Chcete zjistit, jak načíst JavaScript na WordPress?

Vše WordPress téma se obvykle skládá ze souborů PHP, HTML, CSS a JavaScript. JavaScript je oblíbený programovací jazyk mezi vývojáři. WordPress téma. Je to jazyk, díky kterému je stránka HTML interaktivní a může vám také umožnit interakci se serverem.

Zjistit, jak jej používat na svém webu, bude velkou výhodou.

Abyste mohli JavaScript skutečně používat, musíte vědět, jak jej načíst na svůj web.

Ale dříve, pokud jste nikdy nenainstalovali WordPress objevit Jak nainstalovat 7 kroků WordPress blogu et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu 

Pak zpět k tomu, proč jsme tady.

Jak načíst JavaScript WordPress

Vraťme se o krok zpět a nejprve se podívejme, jak WordPress načítá skripty a styly. Zjistili jste, že při vytváření souborů JavaScriptu je můžete přidat na svou stránku v sekci záhlaví nebo v zápatí.

Objevte také náš výukový program Jak komprimovat soubory CSS, HTML a Javascript

WordPress dělá přesně to samé, ale tyto značky skriptu nemůžete jen tak vložit do záhlaví nebo zápatí WordPress téma. WordPress používá inteligentní mechanismus načítání zvaný „ enqueueing ".

Tento mechanismus je nezbytný k tomu, aby závislostem dával smysl. Pokud píšete kód jQuery pro své téma WordPress, musí být nejprve načteno samotné jQuery.

Píšete kód, který se spoléhá na plugin jQuery. V tomto případě je nutné nejprve načíst jQuery, poté plugin jQuery a poté váš kód.

Jak "Enqueueing" skripty (přidat do fronty)

Skripty můžete zařadit do fronty ve složce motivu WordPress nebo ve vaší WordPress Plugin. Zde je úplný kód, který obsahuje skript, který se opírá o jQuery:

my_theme_scripts of function () {

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

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Nejprve musí být funkce „ zahnutý Na WordPress (Používání Háčky WordPress). První argument funkce ADD_ACTION () říká WordPress, kam mají být tyto skripty umístěny:

  • Na veřejném prostoru
  • Na přístrojové desce

Pokud používáte Wp_enqueue_scripts Budou načteny na veřejný prostor, pokud použijete „ admin_enqueue_scripts Budou načteny na palubní desku.

Ve funkci « ADD_ACTION Můžete použít „ wp_enqueue_script Chcete-li přidat potřebné skripty. Funkce vezme požadovaný parametr a čtyři volitelné parametry:

  • Prvním parametrem je název skriptu. Můžete si vybrat, co chcete, ale nezapomeňte použít jedinečný název.
  • Druhý parametr by měl obsahovat umístění souboru na vašem WordPress tématu resp WordPress Plugin.
  • Třetí parametr obsahuje pole závislostí. Ve výše uvedeném příkladu jsem řekl, že jQuery je závislost. Všechny závislosti jsou načteny před dotyčným skriptem.
  • Čtvrtým parametrem je číslo verze
  • Pátý a poslední parametr označuje, zda chcete načíst skript do záhlaví nebo zápatí. Pomocí „true“ načtěte v zápatí nebo pomocí „false“ načtěte skript do záhlaví (tento parametr také nemůžete vyplnit).

Závislosti

WordPress nabízí kopii jQuery, a proto ji můžete přidat jako závislost bez jakýchkoli potíží. Existuje řada dalších skriptů a pluginů jQuery, které WordPress nabízí. Pokud váš kód závisí na jednom z nich, nemusíte používat jednu ze svých kopií, stačí jej přidat jako závislost. tady je seznam skriptů, které WordPress nabídek.

Pokud zahrnete více nezávislých skriptů, můžete je přidat jako závislosti přesně stejným způsobem. Podívejte se na níže uvedený příklad:

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', true);

 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');

Protože první skript závisí na jQuery, pak na něm také závisí další skript. Takže nemusíte přidávat jQuery jako závislost pro oba. To usnadňuje správu závislostí.

podmíněný Loading

Někdy budete chtít skript použít na každé stránce, ale často budete chtít načíst skript na konkrétní stránku. To platí zejména při zvažování přidání skriptů na řídicí panel. Dobrým příkladem je používání zkrácených kódů. Zkratky umožňují uživatelům vytvářet pokročilé displeje ve vizuálním textovém editoru pomocí několika jednoduchých triků.

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 jsme uložili, aby se WordPress o skriptu dozvěděl, ale použijeme „ enqueue “. Skript se tak přidá na stránku pouze v případě, že se na této stránce použije zkratkový kód.

Další metodou načítání skriptů s podmínkami je použití podmíněných funkcí. Pokud chcete načíst skript na všechny archivní stránky kategorie, můžete použít tuto funkci is_category ().

Můžete například vytvořit kolotoč obrázků, které mohou uživatelé do článku přidat takto: [carousel ids = '42,124,123,331,90, XNUMX ′]. Na stránce článku bude vytvořen kolotoč pomocí obrázků určených jejich ID.

Chcete-li to provést, musíte vytvořit soubor " carousel.js Což je založeno na jQuery. Zde je kód, jak se tam dostat (nevytváří kolotoč, ale umožňuje vidět, jak probíhá proces načítání):

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');

funkce my_carousel ($ args) {

 $ atts = shortcode_atts (pole (

 'Ids' => ",

 ), $ Atts, 'carousel');

 wp_enqueue_script ('my-carousel');

 // Kód pro zobrazení karuselu zde

}

Odstranění a nahrazení skripty

Toto je zdaleka běžný scénář, ale někdy budete možná muset skript odstranit nebo nahradit. Dostal jsem se do situací, kdy skript přidal plugin (ale téma není použito) způsobil problémy s kompatibilitou. „Výběr“ byla nejlepší volba, protože chyba úplně zmizela.

Můžete také nahradit jQuery novější verzí, pokud něco testujete, abyste se ujistili, že bude kompatibilní s novějšími verzemi.

V těchto situacích funkce wp_deregister_script () "A" wp_dequeue_script () Jsou užitečné. Zde je návod, jak upravit kód, který již byl přidán 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', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Závěrečné myšlenky

Tato metoda nahrávání na WordPress je skvělá, protože vám umožňuje modulární přidávání skriptů. To vám umožní zajistit, aby byly závislosti přidávány modulárním způsobem.

Objevte také některé prémiové doplňky WordPress  

Můžete použít jiné WordPress pluginy poskytnout moderní vzhled a optimalizovat práci s vaším blogem nebo webem.

Nabízíme vám zde prémiové doplňky WordPress, které vám to pomohou.

1. Premium SEO Pack

Premium SEO Pack je a WordPress Plugin který optimalizuje vaše SEO a komprimuje CSS pro zlepšení rychlosti načítání vašeho webu.

Plugin také umožňuje spravovat design vašeho webu několika kliknutími. Mezi jeho funkce patří mimo jiné: komprese CSS a JS, integrace souborů Sitemap pro videa a úryvky, formátování souborů HTML a XML, přesměrování stránek 404 a 301, sdílení na sociálních sítích, poskytování „Štítek ALT, vysoce přizpůsobitelné rozvržení

Stáhnout | Demo | Web hosting

2. Woocommerce Dodací lhůta pro dopravu

Woocommerce Delivery Time Picker for Shipping je rozšíření WooCommerce, které zákazníkům umožňuje zvolit datum a čas dodání na stránce pokladny. 

Zákazníci si budou moci vybrat dodací lhůtu balíčku doma. Dodací lhůta bude viditelná pro administrátory webu a bude také zaslána e-mailem správcům webu nebo online obchodu.

Stáhnout | Demo | Web hosting

3. Menu Hero

Tento plugin vám umožňuje vytvořit si vlastní vlastní nabídku WordPress v několika poměrně snadných krocích. Zejména vám umožňuje snadno a intuitivně vytvořit elegantní a profesionální nabídku WordPress. 

Od nejsložitější mega nabídky plné funkcí po nejjednodušší nabídku s rozevírací nabídkou, plugin WordPress HeroMenu nastaví jakýkoli typ nabídky a spustí se během několika minut.

Pokud jde o funkce, které mimo jiné nabízí: perfektní provoz na PC, tabletu a smartphonu, od Vlastní CSS přidejte do nabídky své vlastní styly, tvůrce megamenu, několik podporovaných prohlížečů: Chrome, Firefox, Safari, Opera, IE9 a další.

Stáhnout | Demo | Web hosting

Doporučené zdroje

Podívejte se na další doporučené zdroje, které vám pomohou vyřešit další běžné chyby WordPress. 

Proč investovat do čističky vzduchu?

Tady je ! To je pro tento návod vše, doufám, že vám pomohlo pochopit, jak načíst JavaScript na WordPress. Neváhejte jej sdílet se svými přáteli na vašem sociální sítě přednostní. 

Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress.

Ale mezitím nám řekni o svém commentaires a návrhy ve vyhrazené sekci.

...