Přidání Javascriptu do WordPress Themes Správná cesta

Existuje konkrétní způsob, jak přidat Javascript do svého motivu WordPress, aby se zabránilo konfliktům s pluginy nebo nadřazenými motivy WordPress. Problém je v tom, že mnoho „vývojářů“ volá své soubory javascript přímo v souboru header.php nebo footer.php, což je nesprávný způsob, jak to provést..


V této příručce vám ukážu, jak správně volat soubory javascript pomocí souboru features.php, aby se nahrály přímo do značky hlavičky nebo zápatí vašeho webu. Tímto způsobem, pokud vyvíjíte téma pro distribuci a váš koncový uživatel chce modifikovat skripty prostřednictvím podřízeného tématu, které mohou, nebo pokud používají mininting / caching nebo jiné optimalizační pluginy, budou fungovat správně. A pokud pracujete s podřízeným motivem, přidají se vaše skripty správným způsobem, aniž byste zkopírovali soubory záhlaví.php nebo footer.php do podřízeného motivu, které by neměly být nikdy nutné (při práci s dobře kódovaným motivem)

Špatný způsob, jak přidat Javascript do WordPress Témata

Volání javascriptu v souboru header.php nebo footer.php, jak je uvedeno níže, NENÍ správným způsobem a vřele doporučuji proti němu, často způsobuje konflikty s jinými pluginy a dělat věci ručně při práci s CMS není nikdy dobrý nápad.

Správný způsob, jak přidat Javascript do motivů WordPress

Lepší pro přidání javascriptu do vašeho motivu WordPress je to pomocí souboru function.php pomocí wp_enqueue_script. Použití akce wp_enqueue_scripts k načtení javascriptu pomůže udržet vaše téma v potížích.

Příklad

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

Výše uvedený kód načte soubor my-script.js na váš web. Jak vidíte, přidal jsem pouze popisovač $, ale můžete také přidat závislosti pro skript, číslo verze a to, zda se má načíst do záhlaví nebo zápatí (výchozí je záhlaví).

Funkci wp_enqueue_script () lze technicky použít v libovolném souboru šablony motivu nebo pluginu, ale pokud načítáte globální skripty, budete jej chtít umístit buď do souboru function.php vašeho motivu, nebo do samostatného souboru speciálně určeného k načtení skriptů do web. Pokud však chcete načíst skript pouze do konkrétního souboru šablony (například do příspěvků galerie), můžete tuto funkci umístit přímo do souboru šablony, ale osobně doporučuji všechny skripty ponechat na jednom místě a pomocí podmíněných načíst skripty podle potřeby.

Hostované skripty WordPress

Jedna skvělá věc na WordPress je, že již existuje spousta skriptů hostovaných a registrovaných, které můžete použít při vývoji motivu. Například jQuery, která se používá téměř v každém projektu, by měla být VŽDY načtena z WordPress a neměla by být hostována na webu třetí strany, jako je Google. Než tedy do projektu přidáte vlastní skript, zkontrolujte seznam registrované skripty abyste se ujistili, že již není zahrnuta do WordPress, a pokud ano, měli byste ji načíst na rozdíl od registrace své vlastní.

Použití zavěšení WordPress Enqueue

Dříve jsme se zmínili o funkci potřebné k načtení skriptu na vašem webu, ale při práci s soubory bez šablon, jako je soubor features.php, byste měli tuto funkci přidávat do jiné funkce připojené do správných háčků WordPress, tímto způsobem se vaše skripty dostanou registrován u všech ostatních skriptů registrovaných WordPressem, pluginů třetích stran a nadřazeného motivu, když používáte podřízený motiv.

WordPress má dva různé akční háčky, které můžete použít pro volání skriptů.

  1. wp_enqueue_scripts – akce použitá k načtení skriptů na front-end
  2. admin_enqueue_scripts – akce použitá k načtení skriptů v administrátorovi WP

Zde je příklad (který by byl přidán do souboru function.php), jak vytvořit funkci, a poté zavolat skripty pomocí zavěšení WordPress.

/ **
* Vytvořte 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: Podívejte se, jak používáme funkci „get_template_directory_uri“ při definování umístění skriptu? Tato funkce vytvoří adresu URL vaší složky motivu. Pokud pracujete s podřízeným motivem, budete chtít místo toho použít „get_stylesheet_directory_uri“, aby ukazoval na vaše podřízené téma, nikoli na nadřazené téma..

Přidání vloženého kódu Javascript

I když můžete snadno vložit vložený javascript do libovolného souboru šablony pomocí značky skriptu, může být také vhodné použít háčky WordPress pro přidání vloženého kódu, zejména pokud se jedná o základní plugin nebo kód motivu. Níže je uveden příklad přidání vložených skriptů na váš web:

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

Co uděláte, je přidat svůj vložený javascript za dříve zaregistrovaný skript „my-script“. Při použití wp_add_inline_script můžete přidat inline kód buď před nebo po již zaregistrovaném skriptu, takže pokud se pokoušíte upravit kód konkrétního skriptu, ujistěte se, že je načten po něm, nebo pokud potřebujete přidat nějaký vlastní kód, můžete zavěsit je to do skriptu jquery, který je obecně načten většinou motivů WordPress, a pokud ne, můžete použít wp_enqueue_script k načtení hostované verze jQuery hostované WordPress.

Pomocí této metody mohou lidé snadno odstranit vaše vložené skripty pomocí podřízeného motivu nebo doplňku pluginu, udržuje všechny vaše vlastní javascriptové úhledně uspořádané a je analyzováno WordPress, což může být bezpečnější. A pokud používáte podřízené téma, můžete načíst skripty prostřednictvím souboru features.php místo kopírování přes soubory header.php nebo footer.php do svého podřízeného motivu..

To znamená, že pokud pracujete s dětským motivem, nemusíte to dělat, můžete jednoduše vložit kód do záhlaví buď pomocí háčků wp_head nebo wp_footer, jako je příklad níže:

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