je to trochu složité určit, jak přidat externí CSS nebo Javascript do WordPress, pokud jste jen začátečník WP uživatel. Než začneme dávat nějaké pokyny k přidání externího CSS / JavaScriptu na váš web, rád bych vysvětlil dvě hlavní oblasti, kde možná budete muset použít externí CSS:
1) přizpůsobení webových stránek
pomocí externího CSS a JavaScriptu je skvělá volba při přizpůsobování vašich webových stránek, protože můžete snadno udržovat kód, upravovat a uchovávat soubory a/nebo kódy. Tyto úpravy však musíme rozdělit na dva hlavní typy-mini přizpůsobení a větší přizpůsobení. K těmto typům se vrátím později a vysvětlím, které způsoby přidávání kódů CSS / JS budou lepší pro různé situace.
2) integrace služeb třetích stran
jak všichni víme, některé služby poskytují soubory CSS a JS, které je třeba přidat na váš web, jako jsou služby formuláře, chatovací boxy, Přidání Kódu Facebook Pixel a dokonce i Google Analytics. Jako příklad podporujeme Google Analytics a proces integrace v našich možnostech motivů je ve skutečnosti velmi snadný a jednoduchý, ale pokud chcete sledovat různé analýzy a jiným způsobem, musíte použít externí kódy generované společností Google.
3 způsoby přidání externího CSS / JavaScript
pomocí možností motivu
pokud potřebujete přidat další kódy nebo přidat rychlý a malý CSS a Javascript pro přizpůsobení vašeho webu, možnosti motivu jsou vhodnějším řešením. Je to Vestavěná funkce a je snadno přístupná z řídicího panelu WordPress.
přejděte na Jupiter > možnosti motivu > pokročilé > vlastní CSS nebo vlastní JS sekce.
Všimněte si, že při přidávání externího CSS nebo JavaScriptu do možností motivu nemůžete přidat kód, který začíná skriptem< >< / script> v sekci Vlastní JS. Musíte odstranit skript <>< / script> ve vašem kódu, protože kód, který píšete v sekci Vlastní JS, již publikuje pomocí značky <script>< / script>.
PROS:
- nejlepší způsob, jak přizpůsobit malé věci pomocí CSS a JavaScriptu v Jupiteru
- nejlepší způsob, jak přidat malé až střední CSS a Javacscript kódy v Jupiteru
- není nutné žádné nastavení / instalace-je již vestavěný!
nevýhody:
- těžší udržovat a aktualizovat
- nelze přidávat soubory přímo (.css nebo .soubory JS externě), pokud nevíte, AJAX kódování.
- nemůžete vybrat, zda bude kód tlačen v wp_header nebo wp_footer.
pomocí pluginu
pluginy jsou naši věrní pomocníci při používání WordPress. Můžete také přidat své kódy pomocí pluginu, jako je vložení záhlaví a zápatí. Je to skvělý způsob, jak přidat své kódy na své webové stránky a funguje to stejným způsobem jako naše Vestavěná funkce. Dobrá věc s tímto pluginem je, že si můžete vybrat, zda chcete přidat kód do zápatí nebo do oblasti záhlaví, což je někdy pro některé integrace zásadní.
na rozdíl od našeho vestavěného řešení můžete přidat < script>< / script> tagy do pluginu Vložit Záhlaví a zápatí.
PROS:
- můžete si vybrat umístění kódu
- skvělá alternativa k našemu vestavěnému řešení
- rychlý a snadný způsob, jak přidat Facebook Pixel nebo vlastní Google Analytics kódy.
- skvělý způsob, jak pro integrace třetích stran
nevýhody:
- potřebuje plugin instalace / nastavení
- těžké udržovat a aktualizovat
- nemůžete přidat soubory přímo jako naše vestavěné řešení.
použití podřízeného motivu a stylu Enqueqe
použití podřízeného motivu je to, co doporučujeme, pokud chcete provést některé úpravy středního rozsahu až po velké velikosti, protože je to nejbezpečnější způsob přizpůsobení vašeho webu. S podřízeným tématem budete moci snadno udržovat své kódy a aktualizovat své základní soubory motivů.
můžete nainstalovat naše oficiální podřízené téma nebo si můžete vytvořit vlastní. Poté můžete začít přidávat své CSS kódy a přizpůsobit své webové stránky hned ve vzhledu > Editor. Pokud však chcete přidat externí soubory CSS a soubory Javascriptů, musíte je zavolat a napsat některé kódy do funkcí.Linux.
- připravte si soubor CSS nebo Javascript nebo pokud je to vzdálený zdroj, připravte odkaz.
- Vytvořte soubor s názvem funkce.php
- přidejte do funkcí následující kód.php
<?php
funkce add_theme_codes () {
wp_enqueue_style (‚style‘, get_stylesheet_directory_uri ().“/můj externí kód.css‘, ‚vše‘);
}
add_action (‚wp_enqueue_scripts‘, ‚add_theme_codes‘ );
?>
s tímto kódem vytváříte novou akci pro svůj styl a voláte ji z adresáře podřízených motivů. Řekněme, že máte „zvyk“.css “ soubor, který je třeba přidat na váš web.
přidejte tento soubor do wp-content/themes/jupiter-child přes FTP a poté vytvořte funkce.php soubor. Poté přidejte výše uvedený kód a změňte ‚ / myexternalcode.css‘ to ‚vlastní.css ‚ nebo jakýkoli název souboru. Nakonec musíte přidat své funkce.php na vaše dítě téma příliš.
zde je další příklad, pokud nemáte soubor, ale je třeba přidat vzdálený zdroj:
<?php
funkce add_theme_codes () {
wp_enqueue_style (‚style‘, ‚ https://code.jquery.com/jquery-3.2.1.js‘, ‚vše‘);
}
add_action (‚wp_enqueue_scripts‘, ‚add_theme_codes‘ );
?>
ve výše uvedeném příkladu jsme nepoužili get_stylesheet_directory_uri (), protože zdrojový soubor je vzdálený. Také můžete volat různé soubory ze serveru pomocí odkazů, jako jsou výše uvedené.
PROS:
- nejlepší pro všechny druhy úprav
- nejlepší pro třetí strany a komplexní integrace
- snadná údržba a úprava
- můžete přidat místní nebo vzdálené soubory přímo
- jedna z nejbezpečnějších metod pro aktualizace
nevýhody:
- potřebuje trochu nastavení
- vyžaduje trochu kódování znalostí (nebo alespoň byste měli být ochotni se učit)
- není nejrychlejší způsob pro malé přizpůsobení
který z nich je nejlepší volbou pro různé situace?
pokud chcete provést rychlé změny nebo přizpůsobení, budou pro vás nejlepší volbou možnosti motivu. Pokud však chcete větší flexibilitu a kontrolu nad umístěním kódu a kódu a stále máte přizpůsobení malého až středního rozsahu, vložte záhlaví a zápatí pro vás budou dobře fungovat.
ale pokud chcete provádět velké úpravy, integrace třetích stran nebo chcete – li mít udržovatelné vývojové prostředí, je nejlepším řešením podřízené téma. Pokud potřebujete další pomoc při přidávání externích CSS nebo Javascript na vaše webové stránky, můžete vždy požádat o pomoc Artbees Care.
