{"id":23681,"date":"2021-05-04T18:44:00","date_gmt":"2021-05-04T15:44:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=23681"},"modified":"2021-10-17T21:19:33","modified_gmt":"2021-10-17T18:19:33","slug":"tavallinen-tapa-sisallyttaa-javascript-ja-css-wordpressiin","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/tavallinen-tapa-sisallyttaa-javascript-ja-css-wordpressiin\/","title":{"rendered":"Tavallinen tapa sis\u00e4llytt\u00e4\u00e4 JavaScript ja CSS WordPressiin"},"content":{"rendered":"<p>Jos olet WordPress-kehitt\u00e4j\u00e4, olet kuullut sanoista kuten wp_enqueue_script, wp_enqueue_style ja wp_enqueue_scripts. N\u00e4it\u00e4 menetelmi\u00e4 meid\u00e4n tulisi k\u00e4ytt\u00e4\u00e4 sis\u00e4llytt\u00e4\u00e4 JavaScript ja CSS WordPressiin.<\/p>\n<p>WordPressin suhteen ei pid\u00e4 k\u00e4ytt\u00e4\u00e4 komento- ja linkkitunnisteita JavaScript- ja CSS-tiedostojen lis\u00e4\u00e4miseen.<\/p>\n<h3>Standardimenetelmien k\u00e4yt\u00f6n edut<\/h3>\n<p>Verkkosivustolla on tavallista k\u00e4ytt\u00e4\u00e4 erilaisia \u200b\u200bvaikutuksia, animaatioita k\u00e4ytt\u00f6kokemuksen parantamiseksi. Internetiss\u00e4 on runsaasti valmiita laajennuksia, joiden avulla voimme lis\u00e4t\u00e4 verkkosivustollesi liukus\u00e4\u00e4timi\u00e4, yhteydenottolomakkeita, karusellia jne. Kun k\u00e4yt\u00e4mme n\u00e4it\u00e4 ulkoisia resursseja, meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 niiden tarjoamia JS- ja CSS-tiedostoja. K\u00e4ytt\u00e4m\u00e4ll\u00e4 WordPressin tarjoamia menetelmi\u00e4 voimme hallita sivuja, joilla t\u00e4llaiset laajennukset voivat k\u00e4ytt\u00e4\u00e4 vain. Esimerkiksi, jos n\u00e4yt\u00e4mme liukus\u00e4\u00e4dint\u00e4 kotisivulla, liukus\u00e4\u00e4timen JS- ja CSS-tiedostoja ei tarvitse sis\u00e4llytt\u00e4\u00e4 toiselle sivulle. Aina on hyv\u00e4 k\u00e4yt\u00e4nt\u00f6 sis\u00e4llytt\u00e4\u00e4 JS ja CSS vain tarvittaessa. T\u00e4m\u00e4 on hyv\u00e4 k\u00e4yt\u00e4nt\u00f6, jolla parannettiin sivuston suorituskyky\u00e4 ja nopeutettiin sivustomme lataamista.<\/p>\n<h3>Todellinen koodi sis\u00e4llytt\u00e4\u00e4 JavaScript ja CSS<\/h3>\n<p>Oletetaan, ett\u00e4 meill\u00e4 on custom.js- ja custom.css-tiedostoja, jotka on lis\u00e4tt\u00e4v\u00e4 sivustollemme. T\u00e4t\u00e4 varten meid\u00e4n on sijoitettava koodin alle.<\/p>\n<pre><code>add_action('wp_enqueue_scripts', 'include_js_css');\nfunction include_js_css() {\n\u00a0\u00a0\u00a0\u00a0wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('my-custom-script');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_style( \"my-custom-style\", get_stylesheet_directory_uri(). \"\/css\/custom.css\", array(), false, \"all\" );\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( \"my-custom-style\" );\n}<\/code><\/pre>\n<p><strong>Huomaa<\/strong>: Funktion wp_register_script kolmas parametri. Ohitimme taulukon (&#8217;jquery&#8217;), mik\u00e4 tarkoittaa, ett\u00e4 custom.js on riippuvainen jquery.js-tiedostosta. Voit kirjoittaa emapsiotaulukon t\u00e4\u00e4lt\u00e4, jos skriptill\u00e4si ei ole riippuvuustiedostoja.<\/p>\n<p>Viimeinen parametri on asetettu arvoon true, mik\u00e4 tarkoittaa, ett\u00e4 custom.js-tiedosto sis\u00e4ltyy alatunnisteeseen (ennen body-tagin loppua).<\/p>\n<h3>Parametrien selitys funktiolle wp_register_script ()<\/h3>\n<p><strong>$ kahva<\/strong> (pakollinen): Komentosarjan nimi. Pit\u00e4isi olla ainutlaatuinen.<br \/>\n<strong>$ src<\/strong> (Pakollinen): Komentosarjan t\u00e4ydellinen URL tai komentosarjan polku suhteessa WordPress-juurihakemistoon.<br \/>\n<strong>$ deps<\/strong> (valinnainen): Joukko rekister\u00f6ityj\u00e4 komentosarjoja k\u00e4sittelee t\u00e4t\u00e4 komentosarjaa.<br \/>\nOletusarvo: array ()<br \/>\n<strong>$ ver<\/strong> (Valinnainen): Merkkijono, joka m\u00e4\u00e4ritt\u00e4\u00e4 komentosarjan versionumeron, jos sill\u00e4 on sellainen, joka lis\u00e4t\u00e4\u00e4n URL-osoitteeseen kyselymerkkijonona v\u00e4limuistin poistamista varten. Jos version arvoksi on asetettu ep\u00e4tosi, versionumero lis\u00e4t\u00e4\u00e4n automaattisesti nykyisen asennetun WordPress-version kanssa. Jos asetus on nolla, versiota ei lis\u00e4t\u00e4. Oletusarvo on ep\u00e4tosi<br \/>\n<strong>$ in_footer<\/strong> (valinnainen): Onko komentojonon kiinnitett\u00e4v\u00e4 ennen <strong>rungotunnisteen<\/strong> sulkemista p\u00e4\u00e4n sijaan. Oletus &#8217;v\u00e4\u00e4r\u00e4&#8217;.<\/p>\n<h3>Parametrien selitys funktiolle wp_register_style ()<\/h3>\n<p><strong>$ handle<\/strong> (Pakollinen): Tyylitaulukon nimi. Pit\u00e4isi olla ainutlaatuinen.<br \/>\n<strong>$ src<\/strong> (Pakollinen): Tyylitaulukon t\u00e4ydellinen URL-osoite tai tyylitaulukon polku suhteessa WordPress-juurihakemistoon.<br \/>\n<strong>$ deps<\/strong> (valinnainen): Joukko rekister\u00f6ityj\u00e4 tyylitaulukoita k\u00e4sittelee t\u00e4t\u00e4 tyylitaulukkoa.<br \/>\nOletusarvo: array ()<br \/>\n<strong>$ ver<\/strong> (valinnainen): Merkkijono, joka m\u00e4\u00e4ritt\u00e4\u00e4 tyylitaulukon versionumeron, jos sill\u00e4 on sellainen, joka lis\u00e4t\u00e4\u00e4n URL-osoitteeseen kyselymerkkijonona v\u00e4limuistin poistamista varten. Jos version arvoksi on asetettu ep\u00e4tosi, versionumero lis\u00e4t\u00e4\u00e4n automaattisesti nykyisen asennetun WordPress-version kanssa. Jos asetus on nolla, versiota ei lis\u00e4t\u00e4. Oletusarvo: false<br \/>\n<strong>$ media<\/strong>(Valinnainen): Media, jolle t\u00e4m\u00e4 tyylitaulukko on m\u00e4\u00e4ritetty. Hyv\u00e4ksyy mediatyypit, kuten &#8217;kaikki&#8217;, &#8217;tulosta&#8217; ja &#8217;n\u00e4ytt\u00f6&#8217;, tai mediakyselyt, kuten &#8217;(suunta: pysty)&#8217; ja &#8217;(enimm\u00e4isleveys: 640 kuvapistett\u00e4)&#8217;. Oletusarvo: &#8217;kaikki&#8217;.<\/p>\n<p>Kyse on siit\u00e4, miten JavaScript ja CSS sis\u00e4llytet\u00e4\u00e4n WordPressiin. Jos sinulla on kysytt\u00e4v\u00e4\u00e4 tai ehdotuksia, j\u00e4t\u00e4 kommentit alla.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress tarjoaa j\u00e4rjestelm\u00e4n, joka sis\u00e4lt\u00e4\u00e4 JavaScripti\u00e4 ja CSS: \u00e4\u00e4 WordPressiin. Kehitt\u00e4jien tulisi k\u00e4ytt\u00e4\u00e4 toimintoja wp_register_script () ja wp_register_style ().<\/p>\n","protected":false},"author":1,"featured_media":22082,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[178,610],"tags":[843],"class_list":["post-23681","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chrome-6","category-uncategorized-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/23681","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=23681"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/23681\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/22082"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=23681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=23681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=23681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}