{"id":238252,"date":"2022-04-03T17:00:00","date_gmt":"2022-04-03T14:00:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=238252"},"modified":"2022-05-16T10:29:16","modified_gmt":"2022-05-16T07:29:16","slug":"helpoin-tapa-lisata-javascript-wordpress-sivustollesi","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/helpoin-tapa-lisata-javascript-wordpress-sivustollesi\/","title":{"rendered":"Helpoin tapa lis\u00e4t\u00e4 Javascript WordPress-sivustollesi"},"content":{"rendered":"

Olen iloinen, ett\u00e4 olet t\u00e4\u00e4ll\u00e4.<\/p>\n

Jos et ole kokenut WordPress-kehitt\u00e4j\u00e4, Javascriptin lis\u00e4\u00e4minen sivustoosi voi olla melko pelottavaa. Viel\u00e4 pahempi\u2026<\/p>\n

Saatat sotkea sivustosi vakavasti, jos et ole varovainen.<\/p>\n

T\u00e4ss\u00e4 opetusohjelmassa opit nopeimman ja turvallisimman tavan lis\u00e4t\u00e4 uusi Javascript WordPress-sivustollesi.<\/p>\n

Lis\u00e4\u00e4 uusi Javascript WordPressiin<\/h2>\n

Normaalisti lis\u00e4\u00e4t alatason teeman<\/a> tai laajennuksen, joka lataa sitten uuden Javascript-tiedoston sivustollesi.<\/p>\n

T\u00e4m\u00e4 on kuitenkin paljon ty\u00f6t\u00e4, jos sinun on vain lis\u00e4tt\u00e4v\u00e4 katkelma tai kaksi JS-koodia. Helpoin ratkaisu on k\u00e4ytt\u00e4\u00e4 Simple Custom CSS- ja JS-<\/a> laajennuksia.<\/p>\n

\"Helpoin<\/a><\/p>\n

Asenna ja aktivoi t\u00e4m\u00e4 laajennus sivustollesi, niin n\u00e4et uuden mukautetun CSS- ja JS-valikkokohteen lis\u00e4ttyn\u00e4 hallintapaneeliisi. Vie hiiri uuden valikkokohdan p\u00e4\u00e4lle ja napsauta "Lis\u00e4\u00e4 mukautettu JS" -vaihtoehtoa aloittaaksesi javascriptin lis\u00e4\u00e4misen.<\/p>\n

\"Helpoin<\/a><\/p>\n

Lis\u00e4\u00e4 Javascript<\/h3>\n

Seuraavalla sivulla n\u00e4et koodieditorin, johon voit kirjoittaa JS:n, jonka haluat lis\u00e4t\u00e4 sivustollesi.<\/p>\n

\"Helpoin<\/a><\/p>\n

My\u00f6s editorin kommentit ovat hy\u00f6dyllisi\u00e4<\/p>\n

Anna JS:llesi otsikko, jotta on helppo muistaa, miksi lis\u00e4sit sen, ja kirjoita sitten koodisi alla olevaan editoriin. Muista poistaa kommentit ensin, koska sinun ei tarvitse lis\u00e4t\u00e4 niit\u00e4 sivustollesi.<\/p>\n

Testaa Javascripti\u00e4<\/h3>\n

Jos haluat varmistaa, ett\u00e4 se toimii, voit lis\u00e4t\u00e4 t\u00e4m\u00e4n JS:n sivustollesi:<\/p>\n

jQuery(document).ready(function( $ ){\n    $('.logged-in').on('click', function(){\n        alert('The code is working!'); \n    });\n});<\/code><\/pre>\n
T\u00e4lt\u00e4 se n\u00e4ytt\u00e4\u00e4 editorissa.<\/p>\n
\"Helpoin<\/a><\/p>\n
T\u00e4m\u00e4 koodi n\u00e4ytt\u00e4\u00e4 vain h\u00e4lytysruudun, kun napsautat mit\u00e4 tahansa sivuston kohtaa, kuten t\u00e4m\u00e4:<\/p>\n
\"Helpoin<\/a><\/p>\n
Se vaikuttaa vain kirjautuneisiin k\u00e4ytt\u00e4jiin, joten se ei h\u00e4iritse k\u00e4vij\u00f6it\u00e4, kun lis\u00e4\u00e4t sen testaamaan.<\/p>\n
Kun olet varma, ett\u00e4 se toimii, voit vaihtaa testikatkelman oikeaan JS:\u00e4\u00e4n, jonka haluat lis\u00e4t\u00e4 sivustollesi.<\/p>\n
M\u00e4\u00e4rit\u00e4 JS-asetukset<\/h3>\n
Yksinkertainen mukautettu CSS & JS sis\u00e4lt\u00e4\u00e4 muutamia k\u00e4tevi\u00e4 vaihtoehtoja, joiden avulla voit p\u00e4\u00e4tt\u00e4\u00e4, kuinka Javascript lis\u00e4t\u00e4\u00e4n sivustolle.<\/p>\n
\"Helpoin<\/a><\/p>\n
Ensinn\u00e4kin, jos lis\u00e4\u00e4t vain v\u00e4h\u00e4n koodia, s\u00e4ilyt\u00e4 linkitystyypiksi "sis\u00e4inen", joka yksinkertaisesti lis\u00e4\u00e4 koodin sivulle. T\u00e4m\u00e4 on yksinkertaisempaa kuin toisen tiedoston lataaminen, eik\u00e4 se vaikuta sivustosi latausaikaan.<\/p>\n
Seuraavaksi, jos lis\u00e4\u00e4t analytiikkakoodin, he todenn\u00e4k\u00f6isesti sanovat, pit\u00e4isik\u00f6 sinun lis\u00e4t\u00e4 se yl\u00e4- tai alatunnisteeseen. Muussa tapauksessa on parasta k\u00e4ytt\u00e4\u00e4 alatunnistetta oletuksena.<\/p>\n
Lopuksi, jos Javascriptin oletetaan vaikuttavan vierailijoihisi, pid\u00e4 "In Frontend" -vaihtoehto valittuna Miss\u00e4 sivustossa -asetuksen kohdalla. "J\u00e4rjestelm\u00e4nvalvojana" -vaihtoehto on vain, jos haluat ladata Javascriptin katsellessasi sivuja WP-hallintapaneelissa, ja tietysti "Kirjautumissivulla" -vaihtoehto on vain j\u00e4senen kirjautumissivulle.<\/p>\n
Johtop\u00e4\u00e4t\u00f6s<\/h2>\n
T\u00e4m\u00e4 l\u00e4hestymistapa on PALJON helpompaa kuin uuden laajennuksen tai lapsiteeman luominen.<\/p>\n
Puhumattakaan, Simple Custom CSS & JS on mahtava laajennus, ja tulet todenn\u00e4k\u00f6isesti l\u00f6yt\u00e4m\u00e4\u00e4n sille lis\u00e4\u00e4 k\u00e4ytt\u00f6tarkoituksia tulevaisuudessa. Saatavilla on my\u00f6s pro-versio, joka pystyy tekem\u00e4\u00e4n melko vaikuttavia mukautuksia, jos tarvitset enemm\u00e4n joustavuutta.<\/p>\n
Jos sinulla on kysytt\u00e4v\u00e4\u00e4 tai palautetta t\u00e4st\u00e4 postauksesta, j\u00e4t\u00e4 kommentti alle.<\/p>\n
:  www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
\u00c4l\u00e4 riko sivustoasi! Seuraa t\u00e4t\u00e4 yksinkertaista opetusohjelmaa oppiaksesi helpoimman ja turvallisimman tavan lis\u00e4t\u00e4 Javascript WordPress-sivustollesi.<\/p>\n","protected":false},"author":1,"featured_media":21627,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[570],"tags":[843],"class_list":["post-238252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpressin-perusteet","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/238252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=238252"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/238252\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/21627"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=238252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=238252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=238252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}