✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

Lisää JavaScript WordPressiin: Kuinka tehdä se helposti

23

WordPressiä käyttävien ihmisten tulisi oppia lisää JavaScriptistä ja siitä, miten sitä käytetään verkkosivustolla. Jotta voit lisätä JavaScriptin WordPressiin, sinun on löydettävä sopivin tapa ottaa se käyttöön omalle verkkosivustollesi.

Tutkimuksella on suuri merkitys, sillä JavaScriptin väärä toteutus voi johtaa seurauksiin, joita on vaikea korjata.

Mikä on WordPress JavaScript?

WordPress JavaScript on tapa lisätä lisätoimintoja verkkosivustolle hidastamatta sitä. JavaScript edustaa ohjelmointikieltä, joka toimii käyttäjän selaimessa. Tämäntyyppinen ohjelmointi tarjoaa kehittäjille mahdollisuuden lisätä sivustoilleen kaikenlaisia ​​toimintoja, kuten upotettuja videosoittimia, laskimia tai muita palveluita. JavaScript-koodin osa on yksinkertaisesti kopioitava ja liitettävä verkkosivuston koodiin.

Miksi sinun pitäisi lisätä mukautettu JavaScript WordPressiin?

Lisää JavaScript WordPressiin: Kuinka tehdä se helposti

On useita syitä, miksi sinun pitäisi lisätä JavaScript WordPressiin, mutta tehdäksesi sen sinun on oltava tietoinen verkkosivuston koodauksesta. Kun koodaat WordPress-sivustoa, kolme elementtiä voivat auttaa sinua:

  • HTML
  • CSS
  • JavaScript

Luodaksesi erittäin vankan pohjan WordPress-sivustolle, voit käyttää HTML- ja CSS-muotoja. Vaikka ne ovat mahtavia luomaan verkkosivuston perustan, ne ovat rajoitettuja sivuston toiminnan muuttamisen kannalta. Kun haluat sivustosi toimivan tietyllä tavalla, voit käyttää JavaScriptiä jonkin seuraavista toimista:

  • Tiettyjen HTML-elementtien muuttaminen, piilottaminen tai näyttäminen verkkosivustolla
  • Arvojen lisääminen CSS-muuttujiin sekä monimutkaisempien toimintojen suorittaminen (muuttujien yhdistäminen tai elementin tekeminen vuorovaikutteiseksi napsauttamalla)
  • Muuta WordPress-teeman asettelua lisäämällä siihen toinen koodilohko
  • WordPress-laajennuksen tiettyjen toimintojen muokkaaminen
  • Verkkosivuston parantaminen dynaamisella sisällöllä (animaatiot, videot jne.)
  • Ulkoisen elementin sisällyttäminen verkkosivustoon (kolmannen osapuolen sovellusliittymät)

Kaikki nämä – ja paljon muuta – voidaan tehdä JavaScriptin avulla.

Lisää ylä- ja alatunnisteet käyttämällä JavaScriptiä

Lisää JavaScript WordPressiin: Kuinka tehdä se helposti

Kun lisäät JavaScriptiä WordPressiin, sinun on yksinkertaisesti kopioitava ja liitettävä JavaScript-koodilohko verkkosivustolle. Tämä yksinkertainen toiminto lisää verkkosivustolle kolmannen osapuolen työkalun, oli se sitten videosoitin tai muu elementti. Nämä koodinpätkät on lisätty joko suoraan head-osion alle tai ennen tagia verkkosivuston pääkoodiin. Tämä vaikuttaa siihen, mihin elementti sijoitetaan. Aktivoidaksesi tämän laajennuksen, jonka nimi on Insert Headers and Footers, sinun on ensin asennettava se.

Aktivoidaksesi sen asennuksen jälkeen, sinun täytyy vain avata Asetukset ja sitten Lisää ylä- ja alatunnisteet -sivu. Voit valita kaksi erilaista ruutua – toinen ylätunnisteelle ja toinen alatunnisteelle. Kun olet aktivoinut tämän laajennuksen, voit liittää JavaScript-koodinpätkän ja napsauttaa Tallenna. Koska laajennus on aktivoitu, liittämäsi koodinpätkä latautuu automaattisesti kaikille verkkosivustosi sivuille. Tämä on perustieto, jonka tarvitset JavaScriptin lisäämiseen WordPressiin.

WordPress-suodatuksen poistaminen käytöstä

Kun käytät JavaScriptiä WordPressissä, sinun tulee myös poistaa JavaScript-koodien estäminen käytöstä. Tämä asetus löytyy osoitteesta wp-config.php, joka sijaitsee web-juurihakemistossa. Ota mukautetut tunnisteet käyttöön lisäämällä tähän koodirivi:

define( 'CUSTOM_TAGS', true );

Kun olet siirtynyt functions.php-sivulle, kopioi ja liitä tämä koodinpätkä peruskoodiisi:

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

