Vil du finde ud af, hvordan du indlæser JavaScript på WordPress?

Alle WordPress tema er normalt sammensat af PHP-, HTML-, CSS- og JavaScript-filer. JavaScript er et populært programmeringssprog blandt udviklere. WordPress tema. Det er et sprog, der gør en HTML-side interaktiv og kan også give dig mulighed for at interagere med serveren.

At vide, hvordan man bruger det på dit websted, vil være en enorm fordel.

For faktisk at bruge JavaScript skal du vide, hvordan du indlæser det på dit websted.

Men før, hvis du aldrig har installeret WordPress-opdagelse Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog 

Så tilbage til, hvorfor vi er her.

Sådan lægges JavaScript-scripts på WordPress

Lad os tage et skridt tilbage og tage et første kig på, hvordan WordPress indlæser scripts og stilarter. Du lærte, at når du opretter JavaScript-filerne, kan du føje dem til din side i sidehovedet eller i sidefoden.

Oplev også vores tutorial om Sådan komprimerer du CSS, HTML og Javascript-filer

WordPress gør nøjagtig det samme, men du kan ikke bare slippe disse script-tags i sidehovedfilen eller sidefoden på din WordPress tema. WordPress bruger en smart indlæsningsmekanisme kaldet " enqueueing '.

Denne mekanisme er nødvendig for at give afhængighed mening. Hvis du skriver jQuery-kode til dit WordPress-tema, skal jQuery selv indlæses først.

Du skriver kode, der er afhængig af et jQuery-plugin. I dette tilfælde skal jQuery først indlæses, derefter jQuery-pluginet og derefter din kode.

Sådan "anmærker" manuskripter (Tilføj til kø)

Du kan sætte scripts i kø i din WordPress-temamappe eller din WordPress plugin. Her er den komplette kode til at inkludere et script, der er afhængigt af jQuery:

