Tilføjelse af Javascript til WordPress-temaer på den rigtige måde

Der er en bestemt måde at tilføje Javascript til dit WordPress-tema for at forhindre konflikter med plugins eller overordnede WordPress-temaer. Problemet er, at mange “udviklere” kalder deres javascript-filer direkte i header.php eller footer.php-filen, hvilket er den forkerte måde at gøre det på.


I denne vejledning vil jeg vise dig, hvordan du rigtigt kalder dine javascript-filer ved hjælp af din features.php-fil, så de indlæses lige i dit websteds head- eller footer-tag. På denne måde, hvis du udvikler et tema til distribution og din slutbruger ønsker at ændre scripts via et underordnet tema, de kan, eller hvis de bruger minificering / cache eller andre optimeringsplugins, fungerer de korrekt. Og hvis du arbejder med et underordnet tema, tilføjes dine scripts på den rigtige måde uden at kopiere header.php- eller footer.php-filer til dit underordnede tema, som ikke skulle være nødvendigt (når du arbejder med et godt kodet tema)

Forkert måde at tilføje Javascript til WordPress-temaer

At ringe til javascript i din header.php-fil eller footer.php-fil, som vist nedenfor, er IKKE den rigtige måde, og jeg kan varmt anbefale det, ofte skyldes det konflikter med andre plugins og gør ting manuelt, når man arbejder med en CMS, er aldrig en god ide.

Den rigtige måde at tilføje Javascript til WordPress-temaer

Det bedre at tilføje javascript til dit WordPress-tema er at gøre det via funktionen.php-fil ved hjælp af wp_enqueue_script. Brug af wp_enqueue_scripts-handlingen til at indlæse dit javascript hjælper med at holde dit tema ude af problemer.

Eksempel

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

Koden ovenfor indlæser my-script.js-filen på dit websted. Som du kan se, har jeg kun inkluderet $ -håndtaget, men du kan også tilføje afhængigheder for dit script, versionnummer og om du vil indlæse det i header eller sidefod (standard er header).

Funktionen wp_enqueue_script () kan teknisk bruges i en hvilken som helst tema- eller plugin-skabelonfil, men hvis du indlæser globale scripts, vil du placere den enten i dit temas function.php-fil eller i en separat fil, der specifikt er beregnet til at indlæse scripts på websted. Men hvis du kun søger at indlæse et script på en bestemt skabelonfil (for eksempel på galleriindlæg), kan du placere funktionen lige i skabelonfilen, men personligt anbefaler jeg, at du holder alle scripterne ét sted og bruger konditioner til at indlæse manuskripter efter behov.

WordPress-hostede scripts

En sej ting ved WordPress er, at der allerede er en masse scripts, der er vært af og registreret, som du kan bruge i din temaudvikling. F.eks. Skal jQuery, der bruges i næsten ethvert projekt, altid indlæses fra WordPress og aldrig være vært på et tredjepartswebsted som f.eks. Google. Så før du tilføjer et tilpasset script til dit projekt, skal du kontrollere listen over registrerede scripts for at sikre, at det ikke allerede er inkluderet i WordPress, og hvis det er det, skal du indlæse den i modsætning til at registrere din egen.

Brug af WordPress Enqueue Hook

Tidligere nævnte vi den funktion, der er nødvendig for at indlæse et script på dit websted, men når du arbejder med ikke-skabelonfiler såsom din features.php-fil, skal du tilføje denne funktion i en anden funktion, der er tilsluttet de rigtige WordPress-kroge, på denne måde får dine scripts registreret med alle de andre scripts, der er registreret af WordPress, tredjeparts plugins og dit overordnede tema, når du bruger et underordnet tema.

WordPress har to forskellige handlingskroge, du kan bruge til at kalde dine scripts.

  1. wp_enqueue_scripts – handling brugt til at indlæse scripts på frontend
  2. admin_enqueue_scripts – handling, der bruges til at indlæse scripts i WP-administratoren

Her er et eksempel (der vil blive føjet til din features.php-fil), hvordan du opretter en funktion og derefter bruge WordPress-krogen til at kalde dine scripts.

/ **
* Forlæg et script
* /
funktion myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), sandt);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Bemærk: Se, hvordan vi bruger funktionen “get_template_directory_uri”, når vi definerer placeringen af ​​dit script? Denne funktion opretter en URL til din temamappe. Hvis du arbejder med et underordnet tema, vil du i stedet bruge “get_styleheet_directory_uri”, så det peger på dit underordnede tema og ikke på overordnede tema..

Tilføjelse af inline Javascript-kode

Selvom du nemt kan indsætte inline javascript i en hvilken som helst skabelonfil via script-tagget, kan det være en god ide at også bruge WordPress-kroge til at tilføje din inline-kode, især når det er et kerneplugin eller temakode. Nedenfor er et eksempel på tilføjelse af inline-scripts til dit websted:

funktion myprefix_add_inline_script () {
wp_add_inline_script ('my-script', 'alert (' hej verden ');', 'efter');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Hvad dette vil gøre er at tilføje dit inline javascript efter det tidligere registrerede “my-script” script. Når du bruger wp_add_inline_script kan du kun tilføje inline-kode enten før eller efter et allerede registreret script, så hvis du prøver at ændre koden for et bestemt script, skal du sørge for, at det indlæses efter det, eller hvis du bare har brug for at tilføje en brugerdefineret kode, kan du koble det til jquery-scriptet, som generelt er indlæst af de fleste WordPress-temaer, og hvis ikke kan du bruge wp_enqueue_script til at indlæse den WordPress-hostede version af jQuery.

Ved at bruge denne metode kan folk let fjerne dine inline-scripts via et underordnet tema eller plugin-tilføjelse, det holder alt dit tilpassede javascript pænt organiseret og det analyseres af WordPress, som kan være mere sikkert. Og hvis du bruger et underordnet tema, kan du indlæse dine scripts via din features.php-fil i stedet for at kopiere over header.php- eller footer.php-filer over til dit underordnet tema.

Når det er sagt, hvis du arbejder i et underordnet tema, behøver du ikke at gøre dette, kan du blot dumpe din kode i din header enten ved hjælp af wp_head eller wp_footer-kroge, som eksemplet nedenfor:

add_action ('wp_footer', funktion () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map