Dëshironi të gjeni se si të ngarkoni JavaScript në WordPress?

Të gjithë WordPress theme zakonisht përbëhet nga skedarë PHP, HTML, CSS dhe JavaScript. JavaScript është një gjuhë programimi e njohur në mesin e zhvilluesve. WordPress theme. Është një gjuhë që e bën një faqe HTML interaktive dhe gjithashtu mund t'ju lejojë të ndërveproni me serverin.

Të dini se si ta përdorni në faqen tuaj të internetit do të jetë një avantazh i madh.

Në mënyrë që të përdorni JavaScript në të vërtetë, ju duhet të dini se si ta ngarkoni atë në faqen tuaj të internetit.

Por më parë, nëse nuk keni instaluar kurrë WordPress zbuloni Si të instaloj një WordPress blog hapa 7 et Si të kërkoni, instaloni dhe aktivizoni një temë WordPress në blogun tuaj 

Atëherë kthehu pse ne jemi këtu.

Si të ngarkoni skriptet JavaScript në WordPress

Le të bëjmë një hap prapa dhe të hedhim një vështrim të parë se si WordPress ngarkon skriptet dhe stilet. Ju mësuat se kur krijoni skedarët JavaScript, mund t'i shtoni ato në faqen tuaj në seksionin e kokës ose në fund të faqes.

Zbuloni gjithashtu mësimin tonë në Si të compress CSS tuaj, HTML dhe Javascript files

WordPress bën saktësisht të njëjtën gjë, por ju nuk mund t'i hidhni këto etiketa skripti në skedarin e kokës ose në fund të faqes tuaj WordPress theme. WordPress përdor një mekanizëm të zgjuar ngarkimi të quajtur " enqueueing '.

Ky mekanizëm është i nevojshëm për t'i dhënë kuptim varësive. Nëse po shkruani kodin jQuery për temën tuaj WordPress, atëherë vetë më parë duhet të ngarkohet jQuery.

Ju shkruani kodin që mbështetet në një shtojcë jQuery. Në këtë rast, së pari duhet të ngarkohet jQuery, pastaj shtojca e jQuery, pastaj kodi juaj.

Si të "Enqueueing" Skriptet (Shtoni në Queue)

Ju mund të vendosni radhë skriptet në dosjen tuaj të temës WordPress ose në dosjen tuaj plugin WordPress. Këtu është kodi i plotë për të përfshirë një skript që mbështetet në jQuery:

my_theme_scripts e funksionit ()

 wp_enqueue_script ('skenari im ", get_template_directory_uri ().' /js/my-script.js ', varg (' jquery '),' 1.0.0 ', e vërtetë);

}

veprimi i shtimit ('wp_enqueue_scripts', 'my_theme_scripts');

Para së gjithash, një funksion duhet të jetë " i tëri Në WordPress (Përdorimi i grepeve të WordPress). Argumenti i parë i funksionit add_action () i thotë WordPress se ku duhet të vendosen këto shkrime:

• Në hapësirën publike
• Në pult

Nëse përdorni " wp_enqueue_scripts Ata do të ngarkohen në hapësirën publike, nëse përdorni " admin_enqueue_scripts Ata do të ngarkohen në pult.

Në funksionin « add_action Ju mund të përdorni " wp_enqueue_script Për të shtuar skriptet që ju nevojiten. Funksioni merr një parametër të kërkuar dhe katër parametra opsional:

• Parametri i parë është emri i skenarit tuaj. Ju mund të zgjidhni atë që dëshironi, por sigurohuni që të përdorni një emër unik.
• Parametri i dytë duhet të përmbajë vendndodhjen e skedarit në temën tuaj të WordPress ose plugin WordPress.
• Parametri i tretë përmban një varg varësish. Në shembullin e mësipërm thashë që jQuery është një varësi. Të gjitha varësitë ngarkohen para skenarit në fjalë.
• Parametri i katërt është një numër versioni
• Parametri i pestë dhe i fundit tregon nëse doni të ngarkoni skenarin në kokë ose në fund të faqes. Përdorni "true" për të ngarkuar në fund të faqes, ose "false" për të ngarkuar skenarin në kokë (gjithashtu nuk mund ta plotësoni këtë parametër).

outbuildings

