{"id":233508,"date":"2023-02-16T16:34:00","date_gmt":"2023-02-16T13:34:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233508"},"modified":"2022-11-11T00:04:22","modified_gmt":"2022-11-10T21:04:22","slug":"kuinka-lisaetae-upeita-kuvakkeita-valikon-kohtiin-mukautetuilla-kentillae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-lisaetae-upeita-kuvakkeita-valikon-kohtiin-mukautetuilla-kentillae\/","title":{"rendered":"Kuinka lis\u00e4t\u00e4 upeita kuvakkeita valikon kohtiin mukautetuilla kentill\u00e4"},"content":{"rendered":"\n

T\u00e4m\u00e4 viesti n\u00e4ytt\u00e4\u00e4, kuinka voit k\u00e4ytt\u00e4\u00e4 Advanced Custom Fields (ACF) -kentti\u00e4 kuvakkeiden lis\u00e4\u00e4miseen valikkoon. T\u00e4ss\u00e4 esimerkiss\u00e4 lis\u00e4\u00e4mme Fontawesome-<\/a> kuvakkeen, mutta voit muokata koodia tarpeidesi mukaan. Voit sen sijaan lis\u00e4t\u00e4 tiedostovalitsimen SVG-tiedostoille tai jotain muuta.<\/p>\n

T\u00e4m\u00e4 opas toimii Advanced Custom Fields -sovelluksen ilmaisen version kanssa<\/a>, mutta varmista, ett\u00e4 sinulla on versio 5.6 tai uudempi.<\/p>\n

ACF-ryhm\u00e4n ja -kent\u00e4n lis\u00e4\u00e4minen<\/h2>\n

Ensimm\u00e4inen vaihe on itse kent\u00e4n lis\u00e4\u00e4minen valikon kohtiin. T\u00e4m\u00e4 opas lis\u00e4\u00e4 tekstisy\u00f6tteen Fontawesome-kuvakkeen luokan nimen kirjoittamista varten, mutta jos haluat toisen ratkaisun (esim. SVG-tiedoston tiedostovalitsin), muokkaa kent\u00e4n sy\u00f6tteit\u00e4.<\/p>\n

Varmista, ett\u00e4 Advanced Custom Field -ryhm\u00e4si sijainniksi on asetettu "Valikkokohde". Voit m\u00e4\u00e4ritt\u00e4\u00e4 sen arvoksi "Kaikki" tai voit m\u00e4\u00e4ritt\u00e4\u00e4 valikon sijaintien tai valikoiden mukaan.<\/p>\n

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

Jos lis\u00e4\u00e4t kentti\u00e4si ja ryhmittelet koodin mukaan, aseta sijaintiparametriksi " nav_menu_item<\/code>". Katso lis\u00e4tietoja ACF-kenttien lis\u00e4\u00e4misest\u00e4 koodin<\/a> mukaan t\u00e4ydellisest\u00e4 viitteest\u00e4ni.<\/p>\n

acf_add_local_field_group([\n    ...\n    'location' => [\n        [\n            [\n                'param' => 'nav_menu_item',\n                'operator' => '==',\n                'value' => 'all'\n            ]\n        ]\n    ]\n]);<\/code><\/pre>\n
Mit\u00e4 tulee itse kentt\u00e4\u00e4n, lis\u00e4\u00e4mme yksinkertaisen tekstinsy\u00f6tteen nimell\u00e4 " fontawesome_icon<\/code>".<\/p>\n
\"Kuinka<\/a><\/p>\n
Tai lis\u00e4\u00e4 kentt\u00e4 koodilla seuraavasti:<\/p>\n
[\n    'key' => 'field_fontawesome_icon',\n    'label' => __('Fontawesome icon class', 'txtdomain'),\n    'name' => 'fontawesome_icon',\n    'instructions' => __('Type the name of a <a href=\"https:\/\/fontawesome.com\/icons?d=gallery&m=free\" target=\"_blank\">Fontawesome icon<\/a> class. Example: \"fab fa-facebook\".', 'txtdomain'),\n    'type' => 'text',\n]<\/code><\/pre>\n
Jotta se olisi k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisempi, on hyv\u00e4 idea lis\u00e4t\u00e4 kuvaus, jossa on linkki saatavilla olevien Fontawesome-kuvakkeiden yleiskatsaukseen<\/a>. Lis\u00e4\u00e4n linkin n\u00e4ytt\u00e4\u00e4ksesi vain ilmaiset kuvakkeet, en mit\u00e4\u00e4n Pro-kuvakkeita, koska t\u00e4m\u00e4 on teemani kirjasto.<\/p>\n
Kun olet tallentanut kent\u00e4n j\u00e4rjestelm\u00e4nvalvojaan tai koodiin, sinun pit\u00e4isi nyt saada lis\u00e4kentt\u00e4, kun laajennat valikkokohtaa:<\/p>\n
\"Kuinka<\/a><\/p>\n
Huomautus Fontawesome-luokista<\/h2>\n
"Vanhoina aikoina", ennen Fontawesome 5:t\u00e4, Fontawesome-luokan tarjoaminen voisi olla k\u00e4ytt\u00e4j\u00e4lle hieman yksinkertaisempaa. Ostoskoriin voit kirjoittaa yksinkertaisesti "ostoskori" ja koodiimme voisi lis\u00e4t\u00e4 luokan " fa fa-<\/code>" ja sitten annetun luokan (jolloin on " fa fa-shopping-cart<\/code>"). Mutta Fontawesome 5:n j\u00e4lkeen luokat ovat olleet hieman monimutkaisia.<\/p>\n
"Yleinen" luokka " fa<\/code>" on korvattu kuvaketyyppikohtaisilla luokilla. Esimerkiksi sosiaalinen media tai logot kuuluvat tuotemerkkiluokkaan ja edellytt\u00e4v\u00e4t luokkaa " fab<\/code>", kiinte\u00e4t kuvakkeet vaativat luokan " fas<\/code>", kun taas tavalliset kuvakkeet vaativat " far<\/code>" ja niin edelleen. T\u00e4st\u00e4 syyst\u00e4 meid\u00e4n on nyt vaadittava teeman k\u00e4ytt\u00e4j\u00e4\u00e4 kirjoittamaan molemmat Fontawesome-luokat. Oikean luokan l\u00f6yt\u00e4misen pit\u00e4isi olla helppoa, koska se n\u00e4kyy selv\u00e4sti jokaisessa Fontawesomen sivuston kuvakkeessa:<\/p>\n
\"Kuinka<\/a><\/p>\n
Esimerkkin\u00e4 sinun on kirjoitettava " fas fa-shopping-cart<\/code>" mukautettuun kentt\u00e4\u00e4n ostoskorikuvakkeen valikon kohtaan.<\/p>\n
Kuvakkeen n\u00e4ytt\u00e4minen valikossa<\/h2>\n
Seuraava ja viimeinen vaihe on kuvakkeen render\u00f6iminen valikossa, jos se on asetettu. K\u00e4yt\u00e4mme t\u00e4h\u00e4n WordPress-suodatinta [wp_nav_menu_objects](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_objects\/)<\/code>. T\u00e4t\u00e4 suodatinta k\u00e4ytet\u00e4\u00e4n jokaisessa valikossa kaikissa hahmonnetuissa valikoissa juuri ennen sen HTML-koodin luomista, jolloin voimme muokata tekstin tulostusta, luokkia ja paljon muuta.<\/p>\n
Se, kuinka haluat kuvakkeen tulostaa, on j\u00e4lleen sinun p\u00e4\u00e4tett\u00e4viss\u00e4si. Haluatko korvata linkin tekstin kuvakkeella vai haluatko n\u00e4ytt\u00e4\u00e4 kuvakkeen joko ennen tekstilinkki\u00e4 vai sen j\u00e4lkeen? Seuraamme Fontawesome-tapaa tulostamalla <i><\/code>tunnisteen toimitetulla luokalla.<\/p>\n
add_filter('wp_nav_menu_objects', function($items) {\n    foreach ($items as &$item) {\n        $icon = get_field('fontawesome_icon', $item);     \n        if ($icon) {\n            $item->title = '<i class=\"'. $icon. '\"><\/i>'. $item->title;\n        }\n    }\n    return $items;\n});<\/code><\/pre>\n
Tapa, jolla muokkaamme valikkokohtia, on selata valikon kohtia k\u00e4ytt\u00e4m\u00e4ll\u00e4 pass by-viittausta (lis\u00e4\u00e4m\u00e4ll\u00e4 &<\/code>muuttujan eteen). T\u00e4m\u00e4 tarkoittaa, ett\u00e4 kaikki alkioon tekem\u00e4mme muutokset vaikuttavat vanhempien kohteiden objektiin.<\/p>\n
K\u00e4yt\u00e4mme jokaiselle kohteelle Advanced Custom Field get_field()<\/code>-toimintoa saadaksemme kent\u00e4n arvon fontawesome_icon<\/code>. Jos se on asetettu, voimme menn\u00e4. Yll\u00e4 oleva koodiesimerkki lis\u00e4\u00e4 kuvakkeen tekstin eteen. Jos haluat lis\u00e4t\u00e4 kuvakkeen tekstin j\u00e4lkeen, korvaa rivi #6<\/code>seuraavasti:<\/p>\n
$item->title .= '<i class=\"'. $icon. '\"><\/i>';<\/code><\/pre>\n
Tai jos haluat korvata tekstin kuvakkeella \u2013 teksti\u00e4 ei n\u00e4y lainkaan, korvaa rivi #6<\/code>seuraavalla:<\/p>\n
$item->title = '<i class=\"'. $icon. '\" title=\"'. $item->title. '\"><\/i>';<\/code><\/pre>\n
Lis\u00e4sin title<\/code>attribuutin, jotta se on hieman informatiivisempi k\u00e4ytt\u00f6liittym\u00e4n k\u00e4ytt\u00e4j\u00e4lle. Koska teksti on poistettu, se voi joskus olla h\u00e4mment\u00e4v\u00e4\u00e4 loppuk\u00e4ytt\u00e4j\u00e4lle, mit\u00e4 varten valikkokohta on tarkoitettu. Mutta title<\/code>attribuutti varmistaa, ett\u00e4 k\u00e4ytt\u00e4j\u00e4 saa ty\u00f6kaluvihjeen valikkokohdan tekstill\u00e4, kun h\u00e4n vie hiiren osoittimen kuvakkeen p\u00e4\u00e4lle. T\u00e4m\u00e4 on tietysti t\u00e4ysin vapaaehtoista.<\/p>\n
Jos k\u00e4yt\u00e4t erityyppist\u00e4 kentt\u00e4\u00e4, esim. SVG-tiedostojen tiedostonpoimijaa, sinun tulee s\u00e4\u00e4t\u00e4\u00e4 tulostetta vastaavasti.<\/p>\n
Ja siin\u00e4 se! Sinun pit\u00e4isi nyt saada Fontawesome-kuvake kaikkialle, miss\u00e4 valikko n\u00e4ytet\u00e4\u00e4n. Mutta sinun t\u00e4ytyy luultavasti lis\u00e4t\u00e4 siihen tyyli\u00e4. Esimerkiksi v\u00e4lily\u00f6nnin lis\u00e4\u00e4minen kuvakkeen ja tekstin v\u00e4liin.<\/p>\n
Luokkien lis\u00e4\u00e4minen helpottamaan muotoilua<\/h3>\n
Voit lis\u00e4t\u00e4 <i><\/code>tunnisteeseen mukautettuja luokkia tai lis\u00e4t\u00e4 HTML-koodia tarvittaessa.<\/p>\n
Jos sinun on lis\u00e4tt\u00e4v\u00e4 luokka rivitysvalikon kohtaan (li<\/code>elementtiin), sinulla on t\u00e4ysi p\u00e4\u00e4sy valikon kohtien luokkiin, joita k\u00e4ytet\u00e4\u00e4n yll\u00e4 olevassa suodattimessa. Lis\u00e4\u00e4 mukautettu valikkokohdeluokka kuvakevalikkokohdille, kuten esimerkiksi:<\/p>\n
        ...\n        if ($icon) {\n            $item->title = '<i class=\"'. $icon. '\"><\/i>'. $item->title;\n            $item->classes[] = 'menu-with-icon';\n        }\n        ...<\/code><\/pre>\n
Valikko tulee tulostaa seuraavasti:<\/p>\n
\"Kuinka<\/a><\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Kuinka lis\u00e4t\u00e4 Fontawesome-kuvakkeita valikon kohtiin. K\u00e4yt\u00e4mme Advanced Custom Fields -kentti\u00e4 luokkien m\u00e4\u00e4ritt\u00e4miseen. SVG-kuvakkeiden tai vastaavien koodin s\u00e4\u00e4t\u00e4minen on helppoa.<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,719,719,895,1110,834,843,803,803,834,843,864,864],"tags":[1166],"class_list":{"0":"post-233508","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koodi","8":"category-kehittaejae","11":"category-n-a","12":"category-opas-aloittelijoille","13":"category-opetusohjelmia","14":"category-php-5","18":"category-wordpress-5","20":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233508"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233508\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}