het is een beetje lastig om te bepalen hoe externe CSS of Javascript toe te voegen aan WordPress als je gewoon een beginner WP gebruiker. Dus voordat we beginnen met een aantal instructies te geven over het toevoegen van externe CSS / Javascript aan uw website, Ik wil graag de twee belangrijkste gebieden waar je nodig zou kunnen hebben om externe CSS gebruiken:
1) Websiteaanpassingen
het gebruik van externe CSS en Javascript is een geweldige keuze voor het aanpassen van uw website, omdat u de code gemakkelijk kunt onderhouden, bewerken en bewaren van de bestanden en/of codes. Echter, we moeten deze aanpassingen te splitsen naar twee belangrijke types-mini aanpassingen en grotere aanpassingen. Ik ga later terug naar die types en leg uit welke manieren van het toevoegen van CSS / JS codes beter zal zijn voor verschillende situaties.
2) Dienstintegraties van derden
zoals we allemaal weten, bieden sommige diensten CSS-en JS-bestanden aan die aan uw website moeten worden toegevoegd, zoals Formulierdiensten, chatboxen, het toevoegen van Facebook-pixelcode en zelfs Google Analytics. Als voorbeeld, we ondersteunen Google Analytics en eigenlijk is het integratieproces in onze thema-opties is zeer eenvoudig en eenvoudig, maar als je wilt volgen een aantal verschillende analytics en op een andere manier, moet je de externe codes die gegenereerd door Google te gebruiken.
3 manieren om externe CSS / JavaScript
toe te voegen met behulp van de thema-opties
Als u andere codes wilt toevoegen of een snelle en Kleine css en Javascript wilt toevoegen om uw website aan te passen, is thema-opties de meest geschikte oplossing. Het is een ingebouwde functie en is gemakkelijk toegankelijk vanaf uw WordPress dashboard.
Ga naar Jupiter > Themaopties > Geavanceerd > Aangepaste CSS-of aangepaste js-sectie.
merk op dat bij het toevoegen van externe CSS of JavaScript in thema-opties, u geen code kunt toevoegen die begint met <script></script> in aangepaste js sectie. U moet het <script></script> in uw code verwijderen omdat de code die u schrijft in de aangepaste js-sectie al wordt gepubliceerd met een <script></script> tag.
PROS:
- beste manier om kleine dingen aan te passen met CSS en Javascript in Jupiter
- beste manier om kleine tot mid-range CSS en Javacscript codes toe te voegen in Jupiter
- geen setup / installatie vereist – het is al ingebouwd!
CONS:
- moeilijker te onderhouden en bij te werken
- u kunt geen bestanden direct toevoegen (.css of .JS-bestanden extern) tenzij u Ajax codering kent.
- u kunt niet selecteren of de code wordt gepusht in wp_header of wp_footer.
het gebruik van een Plugin
Plugins zijn onze trouwe helpers tijdens het gebruik van WordPress. U kunt uw codes ook toevoegen met een plugin zoals Headers en voetteksten invoegen. Het is een geweldige manier om uw codes toe te voegen aan uw website en het werkt op dezelfde manier als onze ingebouwde functie. Het goede ding met deze plugin, is dat u kunt selecteren of u wilt uw code toe te voegen aan de voettekst of de koptekst gebied, die soms cruciaal is voor sommige integraties.
in tegenstelling tot onze ingebouwde oplossing kunt u <script></script> tags toevoegen in de plugin kop-en voetteksten invoegen.
voors:
- u kunt de code Locatie
- geweldig alternatief voor onze ingebouwde oplossing
- snelle en eenvoudige manier om Facebook Pixel of aangepaste Google Analytics codes toe te voegen.
- geweldige manier voor integraties van derden
CONS:
- heeft plugin installatie / setup
- moeilijk te onderhouden en bij te werken
- u kunt geen bestanden direct toevoegen zoals onze ingebouwde oplossing.
het gebruik van Child Theme en Enqueqe Style
het gebruik van het Child Theme is wat we aanraden als u een aantal mid-range tot grote maat aanpassingen wilt maken omdat het de veiligste manier is om uw website aan te passen. Met het kind thema, zult u in staat zijn om uw codes te onderhouden en update uw core thema bestanden gemakkelijk.
u kunt ons officiële kinderthema installeren of u kunt uw eigen thema maken. U kunt dan beginnen met het toevoegen van uw CSS-codes en aanpassen van uw website meteen in uiterlijk > Editor. Als u echter externe CSS-bestanden en Javascripts-bestanden wilt toevoegen, moet u het aanroepen en een aantal codes in functies schrijven.php.
zo gaat het:
- krijg je CSS of Javascript bestand klaar of als het een externe bron, krijg de link klaar.
- Maak een bestand met de naam functies aan.php
- voeg de volgende code toe in functies.php
<?php
function add_theme_codes () {
wp_enqueue_style (‘style’, get_stylesheet_directory_uri ().”/mijn externe code.css’, ‘all’);
}
add_action (‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
met deze code maakt u een nieuwe actie voor uw typogram en roept u deze aan vanuit de map child-theme. Laten we zeggen dat je een gewoonte hebt.css ” bestand dat moet worden toegevoegd aan uw website.
Voeg dat bestand toe in wp-content/themes / jupiter-child via FTP, en maak vervolgens een functie aan.php bestand. Voeg dan de bovenstaande code toe en wijzig de ‘ / myexternalcode.css ‘naar’ custom.css ‘ of wat uw bestandsnaam is. Tot slot, je moet je functies toe te voegen.php om uw kind thema te.
hier is een ander voorbeeld, Als u geen bestand hebt maar een bron op afstand moet worden toegevoegd:
<?php
function 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’ );
?>
in het voorbeeld hierboven hebben we get_stylesheet_directory_uri() niet gebruikt omdat het bronbestand remote is. Ook kunt u verschillende bestanden van uw server bellen met behulp van links zoals hierboven.
PROS:
- beste voor allerlei aanpassingen
- beste voor derden en complexe integraties
- gemakkelijk te onderhouden en te bewerken
- u kunt direct lokale of externe bestanden toevoegen
- een van de veiligste methoden voor updates
CONS:
- vereist een beetje kennis van programmeren (of u zou tenminste bereid moeten zijn om te leren)
- niet de snelste manier voor kleine aanpassingen
welke is de beste optie voor verschillende situaties?
als u snel wijzigingen of aanpassingen wilt maken, zijn thema-opties de beste optie voor u. Echter, als u meer flexibiliteit en controle op uw code en code locatie wilt, en je hebt nog steeds kleine tot mid-range aanpassingen, invoegen Headers en voetteksten zal goed werken voor u.
maar als u grote aanpassingen wilt maken, integraties van derden, of als u een onderhoudbare ontwikkelomgeving wilt hebben, is het kindthema uw beste keuze. Als u verdere hulp nodig heeft bij het toevoegen van externe CSS of Javascript aan uw website, kunt u altijd de hulp inroepen van Artbees Care.