WordPress ofron një kopje të jQuery, e cila është arsyeja pse ju mund ta shtoni atë si një varësi pa asnjë sherr. Ekzistojnë një numër skriptesh dhe shtojcash të tjera jQuery që ofron WordPress. Nëse kodi juaj varet nga një prej tyre, nuk keni pse të përdorni një nga kopjet tuaja, thjesht shtojeni atë si një varësi. këtu është një listën e skripteve që WordPress ofron.

Nëse përfshini skripte të shumëfishta të pavarura, mund t'i shtoni ato si varësi pikërisht në të njëjtën mënyrë. Shikoni shembullin më poshtë:

my_theme_scripts e funksionit ()

 wp_enqueue_script ("skenari im bazë", get_template_directory_uri (). '/js/my-base-script.js', vargu ('jquery'), '1.0.0', e vërtetë);

 wp_enqueue_script ("skripti im-zgjatim", get_template_directory_uri (). '/js/my-script-extension.js', varg ("my-script-base ')," 1.0.0', true);

}

veprimi i shtimit ('wp_enqueue_scripts', 'my_theme_scripts');

Meqenëse skripti i parë varet nga jQuery, atëherë skenari tjetër varet edhe nga ai. Kështu që nuk keni nevojë të shtoni jQuery si një varësi për të dy. Kjo e bën më të lehtë menaxhimin e varësisë.

Ngarkimi me kusht

Ndonjëherë do të dëshironi të përdorni skriptin tuaj në çdo faqe, por shpesh herë do të dëshironi të ngarkoni një skenar në një faqe specifike. Kjo është veçanërisht e vërtetë kur merret parasysh shtimi i skenareve në pult. Një shembull i mirë është përdorimi i kodeve të shkurtra. Kodet e shkurtra lejojnë përdoruesit të krijojnë shfaqje të përparuara në redaktuesin e tekstit vizual duke përdorur disa truket e thjeshta.

my_theme_scripts e funksionit ()

 wp_register_script ('skenari im', get_template_directory_uri (). '/js/my-script.js', varg ('jquery'), '1.0.0', e vërtetë);

 wp_enqueue_script ('skenari im');

}

veprimi i shtimit ('wp_enqueue_scripts', 'my_theme_scripts');

Ne e kemi ruajtur skenarin në mënyrë që WordPress të mësojë për skenarin, por ne përdorim " enqueue ". Në këtë mënyrë, skripti shtohet vetëm në faqe nëse kodi i shkurtër është përdorur në këtë faqe.

Një metodë tjetër e ngarkimit të skripteve me kushte është përdorimi i funksioneve të kushtëzuara. Nëse dëshironi të ngarkoni një skenar në të gjitha faqet e arkivit të kategorisë, mund të përdorni funksionin is_category ().

Për shembull, mund të krijoni një karusel me imazhe që përdoruesit mund t'i shtojnë artikullit si kjo: [idetë e karuselit = '42,124,123,331,90, XNUMX]. Një karusel do të krijohet në faqen e artikullit duke përdorur imazhet e përcaktuara nga ID-të e tyre.

Për ta bërë këtë, duhet të krijoni një skedar " carousel.js E cila bazohet në jQuery. Këtu keni një kod për të arritur atje (Ai nuk krijon një karusel, por ju lejon të shihni se si ndodh procesi i ngarkimit):

veprimi i shtimit ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts e funksionit ()

 wp_register_script ('karuseli im', get_template_directory_uri (). '/js/my-carousel.js', vargu ('jquery'), '1.0.0', e vërtetë);

}

shtoni kodin e shkurtër ('karuseli', 'karuseli im');

funksioni my_carousel ($ argument) {

 $ atts = kodi i shkurtë_at (grupi (

 'Ids' => ",

 ), $ Atts, 'carousel');

 wp_enqueue_script ('karuseli im');

 // Kodi për të shfaqur karuselin këtu

}

Heqja dhe zëvendësimi i skripteve

Ky është deri tani një skenar i zakonshëm, por ndonjëherë ju duhet të hiqni ose zëvendësoni një skenar. Unë rashë në situata kur një skenar i shtuar nga një shtojcë (por nuk përdoret nga tema) shkaktoi çështje të pajtueshmërisë. "Tërheqja" ishte opsioni më i mirë, pasi gabimi u zhduk plotësisht.

Ju gjithashtu mund të zëvendësoni jQuery me një version më të ri nëse jeni duke testuar diçka për t'u siguruar që do të jetë i pajtueshëm me versionet e reja.

