Wil je leren hoe je jQuery-code op WordPress kunt toevoegen? Dus lees verder voor meer informatie.

Ondanks het feit dat WordPress al een tijdje beschikbaar is en de toevoeging van themascripts en plug-ins ook al een tijdje bestaat, is er nog steeds enige verwarring over welke methode te gebruiken. gebruik om scripts toe te voegen op WordPress.

Dus we zullen proberen dingen te verduidelijken.

Aangezien jQuery het meest gebruikte JavaScript-framework is, laten we u zien hoe u het toevoegt aan een thema of a WordPress Plugin.

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

Ga dan terug naar waarom we hier zijn.

Compatibiliteitsmodus JQuery

Voordat we beginnen met het toevoegen van scripts op WordPress, laten we de compatibiliteitsmodus van jQuery verkennen. WordPress wordt geleverd met een kopie van jQuery, die u kunt gebruiken met uw code. Wanneer WordPress jQuery wordt geladen, gebruikt het de compatibiliteitsmodus, een mechanisme om conflicten met andere bibliotheken te voorkomen.

Kijk of hij Moet jQuery worden verwijderd uit uw thema's en plug-ins WordPress ?

Dit betekent dat u het dollarteken niet rechtstreeks kunt gebruiken zoals in andere projecten. Wanneer u jQuery op WordPress schrijft, moet u in plaats daarvan jQuery gebruiken.

Bekijk de onderstaande code om te zien wat ik bedoel:

/ * Normale modus * / $ ('. Hideable'). On ('click', function () {$ (this) .hide ();}) / * Compatibiliteitsmodus * / jQuery ('. Hideable'). On ('klik', functie () {jQuery (this) .hide ();})

Wat u moet weten, is dat u met een paar wijzigingen het dollarteken opnieuw kunt gebruiken. Het gebruik van elke keer dat "jQuery" op al uw code wordt gebruikt, bemoeilijkt het schrijven.

Bekijk de 10 code editors voor ontwikkelaars WordPress

Om het even samen te vatten, als u jQuery kent, is het $ -teken slechts een alias voor jQuery () en vervolgens een alias voor een functie. De basissyntaxis is: $ (Selector) .action () :

• Een dollarteken om jQuery te definiëren
• A (selector) om HTML-elementen te "vinden"
• Een jQuery () -actie die op deze elementen moet worden uitgevoerd

Als u uw script in de voettekst laadt, kunt u uw code in een anonieme functie plaatsen. Hier is hoe het te doen:

