kicsit trükkös meghatározni, hogyan lehet külső CSS-t vagy Javascriptet hozzáadni a WordPress-hez, ha csak kezdő WP-felhasználó vagy. Tehát mielőtt elkezdenénk adni néhány utasítást a külső CSS / Javascript hozzáadásához a webhelyéhez, szeretném elmagyarázni a két fő területet, ahol szükség lehet külső CSS használatára:
1) a weboldal testreszabása
külső CSS és Javascript használata nagyszerű választás a webhely testreszabásához, mert könnyen karbantarthatja a kódot, szerkesztheti és megőrizheti a fájlokat és/vagy kódokat. Ezeket a testreszabásokat azonban két fő típusra kell felosztanunk – a mini testreszabásokra és a nagyobb testreszabásokra. Később visszatérek ezekre a típusokra, és elmagyarázom, hogy a CSS / JS kódok hozzáadásának mely módjai lesznek jobbak a különböző helyzetekben.
2) harmadik féltől származó Szolgáltatásintegrációk
mint mindannyian tudjuk, néhány szolgáltatás CSS és JS fájlokat biztosít, amelyeket hozzá kell adni a webhelyéhez, például Űrlapszolgáltatásokat, Csevegődobozokat, Facebook Pixel kód hozzáadását és még a Google Analytics szolgáltatást is. Például támogatjuk a Google Analytics szolgáltatást, és valójában az integrációs folyamat a Témabeállításainkban nagyon egyszerű és egyszerű, de ha különböző elemzéseket szeretne nyomon követni és más módon, akkor a Google által generált külső kódokat kell használnia.
3 külső CSS / JavaScript hozzáadásának módjai
a téma opciók használata
ha más kódokat kell hozzáadnia, vagy hozzá kell adnia egy gyors és kis CSS-t és JavaScriptet a webhely testreszabásához, a téma opciók a megfelelőbb megoldás. Ez egy beépített funkció, amely könnyen elérhető a WordPress irányítópultjáról.
ugrás a Jupiter > téma opciók > haladó > egyéni CSS vagy egyéni JS szakasz.
vegye figyelembe, hogy külső CSS vagy JavaScript hozzáadásakor a Témabeállításokhoz nem adhat hozzá olyan kódot, amely a következővel kezdődik: <script></script> az egyéni JS szakaszban. El kell távolítanod a <script></script> kódot a kódodból, mert az egyéni JS részben írt kód már megjelent egy <script></script> címkével.
előnyök:
- a legjobb módja annak, hogy testre kis dolgokat CSS és Javascript Jupiter
- a legjobb módja annak, hogy adjunk kis középkategóriás CSS és Javacscript kódok Jupiter
- nincs beállítás / telepítés szükséges-ez már beépített!
hátrányok:
- nem adhat hozzá fájlokat közvetlenül (.css vagy .JS fájlok külsőleg), hacsak nem ismeri az AJAX kódolást.
- nem választhatja ki, hogy a kód a wp_header vagy a wp_footer fájlba kerül-e.
Plugin használata
A pluginok hűséges segítőink a WordPress használata során. Azt is hozzá a kódokat egy plugin, mint beszúrni fejlécek és láblécek. Ez egy nagyszerű módja annak, hogy hozzáadja a kódokat a webhelyéhez, és ugyanúgy működik, mint a beépített funkciónk. A jó dolog ezzel a bővítménnyel az, hogy kiválaszthatja, hogy a kódot a lábléchez vagy a fejléc területéhez kívánja-e hozzáadni, ami néha elengedhetetlen egyes integrációkhoz.
ellentétben a beépített megoldás, felveheti <script></script> címkék Insert fejlécek és láblécek plugin.
profik:
- kiválaszthatja a kód helyét
- nagyszerű alternatíva a beépített megoldásunkhoz
- gyors és egyszerű módja a Facebook Pixel vagy az egyéni Google Analytics kódok hozzáadásának.
- nagyszerű módja a harmadik fél integrációk
CONS:
- Needs plugin installation / setup
- nehéz karbantartani és frissíteni
- nem adhat hozzá fájlokat közvetlenül, mint a beépített megoldás.
gyermek téma és Enqueqe stílus használata
javasoljuk, hogy a gyermek témát használja, ha középkategóriás vagy nagy méretű testreszabásokat szeretne végezni, mert ez a legbiztonságosabb módja a webhely testreszabásának. A gyermek téma, akkor képes lesz arra, hogy fenntartsák a kódokat, és frissítse a fő téma fájlokat könnyen.
telepítheti a hivatalos gyermek témát, vagy létrehozhat saját. Ezután elkezdheti hozzáadni a CSS-kódokat, és testreszabhatja webhelyét azonnal megjelenés > szerkesztő. Ha azonban külső CSS fájlokat és Javascripts fájlokat szeretne hozzáadni, akkor meg kell hívnia, és néhány kódot kell írnia a függvényekbe.php.
így megy ez:
- készítse elő CSS vagy Javascript fájlját, vagy ha távoli forrás, készítse elő a linket.
- hozzon létre egy függvény nevű fájlt.php
- adja hozzá a következő kódot a függvényekhez.php
<?php
függvény add_theme_codes () {
wp_enqueue_style( ‘stílus’, get_stylesheet_directory_uri().’/myexternalcode.css’, ‘all’);
}
add_action (‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
ezzel a kóddal új műveletet hoz létre a stíluslaphoz, és meghívja azt a gyermek-téma könyvtárból. Tegyük fel, hogy van egy “szokás.css ” fájl, amelyet hozzá kell adni a webhelyéhez.
Add, hogy a fájl wp-content/themes/jupiter-child FTP-n keresztül, majd hozzon létre egy funkciót.php fájl. Ezután adja hozzá a fenti kódot, és módosítsa a ‘ / myexternalcode.css ‘to’ egyéni.css ‘ vagy bármi a fájl neve. Végül hozzá kell adnia a funkcióit.php a gyermek témájához is.
itt van egy másik példa, ha nincs fájlja, de távoli forrást kell hozzáadni:
<?php
add_theme_codes függvény () {
wp_enqueue_style (‘style’,’ https://code.jquery.com/jquery-3.2.1.js’, ‘all’);
}
add_action (‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
a fenti példában nem használtuk a get_stylesheet_directory_uri() függvényt, mert a forrásfájl távoli. Is, akkor hívja a különböző fájlokat a szerver segítségével linkeket, mint a fentiek.
előnyök:
- a legjobb mindenféle testreszabáshoz
- a legjobb harmadik féltől származó és összetett integrációkhoz
- könnyen karbantartható és szerkeszthető
- közvetlenül hozzáadhat helyi vagy távoli fájlokat
- az egyik legbiztonságosabb módszer a frissítésekhez
CONS:
- szüksége van egy kis beállításra
- egy kis kódolási ismeretet igényel (vagy legalább hajlandónak kell lennie tanulni)
- nem a leggyorsabb módszer a kis testreszabásokhoz
melyik a legjobb megoldás különböző helyzetekre?
ha gyors változtatásokat vagy testreszabásokat szeretne végrehajtani, a Téma beállításai a legjobb választás az Ön számára. Ha azonban nagyobb rugalmasságot és vezérlést szeretne a kód és a kód helyének, és még mindig van kicsi vagy középkategóriás testreszabása, a Fejlécek és a láblécek beillesztése jól működik az Ön számára.
de ha nagy testreszabásokat, harmadik féltől származó integrációkat szeretne végrehajtani, vagy ha karbantartható fejlesztési környezetet szeretne, akkor a gyermek téma a legjobb megoldás. Ha további segítségre van szüksége a külső CSS vagy Javascript hozzáadásához a webhelyéhez, mindig igénybe veheti az Artbees Care segítségét.
