WordPress ka qenë pjesë e jetës tonë për mbi 16 vjet, por metoda e shtimit të skripteve në tema dhe shtojca mbetet një mister për shumë zhvillues. Në këtë artikull, më në fund i kemi dhënë fund konfuzionit.
Meqenëse është një nga bibliotekat JavaScript më të përdorura, sot po diskutojmë se si të shtoni skriptet jQuery në temat tuaja ose WordPress plugins.
Rreth modalitetit të pajtueshmërisë jQuery
Para se të filloni të shtoni skriptet në WordPress, është e rëndësishme të kuptoni mënyrën e përputhshmërisë së jQuery.
Siç e dini, WordPress vjen me jQuery të përfshirë tashmë.
Versioni i jQuery në WordPress gjithashtu ka një " mënyra e pajtueshmërisë Cili është një mekanizëm për të shmangur konfliktet me bibliotekat e tjera javascript.
Një pjesë e këtij mekanizmi mbrojtës do të thotë që ju ne pouvez pas përdorni $nënshkruani direkt siç do të bënit në projekte të tjera.
Në vend të kësaj, kur shkruani kodin jQuery për WordPress, duhet të përdorni jQuery.
Këtu është një shembull i këtij kodi:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Problemi është, të shkruash jQuery një milion herë kërkon më shumë kohë, e bën më të vështirë leximin dhe mund të rëndojë skenarin tënd.
Lajmi i mire?
Me disa modifikime, ju përsëri mund të përdorni simbolin tonë të lezetshëm të vogël.
Nga rruga, nëse jeni e re për jQuery , shenja $ është vetëm një emër për jQuery (), atëherë një pseudonim për një funksion.
Struktura themelore duket si kjo: $(selector).action(). Shenja e dollarit përcakton jQuery qu pyetjet “(përzgjedhësi)” ose gjen elemente HTML… dhe së fundmi “veprimi jQuery ()” është veprimi që duhet të kryhet në elemente.
Kthehu tek mënyra se si ne mund të punojmë rreth problemit tonë të pajtueshmërisë ... këtu janë disa mundësi të vlefshme:
1. Futni modalitetin vjedhurazi jQuery
Mënyra e parë për të marrë rreth modalitetit të pajtueshmërisë është të vidhosni në kod.
Për shembull, nëse ngarkoni skenarin tuaj në footer, mund ta përfundoni kodin tuaj në një funksion anonim, i cili do të hartësojë jQuery $.
Si në shembullin më poshtë:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Nëse dëshironi të shtoni skriptin tuaj në kokë (të cilën duhet ta shmangni nëse është e mundur, më shumë për më poshtë), mund të mbështillni gjithçka në një funksion të gatshëm për dokumente, duke kaluar $gjatë rrugës.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Vendosni modalitetin "Pa konflikt"
Një mënyrë tjetër e thjeshtë për të shmangur drejtshkrimin e jQuery është kalimi në modalitet "Konflikti falas" dhe përdorni një shkurtore të ndryshme.
Në këtë rast: $jnë vend të paracaktuar $.
E tëra çfarë ju duhet të bëni është ta deklaroni atë në krye të skenarit tuaj:var $j = jQuery.noConflict();
Mirë, tani dini më shumë rreth shkrimit të kodit të vlefshëm jQuery për WordPress, le ta shtojmë atë në faqen tonë Site Web.
Si të shtoni skriptet jQuery në WordPress
Një nga mënyrat më të lehta për të shtuar skriptet e jQuery në WordPress është përmes një procesi të quajtur 'vendosja' vija e pritjes '.
Hidh un Site Web HTML klasike, ne do të përdorim <link> artikull për të shtuar skripte. WordPress përfundon duke bërë të njëjtën gjë, por ne do të përdorim funksione të veçanta WP për ta arritur këtë.
Në këtë mënyrë, ai menaxhon të gjitha varësitë tona për ne (faleminderit WP!).
Nëse jeni duke punuar në një temë, mund të përdorni funksionin wp_enqueue_script() në tuaj functions.php file.
Ja si duket:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
Ky funksion merr pesë argumente:
- $ handle - një dorezë unike që mund ta përdorni për t'iu referuar skenarit.
- $src – vendndodhja e skedarit të skriptit.
- $ deps - specifikon një varg varësish.
- $ ver - numri i versionit të skenarit tuaj.
- $ in_footer - lejon WordPress të dijë se ku ta vendosë skenarin.
* Një gjë për tu shënuar $in_footer do të thotë që skriptet e parazgjedhura do të ngarkohen në kokë.
Kjo është praktikë e keqe dhe mund të ngadalësojë faqen tuaj në mënyrë të konsiderueshme. Prandaj, nëse doni ta vendosni skenarin tuaj në fund të faqes, sigurohuni që ky parametër të jetë vendosur i vërtetë.
Shtimi i skripteve në administratorin WordPress
Ju gjithashtu mund të shtoni skripta në administrator. Funksionet e përdorura janë saktësisht të njëjta, thjesht duhet të përdorni një fiksim tjetër.
Për shembull:
funksionojnë my_admin_scripts ()
wp_enqueue_script ('skenari im i shkëlqyeshëm', plugin_dir_url (__Foto__). '/js/my-great-script.js', vargu ('jquery'), '1.0.0', e vërtetë);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
Në vend që të regjistroheni, wp_enqueue_scriptsduhet ta përdorim admin_enqueue_scripts.
Si të çregjistroheni jQuery nga WordPress
Po sikur të doni të përdorni një version tjetër të jQuery sesa ai i ngarkuar nga WordPress?
Mund ta vendosni në radhë ... por kjo do të thotë se do të ketë dy versione të jQuery në faqe.
Për të shmangur këtë, duhet të çregjistrojmë versionin e WP.
Ja si duket:
// përfshin jQuery me porosi
funksioni formaSpace_include_custom_jquery () {
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');Asshtë aq e lehtë sa përdorimi i wp_deregister_script () për unregister jQuery nga WP, pastaj duke përfshirë skenarin jQuery që dëshironi të shtoni.
Në shembullin e mësipërm, ne përdorëm biblioteka jQuery e pritur nga Google , por padyshim që do ta zëvendësoni atë me URL-në e shkrimit tuaj.
A nuk duhet të ruani skriptet para se t’i vini në radhë?
Nëse dëshironi të ngarkoni skriptet tuaja sipas nevojës në vend që t'i ngarkoni ato direkt në faqet tuaja - ju mund ta ruani skenarin më herët.
Për shembull, në wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Pasi ta keni bërë këtë, atëherë mund të radhitni skriptet kur t’iu duhen:
| veprimi i shtimit ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Mos harroni të përdorni të njëjtët emra për të shmangur përplasjen me shkrimet e tjera.
Përdorimi i etiketave të kushtëzuara
Përdorni etiketat e kushtëzuara për të ngarkuar skriptet tuaja vetëm kur është e nevojshme.
Kjo përdoret më shpesh në admin, ku dëshironi të përdorni një skript vetëm në një faqe specifike (dhe jo në të gjithë administratorin). Ai gjithashtu kursen gjerësinë e brezit dhe kohën e përpunimit, që do të thotë kohë më të shpejta të ngarkimit për ju Site Web.
Shikoni në dokumentimi i skripteve në radhë në Codex të WordPress për më shumë informacion.
Shtoni jQuery në WordPress duke përdorur shtojca
Drejtoria e shtojcave WP përmban gjithashtu shumë shtojca interesante që mund t'i përdorni për të futur skriptet në postimet, faqet ose Temat e WordPress.
Këtu janë disa shembuj të shtojcave të njohura JavaScript / jQuery: fushat e përparuara me porosi , CSS dhe JS me porosi të thjeshta , stilet e shkrimit n et pastrimi i burimeve.
Krijoni projektin tuaj jQuery
Një kuptim më i mirë i jQuery do ta bëjë punën tuaj më me ndikim. Qoftë për uebfaqen tuaj, qoftë për projektet e klientëve.
jQuery është i njohur mirë për thjeshtësinë e tij, dhe siç e mësuat (me shpresë) në këtë artikull, shtimi i skripteve të thjeshta të jQuery në WordPress është i thjeshtë si byrek pasi të dini se si.
Po, ka pak lartësi në krahasim me përdorimin e HTML të vaniljes, por ekziston edhe përfitimi i shtuar i menaxhimit të varësisë dhe qartësisë.
Jo vetëm kaq, duke përdorur truket e vogla si anashkalimi i pajtueshmërisë së paracaktuar të jQuery WP, ju do t'i kurseni vetes shumë kohë, përpjekje dhe kod të fryrë.