(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

Als u uw script aan de header (wat u indien mogelijk moet vermijdenU kunt het verpakken in een functie die wordt uitgevoerd wanneer het document klaar is.

Ontdek het trouwens ook Hoe toe te voegen facilement code op WordPress zonder uw website te breken

jQuery (document) .ready (functie ($) {$ ('. hideable'). on ('klik', functie () {$ (this) .hide ();})});

Hoe koppel je je scripts aan jQuery

Nu u geldige jQuery-code op WordPress kunt schrijven, koppelen we ons werk aan onze website. In WordPress heet het proces ' enqueueing "(staart systeem). Voor een normale HTML-website moeten we de tag gebruikenscript> om scripts toe te voegen.

WordPress kan hetzelfde doen, maar we zullen de speciale functies van WordPress gebruiken om dit te bereiken. Op deze manier beheert WordPress al onze afhankelijkheden voor ons.

Als u aan een thema werkt, kunt u de functie gebruiken wp_enqueue_script () in uw bestand functions.php het dossier. Hier is hoe je het kunt doen:

functie my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

De functie heeft vijf argumenten. De eerste die u kunt gebruiken om naar het script te verwijzen, de tweede is de locatie van het scriptbestand, de derde parameter is een reeks afhankelijkheden.

Ik heb jQuery toegevoegd als afhankelijkheid omdat het script het gebruikt. Als u een script maakt dat afhankelijk is van "mijn-grote-script U moet het toevoegen aan de lijst met afhankelijkheden, zodat WordPress weet welke bestanden het eerst moet laden.

Ontdek ook Hoe laad je JavaScript op WordPress

De vierde parameter is een versienummer en de vijfde stelt WordPress in staat om te weten waar het script moet worden geplaatst. Standaard worden scripts in de koptekst geladen, wat een slechte gewoonte is, omdat het het laden van uw webpagina (Browsers stoppen het laden van alle pagina's, telkens als er een blok is est rencontré). U moet al uw scripts in de voettekst laden, indien mogelijk door de vijfde parameter ' waar .

Hoe een script toevoegen aan het dashboard

U kunt ook scripts toevoegen aan de tableau de bord. De gebruikte functies zijn exact hetzelfde, u hoeft alleen een ' haak "anders. Bekijk het onderstaande voorbeeld eens:

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

In plaats van te gebruiken wp_enqueue_scripts we moeten gebruiken admin_enqueue_scripts, en dat is alles !

Het gebruik van voorwaardelijke tags

Gebruik voorwaardelijke tags zodat u uw scripts alleen laadt als dat nodig is. Dit wordt meestal gebruikt op het dashboard, waar u een script alleen op een specifieke pagina wilt gebruiken. Dit bespaart bandbreedte en verwerkingstijd, wat resulteert in snellere laadtijden voor uw website.

Ontdek ook onze 10 WordPress-plug-ins om de laadsnelheid van uw blog te verbeteren

Kijk maar eens de documentatie admin_enqueue_scripts in de WordPress Codex voor meer informatie.

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. Interactieve wereldkaarten

Interactieve Wereldkaarten is een WordPress Plugin waarmee u zoveel kaarten kunt maken als u wilt, met interactieve en gekleurde markeringen, continenten, landen of regio's.

Het is volledig compatibel met de nieuwe versie van WordPress en Visual Composer. Dankzij deze plug-in kunt u verschillende soorten regio's weergeven, zoals: een kaart van de hele wereld, een continent of een subcontinent (Afrika, Europa, Amerika, Azië, Oceanië en al hun subcontinenten), een land, een land gedeeld door zijn regio's, een staat van de Verenigde Staten, de Verenigde Staten gedeeld door grootstedelijke gebieden, een staat van de Verenigde Staten gedeeld door grootstedelijke gebieden.

Downloaden | demonstratie | web hosting

2. AJAX-contactformulier met tracking

Ce WordPress Plugin Hiermee kunt u eenvoudig contact- of commentaarformulieren toevoegen aan uw WordPress blog. Het wordt geleverd met een instellingenbeheerder die rechtstreeks toegankelijk is via het WordPress-dashboard.

De belangrijkste kenmerken zijn onder meer: ​​a fvoor e-mail, de ondersteuning van CAPTCHA wiskunde op formulieren, maatwerk en configuratie via het WordPress-dashboard, de mogelijkheid van ddefinieer een aangepaste autoresponder, ondersteuning voor aangepaste CSS en meer

Downloaden | demonstratie | web hosting 

3. PayPal-standaard betalingsgateway voor Ninja-formulieren

Met PayPal Standard Gateway for Ninja Forms kunt u formulieren maken die naadloos integreren met de PayPal-betalingsgateway. 

U kunt gepersonaliseerde bestelformulieren maken en betalingen ontvangen met standaard Paypal-accounts. De belangrijkste kenmerken zijn: eenvoudige en snelle integratie, IPN-integratie, de mogelijkheid om de PayPal-gateway op individuele formulieren te activeren / deactiveren, ondersteuning voor regelmatige betalingen, enz.

Downloaden | demonstratie |  web hosting

Andere aanbevolen bronnen

We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.

• Hoe kan ik categorieën en tags effectief op WordPress
• Hoe maak je een responsief mobiel menu op WordPress
• Hoe maak je een WordPress-intranet voor je organisatie
• Hoe maak je een plugin in WordPress installeren

Conclusie

Alstublieft ! Dat is het voor deze tutorial. Ik hoop dat je nu weet hoe je script aan WordPress kunt toevoegen. Aarzel niet om deel de tip met je vrienden op je sociale netwerken.

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 in de tussentijd over uw commentaires en suggesties in de speciale sectie.

...