Wilt u weten hoe u JavaScript op WordPress laadt?

Alle WordPress theme is meestal samengesteld uit PHP-, HTML-, CSS- en JavaScript-bestanden. JavaScript is een populaire programmeertaal onder ontwikkelaars. WordPress theme. Het is een taal die een HTML-pagina interactief maakt en waarmee u ook met de server kunt communiceren.

Weten hoe u het op uw website moet gebruiken, zal een enorm voordeel zijn.

Om JavaScript daadwerkelijk te gebruiken, moet u weten hoe u het op uw website kunt laden.

Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Ga dan terug naar waarom we hier zijn.

Hoe laad je JavaScript scripts op WordPress

Laten we een stap terug doen en eerst kijken hoe WordPress scripts en stijlen laadt. U hebt geleerd dat u bij het maken van de JavaScript-bestanden deze aan uw pagina kunt toevoegen in de koptekst of aan de voettekst.

Ontdek ook onze tutorial over Hoe u uw CSS-, HTML- en Javascript-bestanden comprimeert

WordPress doet precies hetzelfde, maar u kunt deze scripttags niet zomaar in het headerbestand of de voettekst van uw bestand plaatsen WordPress theme. WordPress gebruikt een slim laadmechanisme genaamd “ enqueueing .

Dit mechanisme is nodig om afhankelijkheden betekenis te geven. Als u jQuery-code schrijft voor uw WordPress-thema, moet jQuery zelf eerst worden geladen.

U schrijft code die afhankelijk is van een jQuery-plug-in. In dit geval moet eerst jQuery worden geladen, vervolgens de plug-in jQuery en vervolgens uw code.

Scripts "in wachtrij plaatsen" (toevoegen aan wachtrij)

U kunt scripts in de wachtrij plaatsen in uw WordPress-themamap of uw WordPress Plugin. Hier is de volledige code om een ​​script op te nemen dat afhankelijk is van jQuery:

