se on hieman hankala määrittää, miten lisätä ulkoista CSS tai Javascript WordPress jos olet vain aloittelija WP käyttäjä. So before we start to give some instructions on adding External CSS / Javascript to your website, I ’ d like to explain the two main areas where you might need to use External CSS:
1) verkkosivujen muokkaukset
ulkoisen css: n ja JavaScriptin käyttäminen on loistava valinta sivustosi muokkaamisessa, koska voit helposti ylläpitää koodia, muokata ja säilyttää tiedostoja ja/tai koodeja. Meidän on kuitenkin jaettava nämä mukautukset kahteen päätyyppiin-mini-mukautuksiin ja suurempiin mukautuksiin. Palaan myöhemmin näihin tyyppeihin ja selitän, mitkä tavat lisätä CSS / JS-koodeja ovat parempia eri tilanteissa.
2) Kolmannen Osapuolen Palveluintegraatiot
kuten kaikki tiedämme, jotkin palvelut tarjoavat CSS-ja JS-tiedostoja, jotka on lisättävä verkkosivustoosi, kuten Form Services, Chat Boxes, lisäämällä Facebook Pixel code ja jopa Google Analytics. Esimerkiksi tuemme Google Analyticsia ja itse asiassa teemavaihtoehtojemme integrointi on erittäin helppoa ja yksinkertaista, mutta jos haluat seurata eri analytiikkaa ja eri tavalla, sinun on käytettävä Googlen tuottamia ulkoisia koodeja.
3 tapaa lisätä ulkoinen CSS / JavaScript
käyttämällä teemavaihtoehtoja
jos haluat lisätä muita koodeja tai lisätä nopean ja pienen css: n ja JavaScriptin muokataksesi verkkosivustoasi, Teemavaihtoehdot ovat sopivampi ratkaisu. Se on sisäänrakennettu ominaisuus ja on helposti saatavilla WordPress kojelautaan.
mene Jupiteriin > Teemavaihtoehdot > Advanced > Custom CSS tai Custom JS-osio.
huomaa, että kun lisäät ulkoisen css: n tai JavaScriptin Teemavaihtoehtoihin, et voi lisätä koodia, joka alkaa <script></script> Custom JS-osioon. <script></script> in your code, koska mukautetun JS-osion kirjoittama koodi on jo julkaistu <script></script> tagilla.
plussat:
- paras tapa kustomoida pieniä asioita CSS: llä ja Javascriptillä Jupiterissa
- paras tapa lisätä pieniä keskialueen CSS: ään ja Javacscript-koodeja Jupiterissa
- ei asennusta / asennusta tarvita – se on jo sisäänrakennettu!
CONS:
- vaikeampi ylläpitää ja päivittää
- tiedostoja ei voi lisätä suoraan (.css tai .JS-tiedostot ulkoisesti) ellet osaa AJAX-koodausta.
- et voi valita, työnnetäänkö koodi wp_headeriin vai wp_footeriin.
käyttämällä liitännäistä
liitännäiset ovat uskollisia auttajiamme WordPressiä käytettäessä. Voit myös lisätä koodit plugin kuten Lisätä otsikot ja alatunnisteet. Se on hyvä tapa lisätä koodit sivustoosi ja se toimii samalla tavalla kuin sisäänrakennettu ominaisuus. Hyvä asia tämän plugin, on, että voit valita, haluatko lisätä koodin alatunnisteen tai otsikon alue, joka on joskus ratkaiseva joitakin integraatioita.
toisin kuin sisäänrakennetussa ratkaisussamme, voit lisätä <script></script> tageja Insert Headers-ja Footers-liitännäiseen.
plussat:
- voit valita koodin sijainnin
- loistava vaihtoehto sisäänrakennetulle ratkaisullemme
- nopea ja helppo tapa lisätä Facebook Pixel-tai mukautettuja Google Analytics-koodeja.
- loistava tapa kolmannen osapuolen integraatioihin
CONS:
- tarvitsee liitännäisen asennus / asennus
- vaikeasti ylläpidettävä ja päivitettävä
- tiedostoja ei voi lisätä suoraan, kuten sisäänrakennettu ratkaisumme.
käyttämällä lapsi teema ja Enqueqe Tyyli
käyttämällä lapsi teema on mitä suosittelemme, jos haluat tehdä joitakin keskialueen suurikokoisia muokkauksia, koska se on turvallisin tapa muokata sivuston. Kanssa lapsi teema, voit säilyttää koodit ja päivittää ydin teema tiedostoja helposti.
voit asentaa virallisen Lapsiteeman tai luoda oman. Tämän jälkeen voit alkaa lisätä CSS-koodejasi ja muokata verkkosivustoasi saman tien ulkoasultaan > Editor. Kuitenkin, jos haluat lisätä ulkoisia CSS-tiedostoja ja JavaScript tiedostoja, sinun täytyy soittaa sitä ja kirjoittaa joitakin koodeja toimintoja.php.
näin se menee:
- Hanki CSS – tai Javascript-tiedosto valmiina tai jos se on etälähde, Hanki linkki valmis.
- Luo tiedosto nimeltä funktiot.php
- lisää funktioihin seuraava koodi.php
<?php
funktio add_theme_codes () {
wp_enqueue_style (’tyyli’, get_stylesheet_directory_uri ().”/myexternalcode.css”, ”kaikki”);
}
add_action( ”wp_enqueue_scripts”, ”add_theme_codes’ );
?>
tällä koodilla luot tyylisivullesi uuden toiminnon ja kutsut sen lapsiteemahakemistosta. Sanotaan, että sinulla on ” tapa.CSS ” tiedosto, joka on lisättävä sivustoosi.
lisää kyseinen tiedosto wp-content/themes/jupiter-child-tiedostoon FTP: n kautta ja luo sitten funktio.php-tiedosto. Sitten, lisätä koodin edellä ja muuttaa ’ / myexternalcode.css ’ to ’ custom.css ’ tai mikä tahansa tiedostonimesi onkaan. Lopuksi, sinun täytyy lisätä toimintoja.php lapsesi teema liian.
tässä on toinen esimerkki, Jos sinulla ei ole tiedostoa, mutta etälähde on lisättävä:
<?php
funktion add_theme_codes () {
wp_enqueue_style (”style”, ” https://code.jquery.com/jquery-3.2.1.js”, ”all’);
}
add_action( ”wp_enqueue_scripts”, ”add_theme_codes’ );
?>
yllä olevassa esimerkissä emme käyttäneet get_stylesheet_directory_uria (), koska lähdetiedosto on etäinen. Myös, voit soittaa eri tiedostoja palvelimelta käyttämällä linkkejä, kuten yllä.
plussat:
- paras kaikenlaisiin muokkauksiin
- paras kolmannen osapuolen ja monimutkaisten integraatioiden käyttöön
- helppo ylläpitää ja muokata
- voit lisätä paikallisia tai etätiedostoja suoraan
- yksi turvallisimmista päivitysmenetelmistä
CONS:
- Needs a little bit of seting
- Requires a little bit of coding knowledge (or least you should be ready to learn)
- Not the quickest way for small customizations
kumpi on paras vaihtoehto erilaisiin tilanteisiin?
jos haluat tehdä nopeita muutoksia tai muokkauksia, Teemavaihtoehdot ovat sinulle paras vaihtoehto. Kuitenkin, jos haluat enemmän joustavuutta ja hallita koodin ja koodin sijainti, ja sinulla on vielä pieniä keskialueen muokkauksia, Lisää otsikot ja alatunnisteet toimii hyvin sinulle.
mutta jos haluat tehdä suuria räätälöintejä, kolmannen osapuolen integraatioita tai jos haluat ylläpitävän kehitysympäristön, Lapsiteema on paras vaihtoehto. Jos tarvitset lisäapua ulkoisen CSS: n tai JavaScriptin lisäämisessä sivustoosi, voit aina hankkia apua Artbees Carelta.