my_theme_scripts of function () {

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

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Først og fremmest skal en funktion være " hooked På WordPress (Brug af WordPress kroge). Funktionens første argument ADD_ACTION () fortæller WordPress, hvor disse scripts skal placeres:

• På det offentlige rum
• På instrumentbrættet

Hvis du bruger " wp_enqueue_scripts De indlæses i det offentlige rum, hvis du bruger " admin_enqueue_scripts De indlæses på instrumentbrættet.

I funktionen « ADD_ACTION Du kan bruge " wp_enqueue_script For at tilføje de scripts, du har brug for. Funktionen tager en krævet parameter og fire valgfrie parametre:

• Den første parameter er navnet på dit script. Du kan vælge, hvad du vil have, men husk at bruge et unikt navn.
• Den anden parameter skal indeholde placeringen af ​​filen på dit WordPress-tema eller WordPress plugin.
• Den tredje parameter indeholder en række afhængigheder. I eksemplet ovenfor sagde jeg jQuery er en afhængighed. Alle afhængigheder indlæses før det pågældende script.
• Den fjerde parameter er et versionnummer
• Den femte og sidste parameter angiver, om du vil indlæse scriptet i sidehovedet eller sidefoden. Brug "sand" til at indlæse i sidefoden, eller "falsk" for at indlæse scriptet i overskriften (du kan heller ikke udfylde denne parameter).

de Tilbygninger

WordPress tilbyder en kopi af jQuery, hvorfor du kan tilføje det som en afhængighed uden besvær. Der er et stort antal andre jQuery-scripts og plugins, som WordPress tilbyder. Hvis din kode afhænger af en af ​​dem, behøver du ikke bruge en af ​​dine kopier, bare tilføj den som en afhængighed. her er en liste over scripts, som WordPress tilbyder.

Hvis du inkluderer flere uafhængige scripts, kan du tilføje dem som afhængigheder på nøjagtig samme måde. Se eksemplet nedenfor:

my_theme_scripts of function () {

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

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

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Da det første script afhænger af jQuery, afhænger det næste script også af det. Så du behøver ikke at tilføje jQuery som en afhængighed for begge. Dette gør afhængighedsstyring lettere.

Betinget indlæsning

Nogle gange vil du gerne bruge dit script på hver side, men ofte vil du gerne indlæse et script på en bestemt side. Dette gælder især når man overvejer at tilføje scripts til instrumentbrættet. Et godt eksempel er brugen af ​​kortkoder. Kortkoder giver brugerne mulighed for at oprette avancerede skærme i den visuelle teksteditor ved hjælp af et par enkle tricks.

my_theme_scripts of function () {

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

 wp_enqueue_script ('mit-script');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Vi har gemt scriptet, så WordPress lærer om scriptet, men vi bruger " enqueue ". På denne måde føjes scriptet kun til siden, hvis kortkoden bruges på denne side.

En anden metode til at indlæse scripts med betingelser er at bruge betingede funktioner. Hvis du vil indlæse et script på alle arkivsider i kategorien, kan du bruge funktionen is_category ().

For eksempel kan du oprette en karrusel med billeder, som brugerne kan føje til artiklen på denne måde: [karrusel ids = '42,124,123,331,90, XNUMX ′]. En karrusel oprettes på artikelsiden ved hjælp af de billeder, der er angivet af deres id'er.

For at gøre dette skal du oprette en fil " carousel.js Hvilket er baseret på jQuery. Her er en kode for at komme dertil (Den opretter ikke en karrusel, men lader dig se, hvordan indlæsningsprocessen sker):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('min karrusel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', sandt);

}

add_shortcode ('karrusel', 'min_karrusel');

my_carousel funktion ($ args) {

 $ atts = shortcode_atts (matrix (

 'Ids' => ",

 ), $ Atts, 'karrusel');

 wp_enqueue_script ('min karrusel');

 // Kode for at få vist karrusellen her

}

Fjernelse og udskiftning af scripts

Dette er langt et almindeligt scenarie, men nogle gange skal du muligvis fjerne eller erstatte et script. Jeg faldt i situationer, hvor et script blev tilføjet af et plugin (men ikke brugt af temaet) forårsagede kompatibilitetsproblemer. "Tilbagetrækning" var den bedste mulighed, da fejlen forsvandt fuldstændigt.

Du kan også erstatte jQuery med en nyere version, hvis du tester noget for at sikre, at det er kompatibelt med nyere versioner.

I disse situationer fungerer funktionerne wp_deregister_script () "Og" wp_dequeue_script () Er nyttige. Her redigeres, hvordan du redigerer kode, der allerede er tilføjet på 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', sandt);

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

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Afsluttende tanker

Denne metode til upload til WordPress er fantastisk, fordi den giver dig mulighed for at tilføje dine scripts på en modulær måde. Dette giver dig mulighed for at sikre, at afhængigheder tilføjes modulært.

Oplev også nogle premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. Premium SEO Pack

Premium SEO Pack er en WordPress plugin som optimerer din SEO og komprimerer CSS for at forbedre indlæsningshastigheden på din hjemmeside.

Pluginet giver dig også mulighed for at styre designet af dit websted med et par klik. Dens funktioner inkluderer: CSS- og JS-komprimering, video- og kodestykke-sitemapintegration, HTML- og XML-filformatering, 404 og 301-side-omdirigering, deling af sociale medier, levering af 'ALT-etiket, meget tilpasset layout

Downloade | demo | Web-hosting

2. Woocommerce Leveringstidsvælger til forsendelse

Woocommerce Delivery Time Picker for Shipping er en WooCommerce-udvidelse, der giver kunderne mulighed for at vælge leveringsdato og -tid på kassen. 

Kunder vil være i stand til at vælge leveringstid på pakken derhjemme. Leveringstiden vil være synlig for administratorerne af webstedet, og den sendes også via e-mail til administratorerne af webstedet eller online butikken.

Downloade | demo | Web-hosting

3. Menu Hero

Dette plugin giver dig mulighed for at oprette din egen brugerdefinerede WordPress-menu i et par ret enkle trin. Især giver det dig mulighed for nemt og intuitivt at oprette en elegant og professionel WordPress-menu. 

Fra den mest komplekse mega-menu fuld af funktioner til den enkleste menu med rullemenu, WordPress-plugin HeroMenu opretter enhver form for menu og får den til at køre på få minutter.

Med hensyn til funktioner tilbyder den blandt andet: perfekt betjening på pc, tablet og smartphone, fra Tilpasset CSS for at føje dine egne stilarter til menuen, en megamenu-builder, flere understøttede browsere: Chrome, Firefox, Safari, Opera, IE9 og mere.

Downloade | demo | Web-hosting

Anbefalede ressourcer

Tjek andre anbefalede ressourcer, der hjælper dig med at løse andre almindelige WordPress-fejl. 

• Sådan Fix Omdiriger fejl på WordPress
• Sådan oprettes en brugerdefineret layout med Elementor
• Sådan oprettes et WordPress-intranet til din organisation
• Sådan oprettes en login-side på WordPress

Konklusion

Her er ! Det er det til denne tutorial, jeg håber, det gav dig en forståelse af, hvordan du indlæser JavaScript på WordPress. Tøv ikke med at dele det med dine venner på din sociale netværk foretrukket. 

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Men i mellemtiden, fortæl os om din kommentarer og forslag i det dedikerede afsnit.

...