Në këto situata funksionet wp_deregister_script () "Dhe" wp_dequeue_script () Janë të dobishëm. Ja se si të redaktoni kodin e shtuar tashmë në WordPress.

my_theme_scripts e funksionit ()

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', varg (), '3.0.0', e vërtetë);

 wp_enqueue_script ('skenari im', get_template_directory_uri (). '/js/my-script.js', varg ('jquery'), '1.0.0', e vërtetë);

}

veprimi i shtimit ('wp_enqueue_scripts', 'my_theme_scripts');

Mendimet përfundimtare

Kjo metodë e ngarkimit në WordPress është e shkëlqyeshme sepse ju lejon të shtoni skriptet tuaja në një mënyrë modulare. Kjo do t'ju lejojë të siguroheni që varësitë të shtohen në një mënyrë modulare.

Zbuloni gjithashtu disa shtesa premium WordPress  

Mund të përdorni të tjera WordPress plugins për të dhënë një pamje moderne dhe për të optimizuar trajtimin e blogut ose faqes tuaj të internetit.

Ne ju ofrojmë këtu disa shtesa premium WordPress që do t'ju ndihmojnë ta bëni atë.

1. Premium SEO Pack

Paketa Premium SEO është një plugin WordPress i cili optimizon SEO-në tuaj dhe kompreson CSS për të përmirësuar shpejtësinë e ngarkimit të faqes tuaj të internetit.

Shtojca ju lejon gjithashtu të menaxhoni dizajnin e faqes suaj të internetit në disa klikime. Funksionalitetet e tij janë ndër të tjera: compression CSS dhe JS, integrimi i faqes së faqes video dhe copëza, formatimi i skedarëve HTML dhe XML, ridrejtimi i faqeve 404 dhe 301, ndarja në rrjetet sociale, sigurimi i 'Etiketa ALT, paraqitje mjaft e personalizueshme

Shkarko | DEMO | web hosting

2. Woocommerce dorëzimit Time Picker për Shipping

Zgjedhësi i Kohës së Dorëzimit të Woocommerce për Transport është një shtesë e WooCommerce që u lejon klientëve të zgjedhin datën dhe orën e dorëzimit në faqen e arkëve. 

Konsumatorët do të jenë në gjendje të zgjedhin kohën e dorëzimit të paketës në shtëpi. Koha e dorëzimit do të jetë e dukshme për administratorët e faqes në internet dhe gjithashtu do të dërgohet me e-mail për administratorët e faqes në internet ose dyqan online.

Shkarko | DEMO | web hosting

3. Menyja e Heroit

Kjo shtojcë ju lejon të krijoni menunë tuaj të personalizuar WordPress në disa hapa mjaft të lehtë. Në veçanti, kjo ju lejon të krijoni lehtësisht dhe intuitivisht një menu elegante dhe profesionale të WordPress. 

Nga menuja më komplekse mega plot me karakteristika, deri tek menyja më e thjeshtë me menunë rënëse, plugin WordPress HeroMenu vendos çdo lloj menuje dhe e funksionon atë brenda disa minutave.

Për sa i përket karakteristikave, ai ofron ndër të tjera: funksionim perfekt në PC, tablet dhe smartphone, nga Custom CSS për të shtuar stilet tuaja në menunë, një ndërtues megamenu, disa shfletues të mbështetur: Chrome, Firefox, Safari, Opera, IE9 dhe më shumë.

Shkarko | DEMO | web hosting

Burimet e rekomanduara

Shikoni burime të tjera të rekomanduara që do t'ju ndihmojnë të zgjidhni gabime të tjera të zakonshme WordPress. 

• Si për të rregulluar gabimet redirection në WordPress
• Si për të krijuar një plan urbanistik me porosi me Elementor
• Si të krijoni një intranet WordPress për organizatën tuaj
• Si të krijoni një faqe hyrëse në WordPress

Përfundim

Ketu eshte ! Kjo është e gjitha për këtë manual, shpresoj se ju ka ndihmuar të kuptoni se si të ngarkoni JavaScript në WordPress. Mos hezitoni ta ndani atë me miqtë tuaj në tuaj rrjetet sociale preferuar. 

Megjithatë, gjithashtu do të jeni në gjendje të konsultoheni me ne RESSOURCES, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress.

Por ndërkohë na tregoni për tuajin komente dhe sugjerime në pjesën e dedikuar.

...