Lisävinkki: tämän menetelmän käyttäminen tarkoittaa, että poistat verkkosivustosi suojausominaisuuden käytöstä kaikilla käyttöoikeustasoilla. Käytä tätä menetelmää vain, jos luotat syvästi kirjoittajiisi. Komentosarjatunnisteen ottaminen käyttöön on toisinaan riskialtista tällä tavalla.

Opi käyttämään Script n Styles -laajennusta

Lisää JavaScript WordPressiin: Kuinka tehdä se helposti

Voit lisätä JavaScriptin WordPressiin laajennuksen avulla. Normaalisti sinun on ladattava JavaScript ja -tunnisteisiin. JavaScriptin lataamiseksi maailmanlaajuisesti voidaan käyttää laajennusta. Responsiivinen on Script n Styles. Voit joko sisällyttää leikkeitä koko verkkosivustolle tai sisällyttää ne sivun tai jopa postauksen tasolla. Voit myös muokata käyttäjien käyttöoikeuksia. Tekijät voivat julkaista viestejä ja aktivoida JavaScriptin, ja kirjoittajat voivat tallentaa viestit julkaisematta niitä.

Käytä mukautettuja lisäkenttiä

Lisää JavaScript WordPressiin: Kuinka tehdä se helposti

Jos mietit, kuinka JavaScript lisätään WordPressiin helpoimmin, tämä laajennus saattaa olla ratkaisu. Kun olet asentanut ja aktivoinut laajennuksen, voit käyttää Mukautetut kentät -vaihtoehtoa järjestelmänvalvojan valikossa. Sitten voit napsauttaa Lisää uusi. Tarkoituksena on lisätä kenttä, jota järjestelmänvalvojat voivat käyttää ja joka voi upottaa JavaScript-lähdetiedoston tai JavaScript-koodin tunnisteisiin.

  • Ensimmäinen vaihe on kenttäryhmän nimeäminen. Tämä voidaan tehdä ottamalla käyttöön sääntö, joka näyttää tämän vaihtoehdon, jos käyttäjä kirjautuu sisään järjestelmänvalvojana. Tämä tarkoittaa, että vain ylläpitäjä voi lisätä ne sivustolle.
  • Kentät tulee näyttää sisältöalueen alapuolella, mikä tarkoittaa, että valitset Vakio, kun haluat valita kenttäryhmän tyylin. Aseta kentän muotoiluksi "Muunna HTML tunnisteiksi". Tämä johtaa hyvään tulokseen, muuten se voi kääntyä huonosti.
  • Lisää seuraava koodi header.php:hen:

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

Tämä pitäisi lisätä ennen .

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

Tämä pitäisi lisätä ennen .

  • Tallenna mallitiedostot, päivitä sivu ja napsauta Julkaise.

Sivu julkaistaan ​​ja siihen on lisätty JavaScript. Mukautetut lisäkentät ovat sopiva vaihtoehto, jos haluat enemmän toimintoja käyttäjille, jo julkaistuille sivuille ja niin edelleen.

Hei, tiesitkö, että myös data voi olla kaunista?

wpDataTables voi tehdä sen näin. On hyvä syy, miksi se on suosituin WordPress-laajennus responsiivisten taulukoiden ja kaavioiden luomiseen.

Lisää JavaScript WordPressiin: Kuinka tehdä se helposti

Todellinen esimerkki wpDataTablesista luonnossa

Ja on todella helppoa tehdä jotain tällaista:

  1. Annat taulukon tiedot
  2. Määritä ja mukauta se
  3. Julkaise se viestissä tai sivulla

Ja se ei ole vain kaunis, vaan myös käytännöllinen. Voit tehdä suuria taulukoita, joissa on jopa miljoonia rivejä, tai voit käyttää edistyneitä suodattimia ja hakua, tai voit tehdä niistä muokattavia.

"Joo, mutta pidän Excelistä liikaa, eikä verkkosivustoilla ole mitään sellaista." Kyllä, siellä on. Voit käyttää ehdollista muotoilua kuten Excelissä tai Google Sheetsissä.

Sanoinko sinulle, että voit myös luoda kaavioita tiedoillasi? Ja se on vain pieni osa. Sinulle on tarjolla monia muita ominaisuuksia.

Lopetetaan ajatukset JavaScriptin lisäämisestä WordPressiin 

Näiden vinkkien pitäisi riittää opettamaan sinulle lisäämään JavaScriptiä WordPressiin helposti ilman ongelmia. Kun olet tehnyt sen kerran, toinen kerta on paljon helpompi ja vähemmän aikaa vievä.

Jos pidit tämän artikkelin lukemisesta JavaScriptin lisäämisestä WordPressiin, sinun tulee tarkistaa tämä artikkeli WordPressin nollaamisesta.

Kirjoitimme myös muutamista aiheeseen liittyvistä aiheista, kuten WordPressin URL-osoitteen muuttamisesta, videon upottamisesta WordPressiin, HTML:n muokkaamisesta WordPressissä, sivun monistamisesta WordPressissä, WordPress- käyttäjäroolien muokkaamisesta ja WordPress-kuvan lisäämisestä .

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja