✅ WEB- och WordPress -nyheter, teman, plugins. Här delar vi tips och bästa webbplatslösningar.

Lägg till JavaScript till WordPress: Hur man gör det enkelt

31

Personer som använder WordPress bör lära sig mer om JavaScript och hur det används för en webbplats. För att lägga till JavaScript till WordPress måste du hitta det lämpligaste sättet att implementera det på din egen webbplats.

Forskning har stor betydelse, eftersom en felaktig implementering av JavaScript kan leda till konsekvenser som blir svåra att fixa.

Vad är ett WordPress JavaScript?

En WordPress JavaScript är ett sätt att lägga till extra funktioner till en webbplats utan att sakta ner den. JavaScript representerar ett programmeringsspråk som körs på användarens webbläsare. Denna typ av programmering ger utvecklare möjligheten att lägga till alla möjliga funktioner på sina webbplatser, såsom inbyggda videospelare, miniräknare eller andra tjänster. JavaScript-koden behöver helt enkelt kopieras och klistras in i webbplatsens kod.

Varför ska du lägga till anpassad JavaScript i WordPress?

Lägg till JavaScript till WordPress: Hur man gör det enkelt

Det finns flera anledningar till varför du bör lägga till JavaScript i WordPress, men för att göra det måste du vara medveten om hur webbplatsen är kodad. När du kodar en WordPress-webbplats finns det tre element som kan hjälpa dig:

  • HTML
  • CSS
  • JavaScript

För att skapa en mycket solid bas för WordPress-sajten kan du använda HTML och CSS. Även om de är bra för att lägga grunden till webbplatsen, är de begränsade när det gäller att ändra webbplatsens beteende. När du vill att din webbplats ska agera på ett specifikt sätt kan du använda JavaScript för att göra en av följande åtgärder:

  • Ändra, dölja eller visa vissa HTML-element på webbplatsen
  • Lägga till värden till CSS-variabler, samt köra operationer som är mer komplexa (sammanfoga variabler eller göra ett element interagerbart genom att klicka)
  • Ändra layouten för WordPress-temat genom att lägga till ett annat kodblock i det
  • Ändra en viss funktionalitet hos ett WordPress-plugin
  • Förbättra webbplatsen med innehåll som är dynamiskt (animationer, videor etc.)
  • Inkludera ett externt element på webbplatsen (API:er från tredje part)

Alla dessa – och mer – kan göras med hjälp av JavaScript.

Använda Infoga sidhuvuden och sidfötter för att lägga till JavaScript

Lägg till JavaScript till WordPress: Hur man gör det enkelt

När du lägger till JavaScript till WordPress behöver du helt enkelt kopiera och klistra in blocket med JavaScript-kod på webbplatsen. Denna enkla åtgärd lägger till ett tredjepartsverktyg till webbplatsen, oavsett om det är en videospelare eller annat element. Dessa kodavsnitt har lagts till antingen precis under rubriken eller precis före taggen i huvudkoden för webbplatsen. Detta påverkar var elementet kommer att placeras. För att aktivera denna plugin som kallas Infoga sidhuvuden och sidfötter måste du installera den först.

För att aktivera det efter installationen behöver du helt enkelt komma till Inställning och sedan sidan Infoga sidhuvuden och sidfötter. Det finns två olika rutor som du kan markera – en för sidhuvudet, en för sidfoten. När du har aktiverat detta plugin kan du bara klistra in JavaScript-kodavsnittet och klicka på spara. Eftersom plugin-programmet är aktiverat kommer kodavsnittet du klistrade in automatiskt att laddas för alla sidor på din webbplats. Detta är den mest grundläggande kunskapen du behöver för att lägga till JavaScript i WordPress.

Inaktiverar WordPress-filtrering

När du använder JavaScript i WordPress bör du också inaktivera blockerande skripttaggar från JavaScript. Den här inställningen finns i wp-config.php, som finns i rotwebbkatalogen. För att aktivera anpassade taggar, lägg till denna kodrad där:

define( 'CUSTOM_TAGS', true );

När du har flyttat till sidan functions.php, kopiera och klistra in det här kodavsnittet i din baskod:

function add_scriptfilter( $string) {global $allowedtags;$allowedtags['script'] = array( 'src' => array() );return $string;}add_filter( 'pre_kses', 'add_scriptfilter' );

Extra tips: att använda den här metoden innebär att du inaktiverar säkerhetsfunktionen på din webbplats, för alla användarbehörighetsnivåer. Använd den här metoden endast om du har djupt förtroende för dina författare. Att aktivera skripttaggen är ibland riskabelt på detta sätt.

Lär dig hur du använder Script n Styles-plugin

Lägg till JavaScript till WordPress: Hur man gör det enkelt

Du kan lägga till JavaScript i WordPress genom att använda ett plugin. Normalt måste du ladda JavaScript inom taggarna och. För att ladda JavaScript globalt kan en plugin användas. En responsiv är Script n Styles. Du kan antingen inkludera skript på hela webbplatsen eller inkludera dem på sid- eller till och med postnivå. Du kan också ändra användarbehörigheter. Författare kan publicera inlägg och göra JavaScript aktivt och bidragsgivare kan spara inläggen utan att faktiskt publicera dem.

Använd avancerade anpassade fält

Lägg till JavaScript till WordPress: Hur man gör det enkelt

Om du undrar hur du enklast lägger till JavaScript i WordPress kan detta plugin vara lösningen. När du har installerat och aktiverat insticksprogrammet kan du komma åt alternativet Anpassade fält under administrationsmenyn. Sedan kan du klicka på Lägg till ny. Syftet är att lägga till ett fält som administratörer kan komma åt och som kan bädda in en JavaScript-källfil eller JavaScript-kod i taggarna.

  • Det första steget är att namnge fältgruppen. Detta kan göras genom att aktivera en regel som visar detta alternativ om användaren som loggar in som administratör. Det innebär att endast administratören kan lägga till dessa på sajten.
  • Fälten ska visas under innehållsområdet, vilket innebär att du väljer Standard när det gäller att välja stil för fältgruppen. Ställ in formateringen av fältet till "Konvertera HTML till taggar". Detta kommer att resultera i ett bra resultat, annars kan det översättas dåligt.
  • Lägg till följande kod i header.php:

<?php the_field('header_script'); ?>

Detta bör läggas till innan .

<?php the_field('footer_script'); ?>

Detta bör läggas till innan .

  • Spara mallfilerna, uppdatera sidan och klicka på Publicera.

Sidan kommer att publiceras med tillagd JavaScript. De avancerade anpassade fälten är ett lämpligt alternativ om du vill ha mer funktionalitet för användare, sidor som redan är publicerade och så vidare.

Hej, visste du att data också kan vara vackert?

wpDataTables kan göra det så. Det finns en bra anledning till varför det är WordPress-plugin nummer 1 för att skapa responsiva tabeller och diagram.

Lägg till JavaScript till WordPress: Hur man gör det enkelt

Ett faktiskt exempel på wpDataTables i naturen

Och det är verkligen lätt att göra något så här:

  1. Du tillhandahåller tabelldata
  2. Konfigurera och anpassa den
  3. Publicera det i ett inlägg eller sida

Och det är inte bara snyggt, utan också praktiskt. Du kan skapa stora tabeller med upp till miljontals rader, eller så kan du använda avancerade filter och sökning, eller så kan du gå vilda och göra det redigerbart.

"Ja, men jag gillar Excel för mycket och det finns inget sådant på webbplatser". Ja, det finns. Du kan använda villkorlig formatering som i Excel eller Google Sheets.

Sa jag att du också kan skapa diagram med dina data? Och det är bara en liten del. Det finns många andra funktioner för dig.

Avslutande tankar om hur man lägger till JavaScript i WordPress 

Dessa tips borde räcka för att lära dig hur du lägger till JavaScript i WordPress på ett enkelt sätt, utan att stöta på några problem. När du har gjort det en gång kommer den andra gången att bli mycket lättare och mindre tidskrävande.

Om du tyckte om att läsa den här artikeln om hur du lägger till JavaScript i WordPress, bör du kolla in den här om hur du återställer WordPress.

Vi skrev också om några relaterade ämnen som hur man ändrar WordPress URL, hur man bäddar in video i WordPress, hur man redigerar HTML i WordPress, hur man duplicerar en sida i WordPress, hur man redigerar WordPress användarroller och hur man lägger till WordPress utvalda bilder.

Inspelningskälla: wpdatatables.com

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer