{"id":233855,"date":"2023-02-23T09:59:00","date_gmt":"2023-02-23T06:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233855"},"modified":"2022-11-11T12:49:47","modified_gmt":"2022-11-11T09:49:47","slug":"wordpress-teeman-opetusohjelma-aloittelijoille-osa-9-valikot-ja-widget-alueet","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-teeman-opetusohjelma-aloittelijoille-osa-9-valikot-ja-widget-alueet\/","title":{"rendered":"WordPress-teeman opetusohjelma aloittelijoille \u2013 Osa 9: Valikot ja widget-alueet"},"content":{"rendered":"\n

T\u00e4m\u00e4 oppitunti kattaa kuinka lis\u00e4t\u00e4 kaksi WordPressin ydinominaisuutta teemaamme; valikot ja widget-alueet. Opimme rekister\u00f6im\u00e4\u00e4n sijainnin sivuston p\u00e4\u00e4navigointivalikossa ja n\u00e4ytt\u00e4m\u00e4\u00e4n valikon malleissamme sek\u00e4 sallimaan widgetien lis\u00e4\u00e4misen sivupalkkiin ja alatunnistealueeseen.<\/p>\n

Innokkaat ovat saattaneet huomata, ett\u00e4 "Valikot" tai "Widgetit" eiv\u00e4t ole k\u00e4ytett\u00e4viss\u00e4 hallintapaneelin "Ulkoasu"-valikosta. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 teemamme ei viel\u00e4 tue niit\u00e4. Korjaamme t\u00e4m\u00e4n t\u00e4ll\u00e4 oppitunnilla \u2013 alkaen valikoista. .<\/p>\n

WordPress valikot<\/h2>\n

Valikoiden lis\u00e4\u00e4misess\u00e4 teemaasi on kaksi osaa. Ensin sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 yksi tai useampi valikon sijainti functions.php<\/code>. Esimerkki on p\u00e4\u00e4valikko, joka on kaikkien sivujen otsikoissa. Toinen osa on koodin lis\u00e4\u00e4minen siihen paikkaan, jonka haluat valikon tuottavan. Esimerkiksi header.php<\/code>paikkaan, johon haluat sijoittaa p\u00e4\u00e4valikon.<\/p>\n

Valikkopaikan rekister\u00f6inti<\/h3>\n

T\u00e4ss\u00e4 opetusohjelmassa lis\u00e4\u00e4mme yhden valikkopaikan sivuston p\u00e4\u00e4navigointia varten ja asetamme sen tulosteen header.php<\/code>. Aloitetaan sijainnin rekister\u00f6innist\u00e4 paikassa functions.php<\/code>, joka tehd\u00e4\u00e4n funktiolla register_nav_menu<\/a> :<\/p>\n

add_action('init', 'wptutorial_register_menu');\nfunction wptutorial_register_menu() {\n    register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));\n}<\/code><\/pre>\n
Meid\u00e4n on tartuttava koukkuun init<\/code>, jonka WordPress on p\u00e4\u00e4tt\u00e4nyt olevan hyv\u00e4 "tarkistuspiste" valikon sijaintien rekister\u00f6innille. Kutsumme register_nav_menu()<\/code>funktiomme sis\u00e4ll\u00e4, joka hyv\u00e4ksyy v\u00e4hint\u00e4\u00e4n kaksi parametria; valikkokahva, joka on ainutlaatuinen etana, jota k\u00e4yt\u00e4t tunnisteena valikon hahmontamisessa, ja valikon n\u00e4kyv\u00e4 nimi, joka n\u00e4kyy hallintapaneelissa. Huomaa, ett\u00e4 k\u00e4\u00e4nn\u00e4n nimen sis\u00e4\u00e4n __()<\/code>, jotta se olisi k\u00e4\u00e4nnett\u00e4v\u00e4, kuten opimme edellisess\u00e4 vaiheessa<\/a>.<\/p>\n
\"WordPress-teeman<\/a><\/p>\n
Jos p\u00e4ivit\u00e4t hallintapaneelin, sinun pit\u00e4isi nyt n\u00e4hd\u00e4 uusi alivalikko kohta "Ulkoasu"; "Menut". Onnittelut, teemasi tukee nyt valikoiden luomista!<\/p>\n
Jos et ole perehtynyt valikkojen tekemiseen ja hallintaan WordPressiss\u00e4, t\u00e4m\u00e4 on hyv\u00e4 opas<\/a> sinulle.<\/p>\n
Luo uusi valikko "Ulkoasu > Valikot" – se voi sis\u00e4lt\u00e4\u00e4 mit\u00e4 haluat, lis\u00e4sin juuri WordPressiss\u00e4ni luomani valeviestit.<\/p>\n
Kun olet tallentanut ensimm\u00e4isen valikon, valikon muokkausalueen alle ilmestyy uusi osio "Valikkoasetukset", jonka avulla voit valita sijainnin t\u00e4lle valikolle. Sen pit\u00e4isi luetella yksi k\u00e4ytett\u00e4viss\u00e4 oleva sijainti, joka on se, jonka loimme; "P\u00e4\u00e4navigointi".<\/p>\n
\"WordPress-teeman<\/a><\/p>\n
Valitse "P\u00e4\u00e4navigointi" ja napsauta Tallenna. Nyt juuri luomasi valikko on yhdistetty sijaintiin ja n\u00e4ytet\u00e4\u00e4n automaattisesti aina, kun lis\u00e4\u00e4t koodin t\u00e4m\u00e4n valikon sijainnin tulostamiseksi. Tehd\u00e4\u00e4n se nyt.<\/p>\n
Valikon sijainnin n\u00e4ytt\u00e4minen mallissa<\/h3>\n
Avaa header.php<\/code>ja lis\u00e4\u00e4 puhelu numeroon wp_nav_menu()<\/code>. T\u00e4m\u00e4 toiminto hyv\u00e4ksyy joukon argumentteja taulukossa mukauttaakseen valikon tulostetta. Mik\u00e4 t\u00e4rkeint\u00e4, tarvitsemme parametrin, joka k\u00e4skee sen hakemaan "P\u00e4\u00e4navigointi" -sijainnin. T\u00e4t\u00e4 varten lis\u00e4\u00e4mme argumentin ’ theme_location<\/code>’ ja asetamme sen valikon kahvaan; ’ main-nav<\/code>’.<\/p>\n
Lis\u00e4sin valikkotulosteen heti <body><\/code>tunnisteen alun j\u00e4lkeen, mutta jos olet t\u00e4ydent\u00e4nyt mallejasi HTML:ll\u00e4, p\u00e4\u00e4t\u00e4 itse, miss\u00e4 haluat valikon n\u00e4kyv\u00e4n.<\/p>\n
...\n<body <?php body_class(); ?>>\n    <nav class=\"main-nav\"><?php wp_nav_menu(['theme_location' => 'main-nav']); ?><\/nav><\/code><\/pre>\n
P\u00e4ivit\u00e4 k\u00e4ytt\u00f6liittym\u00e4 ja sinun pit\u00e4isi n\u00e4hd\u00e4 j\u00e4rjestelm\u00e4nvalvojassa luomasi valikko j\u00e4rjest\u00e4m\u00e4tt\u00f6m\u00e4n\u00e4 luettelona mallin alussa.<\/p>\n
\"WordPress-teeman<\/a><\/p>\n
Kuten tavallista, kehotan sinua kaivaa hieman syvemm\u00e4lle parametreihin wp_nav_menu<\/code>WordPress Codex -dokumentaatiossa<\/a> ja leikki\u00e4, millaisen tulosteen haluat olevan. Esimerkiksi: voit asettaa sen poistumaan HTML-luettelosta, voit rajoittaa valikon kohdat vain tietyille tasoille (alivalikon est\u00e4miseksi) ja paljon muuta.<\/p>\n
Jos olet utelias muotoiluosasta; katso luokkia, jotka WordPress lis\u00e4\u00e4 automaattisesti jokaiseen valikon kohtaan. Voit helposti lis\u00e4t\u00e4 tyylej\u00e4 aktiiviselle valikkokohdalle, kohteille, joissa on alatason kohteita, aktiivisen alakohteen yl\u00e4kohdetta jne.<\/p>\n
Huomautus: Kuka tahansa teeman k\u00e4ytt\u00e4j\u00e4 voi aina luoda useita valikkoja ja n\u00e4ytt\u00e4\u00e4 ne teeman rekister\u00f6ityjen sijaintien ulkopuolella widgetien avulla. Kuitenkin tehd\u00e4ksesi t\u00e4m\u00e4n, teemasi on m\u00e4\u00e4ritelt\u00e4v\u00e4 joitain widget-alueita! Tehd\u00e4\u00e4n se seuraavaksi.<\/p>\n
Widget-alueet<\/h2>\n
Widget-alueet toimivat melko samalla tavalla valikoiden toiminnassa. Rekister\u00f6it sijainnin (widgeteille m\u00e4\u00e4rit\u00e4t alueen, johon teemak\u00e4ytt\u00e4j\u00e4 voi sijoittaa widgetej\u00e4), ja minne tahansa haluat sijainnin\/alueen n\u00e4kyv\u00e4n malleissasi, lis\u00e4\u00e4t koodin, joka viittaa kahvan tunnukseen, jonka annoit rekister\u00f6intikoodi.<\/p>\n
M\u00e4\u00e4ritet\u00e4\u00e4n widget-alue sivupalkkiimme ja yksi alatunnisteeseen. On tavallista, ett\u00e4 teemat tarjoavat useita widget-alueita alatunnisteeseen, jotta ne jaetaan kauniisti sarakkeiksi, mutta t\u00e4ss\u00e4 opetusohjelmassa lis\u00e4\u00e4mme vain yhden alatunnisteeseen.<\/p>\n
Widget-alueita kutsutaan WordPress-koodissa "sivupalkeiksi", mutta se ei koske yksinomaan verkkosivustojen vanhaa oikeaa sivupalkkia. N\u00e4ytt\u00e4\u00e4 silt\u00e4, \u200b\u200b\u200b\u200bett\u00e4 jokin vanha nimi on vain j\u00e4\u00e4nyt kiinni ajalta, jolloin verkkosivustoilla oli yleens\u00e4 vain widget-alue sivupalkissa. \u00c4l\u00e4 ajattele, ett\u00e4 "sivupalkit" voivat viitata vain todellisiin sivupalkkeihin.<\/p>\n
Rekister\u00f6i widget-alueet<\/h3>\n
Aloitamme rekister\u00f6im\u00e4ll\u00e4 kaksi widget-aluetta functions.php<\/code>. K\u00e4yt\u00e4mme t\u00e4t\u00e4 register_sidebar<\/code>toimintoa sivupalkkien rekister\u00f6imiseen koukkuun kiinnitettyin\u00e4 widgets_init<\/code>, jotka WordPress on m\u00e4\u00e4ritellyt parhaaksi koukuksi widget-alueiden (ja mukautettujen widgetien) rekister\u00f6imiseen.<\/p>\n
add_action('widgets_init', 'wptutorial_register_sidebar');\nfunction wptutorial_register_sidebar() {\n    register_sidebar([\n        'name' => __('Sidebar Widget Area', 'wptutorial'),\n        'id' => 'sidebar-area'\n    ]);\n    register_sidebar([\n        'name' => __('Footer Widget Area', 'wptutorial'),\n        'id' => 'footer-area'\n    ]);\n}<\/code><\/pre>\n
Funktio register_sidebar()<\/code>hyv\u00e4ksyy melko v\u00e4h\u00e4n argumentteja, v\u00e4hint\u00e4\u00e4n tarvitset argumentin ’id’ ja ’name’. K\u00e4ytett\u00e4viss\u00e4 on parametreja, joilla voit m\u00e4\u00e4ritt\u00e4\u00e4, kuinka haluat widget-HTML-k\u00e4\u00e4reiden tulosteen.<\/p>\n
P\u00e4ivit\u00e4 hallintapaneeli, ja sinun pit\u00e4isi nyt n\u00e4hd\u00e4 valikkokohdan "Widgetit" n\u00e4kyv\u00e4n "Ulkoasu" -kohdassa. "Widgetit"-hallintapaneelissa n\u00e4et kaksi k\u00e4ytett\u00e4viss\u00e4 olevaa widget-aluetta oikealla alueella; joka on "sivupalkin widget-alue" ja "alatunniste-widget-alue".<\/p>\n
\"WordPress-teeman<\/a><\/p>\n
Aseta satunnainen widget sivupalkki- tai alatunniste-widget-alueelle, jotta n\u00e4et sen toiminnassa.<\/p>\n
Widget-alueen tulostaminen malliin<\/h3>\n
Viimeinen osa on widget-alueiden tulostaminen malleihimme. T\u00e4t\u00e4 varten k\u00e4yt\u00e4mme funktiota dynamic_sidebar()<\/code>ja annamme kahvan parametrina. Avaa sidebar.php<\/code>ja lis\u00e4\u00e4 seuraavat <aside><\/code>tunnisteiden sis\u00e4\u00e4n:<\/p>\n
<aside class=\"sidebar\">\n    <ul><?php dynamic_sidebar('sidebar-area'); ?><\/ul>\n<\/aside><\/code><\/pre>\n
Huomaa, ett\u00e4 k\u00e4\u00e4rin sen j\u00e4rjest\u00e4m\u00e4tt\u00f6m\u00e4n luettelotunnisteen (<ul><\/code>) sis\u00e4\u00e4n. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 oletusarvoisesti dynamic_sidebar<\/code>tulostuu kaikki widgetit, jotka on k\u00e4\u00e4ritty kohteiksi <li><\/code>. Kehotan sinua leikkim\u00e4\u00e4n tulosparametreilla, jos et pid\u00e4 widgeteist\u00e4 luettelona.<\/p>\n
Mit\u00e4 tulee alatunnisteeseen, lis\u00e4\u00e4mme sen aivan julkaisun alussa footer.php<\/code>k\u00e4\u00e4rittyn\u00e4 <footer><\/code>tunnisteen sis\u00e4\u00e4n (jos haluat).<\/p>\n
    <footer>\n        <ul><?php dynamic_sidebar('footer-area'); ?><\/ul>\n    <\/footer>\n    <?php wp_footer(); ?>\n...<\/code><\/pre>\n
Siin\u00e4 kaikki valikot ja widget-alueet. Teemasi avulla k\u00e4ytt\u00e4j\u00e4 voi nyt luoda uuden valikon ja n\u00e4ytt\u00e4\u00e4 sen sivupalkissa tai alatunnisteessa widgetin avulla. T\u00e4m\u00e4n opetusohjelmasarjan seuraavalla oppitunnilla<\/a> luomme lis\u00e4\u00e4 malleja teemaamme.<\/p>\n
Dokumentaatio k\u00e4ytetyist\u00e4 menetelmist\u00e4<\/h2>\n