det är lite knepigt att bestämma hur man lägger till extern CSS eller Javascript till WordPress om du bara är en nybörjare WP-användare. Så innan vi börjar ge några instruktioner om hur du lägger till extern CSS / Javascript på din webbplats, skulle jag vilja förklara de två huvudområdena där du kan behöva använda extern CSS:
1) Webbplatsanpassningar
att använda extern CSS och Javascript är ett utmärkt val för att anpassa din webbplats eftersom du enkelt kan behålla koden, Redigera och behålla filerna och/eller koderna. Vi måste dock dela upp dessa anpassningar till två huvudtyper – minianpassningar och större anpassningar. Jag kommer tillbaka till dessa typer senare och förklarar vilka sätt att lägga till CSS / JS-koder som är bättre för olika situationer.
2) Tredjepartstjänstintegrationer
som vi alla vet tillhandahåller några av Tjänsterna CSS-och JS-filer som måste läggas till på din webbplats som Formulärtjänster, Chattrutor, lägga till Facebook-Pixelkod och till och med Google Analytics. Som ett exempel stöder vi Google Analytics och faktiskt är integrationsprocessen i våra Temalternativ väldigt enkel och enkel, men om du vill spåra olika analyser och på ett annat sätt måste du använda de externa koderna som genereras av Google.
3 sätt att lägga till extern CSS / JavaScript
använda Temaalternativen
om du behöver lägga till andra koder eller lägga till en snabb och liten CSS och Javascript för att anpassa din webbplats är temaalternativ den mer lämpliga lösningen. Det är en inbyggd funktion och är lättillgänglig från din WordPress-instrumentpanel.
gå till Jupiter > temaalternativ > Avancerat > Anpassad CSS eller anpassad JS-sektion.
Observera att när du lägger till extern CSS eller JavaScript i temaalternativ kan du inte lägga till en kod som börjar med <script></script> i Anpassad JS-sektion. Du måste ta bort <script></script> i din kod eftersom koden som du skriver i avsnittet Anpassad JS redan publicerar med en <script></script> tagg.
fördelar:
- bästa sättet att anpassa små saker med CSS och Javascript i Jupiter
- bästa sättet att lägga till små till mellanklass CSS och Javacscript-koder i Jupiter
- ingen installation / installation krävs – det är redan inbyggt!
nackdelar:
- svårare att underhålla och uppdatera
- du kan inte lägga till filer direkt (.css eller .JS filer externt) om du inte vet Ajax kodning.
- du kan inte välja om koden ska tryckas i wp_header eller wp_footer.
använda ett Plugin
Plugins är våra lojala hjälpare när du använder WordPress. Du kan också lägga till dina koder med ett plugin som Infoga Sidhuvud och sidfot. Det är ett bra sätt att lägga till dina koder på din webbplats och det fungerar på samma sätt som vår inbyggda funktion. Det som är bra med detta plugin är att du kan välja om du vill lägga till din kod i sidfoten eller sidhuvudområdet, vilket ibland är avgörande för vissa integrationer.
till skillnad från vår inbyggda lösning kan du lägga till<script></script > taggar i Infoga Sidhuvud och sidfot plugin.
PROS:
- du kan välja koden plats
- bra alternativ till vår inbyggda lösning
- snabbt och enkelt sätt att lägga till Facebook Pixel eller anpassade Google Analytics koder.
- bra sätt för tredjepartsintegrationer
nackdelar:
- behöver plugin installation / setup
- svårt att underhålla och uppdatera
- du kan inte lägga till filer direkt som vår inbyggda lösning.
använda barntema och Enqueqe-stil
använda Barntemat är vad vi rekommenderar om du vill göra några mellanklass till stora anpassningar eftersom det är det säkraste sättet att anpassa din webbplats. Med Barntemat kan du enkelt behålla dina koder och uppdatera dina kärntema-filer.
du kan installera vårt officiella barntema eller så kan du skapa ditt eget. Du kan sedan börja lägga till dina CSS-koder och anpassa din webbplats direkt i utseende > Editor. Men om du vill lägga till externa CSS-filer och Javascript-filer måste du ringa det och skriva några koder i funktioner.php.
så här går det:
- få din CSS-eller Javascript-fil klar eller om det är en fjärrkälla, få länken klar.
- skapa en fil med namnet funktioner.php
- Lägg till följande kod i funktioner.php
<?php
funktion add_theme_codes () {
wp_enqueue_style( ’stil’, get_stylesheet_directory_uri().’/myexternalcode.css’, ’alla’);
}
add_action (’wp_enqueue_scripts’, ’add_theme_codes’ );
?>
med den här koden skapar du en ny åtgärd för ditt stilark och ringer den från katalogen barntema. Låt oss säga att du har en ”anpassad.css ” – fil som måste läggas till på din webbplats.
Lägg till den filen i wp-content/themes / jupiter-child via FTP och skapa sedan en funktion.php-fil. Lägg sedan till koden ovan och ändra ’/myexternalcode.css ’till’ anpassad.css ’ eller vad ditt filnamn är. Slutligen måste du lägga till dina funktioner.php till ditt barn tema också.
här är ett annat exempel, om du inte har en fil men en fjärrkälla måste läggas till:
<?php
funktion add_theme_codes () {
wp_enqueue_style (’stil’, ’ https://code.jquery.com/jquery-3.2.1.js’, ’alla’);
}
add_action (’wp_enqueue_scripts’, ’add_theme_codes’ );
?>
i exemplet ovan använde vi inte get_stylesheet_directory_uri () eftersom källfilen är fjärr. Du kan också ringa olika filer från din server genom att använda länkar som de ovan.
fördelar:
- bäst för alla typer av anpassningar
- bäst för tredje part och komplexa integrationer
- lätt att underhålla och redigera
- du kan lägga till lokala eller fjärrfiler direkt
- en av de säkraste metoderna för uppdateringar
nackdelar:
- behöver lite inställning
- kräver lite kodningskunskap (eller åtminstone borde du vara villig att lära dig)
- inte det snabbaste sättet för små anpassningar
vilken är det bästa alternativet för olika situationer?
om du vill göra snabba ändringar eller anpassningar kommer temaalternativ att vara det bästa alternativet för dig. Men om du vill ha mer flexibilitet och kontroll på din kod och kodplats, och du fortfarande har små till medelstora anpassningar, kommer Insert Headers and Footers att fungera bra för dig.
men om du vill göra stora anpassningar, tredjepartsintegrationer eller om du vill ha en underhållbar utvecklingsmiljö är Barntemat din bästa insats. Om du behöver ytterligare hjälp med att lägga till extern CSS eller Javascript på din webbplats kan du alltid få hjälp av Artbees Care.