my_theme_scripts of function () {

 wp_enqueue_script ('mijn-script ", get_template_directory_uri ().' /js/my-script.js ', array (' jquery '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Allereerst moet een functie zijn " verslaafd Op WordPress (WordPress Hooks gebruiken). Het eerste argument van de functie add_action () vertelt WordPress waar deze scripts moeten worden geplaatst:

• Op de openbare ruimte
• Op het dashboard

Als u ' wp_enqueue_scripts Ze worden in de openbare ruimte geladen, als u ' admin_enqueue_scripts Ze worden op het dashboard geladen.

In de functie « add_action U kunt ' wp_enqueue_script Om de benodigde scripts toe te voegen. De functie heeft een vereiste parameter en vier optionele parameters:

• De eerste parameter is de naam van uw script. U kunt kiezen wat u wilt, maar zorg ervoor dat u een unieke naam gebruikt.
• De tweede parameter moet de locatie van het bestand op uw WordPress-thema bevatten of WordPress Plugin.
• De derde parameter bevat een reeks afhankelijkheden. In het bovenstaande voorbeeld zei ik dat jQuery een afhankelijkheid is. Alle afhankelijkheden worden vóór het betreffende script geladen.
• De vierde parameter is een versienummer
• De vijfde en laatste parameter geeft aan of u het script in de kop- of voettekst wilt laden. Gebruik "true" om in de footer te laden, of "false" om het script in de header te laden (u kunt deze parameter ook niet invullen).

de Bijgebouwen

WordPress biedt een kopie van jQuery, daarom kun je het zonder enige moeite als afhankelijkheid toevoegen. Er zijn een aantal andere jQuery-scripts en plug-ins die WordPress aanbiedt. Als uw code afhankelijk is van een van hen, hoeft u geen van uw kopieën te gebruiken, u voegt deze gewoon toe als afhankelijkheid. hier is een lijst met scripts die WordPress biedt.

Als u meerdere scripts opneemt die onafhankelijk van elkaar zijn, kunt u deze op precies dezelfde manier als afhankelijkheden toevoegen. Bekijk het onderstaande voorbeeld eens:

my_theme_scripts of function () {

 wp_enqueue_script ("mijn-basisscript", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ("mijn-script-extensie", get_template_directory_uri (). '/js/my-script-extension.js', array ("mijn-script-basis '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Omdat het eerste script afhankelijk is van jQuery, hangt het volgende script er ook van af. U hoeft dus niet jQuery toe te voegen als een afhankelijkheid voor beide. Dit maakt afhankelijkheidsbeheer eenvoudiger.

Voorwaardelijke laden

Soms wilt u uw script op elke pagina gebruiken, maar vaak wilt u een script op een specifieke pagina laden. Dit geldt met name wanneer u overweegt scripts aan het dashboard toe te voegen. Een goed voorbeeld is het gebruik van shortcodes. Met shortcodes kunnen gebruikers geavanceerde weergaven maken in de visuele teksteditor met een paar eenvoudige trucs.

my_theme_scripts of function () {

 wp_register_script ('mijn-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ('mijn-script');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

We hebben het script opgeslagen zodat WordPress meer te weten komt over het script, maar we gebruiken de " enqueue ". Op deze manier wordt het script alleen aan de pagina toegevoegd als de shortcode op deze pagina wordt gebruikt.

Een andere methode om scripts met voorwaarden te laden, is het gebruik van voorwaardelijke functies. Als u een script op alle archiefpagina's van de categorie wilt laden, kunt u de functie gebruiken is_category ().

U kunt bijvoorbeeld een carrousel met afbeeldingen maken die gebruikers als volgt aan het artikel kunnen toevoegen: [carrousel ids = '42,124,123,331,90, XNUMX ′]. Er wordt een carrousel gemaakt op de artikelpagina met behulp van de afbeeldingen die worden aangeduid met hun ID's.

Om dit te doen, moet u een bestand maken " carousel.js Die is gebaseerd op jQuery. Hier is een code om er te komen (het creëert geen carrousel, maar laat je zien hoe het laadproces gebeurt):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('mijn-carrousel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', true);

}

add_shortcode ('carousel', 'my_carousel');

my_carousel-functie ($ args) {

 $ atts = shortcode_atts (array (

 'Ids' => ",

 ), $ Atts, 'carrousel');

 wp_enqueue_script ('mijn-carrousel');

 // Code om de carrousel hier weer te geven

}

Scripts verwijderen en vervangen

Dit is veruit een veel voorkomend scenario, maar soms moet u een script verwijderen of vervangen. Ik raakte in situaties waarin een script werd toegevoegd door een plug-in (maar niet gebruikt door het thema) veroorzaakte compatibiliteitsproblemen. "Intrekking" was de beste optie, aangezien de fout volledig verdween.

U kunt jQuery ook vervangen door een nieuwere versie als u iets test om er zeker van te zijn dat het compatibel is met nieuwere versies.

In deze situaties de functies wp_deregister_script () "En" wp_dequeue_script () Zijn nuttig. Hier leest u hoe u code kunt bewerken die al is toegevoegd op WordPress.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

 wp_enqueue_script ('mijn-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

laatste gedachten

Deze methode van uploaden naar WordPress is geweldig omdat je hiermee je scripts modulair kunt toevoegen. Hiermee kunt u ervoor zorgen dat afhankelijkheden modulair worden toegevoegd.

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. Premium SEO-pakket

Premium SEO-pakket is een WordPress Plugin die uw SEO optimaliseert en CSS comprimeert om de laadsnelheid van uw website te verbeteren.

Met de plug-in kunt u ook het ontwerp van uw website met een paar klikken beheren. De functionaliteiten zijn onder meer: ​​CSS- en JS-compressie, video- en snippet-sitemapintegratie, opmaak van HTML- en XML-bestanden, omleiding van 404- en 301-pagina's, delen op sociale netwerken, aanbieden van 'ALT-label, zeer aanpasbare lay-out

Downloaden | demonstratie | web hosting

2. Woocommerce Delivery Picker voor verzending

Woocommerce Delivery Time Picker for Shipping is een WooCommerce-extensie waarmee klanten de leverdatum en -tijd op de afrekenpagina kunnen kiezen. 

Klanten kunnen thuis de levertijd van het pakket selecteren. De levertijd is zichtbaar voor de beheerders van de website en deze wordt ook per e-mail verzonden naar de beheerders van de website of de online winkel.

Downloaden | demonstratie | web hosting

3. Held Menu

Met deze plug-in kun je in een paar redelijk eenvoudige stappen je eigen aangepaste WordPress-menu maken. In het bijzonder stelt het u in staat om eenvoudig en intuïtief een elegant en professioneel WordPress-menu te maken. 

Van het meest complexe megamenu vol functies tot het eenvoudigste menu met vervolgkeuzemenu, de WordPress-plug-in HeroMenu stelt elk type menu samen en zorgt ervoor dat het binnen enkele minuten operationeel is.

Qua functies biedt het onder andere: perfecte werking op pc, tablet en smartphone, vanaf Aangepaste CSS om je eigen stijlen aan het menu toe te voegen, een megamenu-builder, verschillende ondersteunde browsers: Chrome, Firefox, Safari, Opera, IE9 en meer.

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Bekijk andere aanbevolen bronnen die u kunnen helpen bij het oplossen van andere veelvoorkomende WordPress-fouten. 

• Hoe omrectionele fouten op WordPress op te lossen
• Hoe u een aangepaste lay-out met Elementor creëren
• Hoe maak je een WordPress-intranet voor je organisatie
• Hoe kan ik een login pagina op WordPress maken

Conclusie

Alstublieft ! Dat is het voor deze tutorial, ik hoop dat het je heeft geholpen te begrijpen hoe je JavaScript op WordPress kunt laden. Aarzel niet om het met je vrienden te delen op je sociale mediakanalen de voorkeur. 

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Maar vertel ons ondertussen over uw commentaires en suggesties in de speciale sectie.

...