{"id":233390,"date":"2023-02-13T17:10:00","date_gmt":"2023-02-13T14:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233390"},"modified":"2022-11-10T23:25:57","modified_gmt":"2022-11-10T20:25:57","slug":"wordpress-opetusohjelma-mukautettu-valikko-viesteille-tai-sivuille-sivupalkissa","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-opetusohjelma-mukautettu-valikko-viesteille-tai-sivuille-sivupalkissa\/","title":{"rendered":"WordPress-opetusohjelma: Mukautettu valikko viesteille tai sivuille sivupalkissa"},"content":{"rendered":"\n

T\u00e4m\u00e4 viesti on sinulle, joka hallitset WordPress-sivustoa, jolla on paljon sis\u00e4lt\u00f6\u00e4, mahdollisesti useita hierarkiaan rakennettuja sivuja, ja haluat parempaa navigointia p\u00e4\u00e4valikon ulkopuolella. Nykyiseen viestiin liittyv\u00e4 mukautettu valikko auttaa suuresti navigoimaan sivustolla. Ongelma valikkowidgetin sijoittamisessa sivupalkkiin (tai minne tahansa haluat), ett\u00e4 sivupalkki on yleinen. T\u00e4ss\u00e4 viestiss\u00e4 opimme n\u00e4ytt\u00e4m\u00e4\u00e4n ylim\u00e4\u00e4r\u00e4isen mukautetun valikon sivupalkissa antamalla viestien, sivujen tai mukautettujen viestityyppien valita valikon.<\/p>\n

Lis\u00e4\u00e4 alla oleva koodi teemaasi functions.php<\/code>tai laajennuskoodin sis\u00e4\u00e4n.<\/p>\n

Salli viestien tai sivujen valita valikko<\/h2>\n

Valikkojen luominen WordPressiss\u00e4 on helppoa, ja voit n\u00e4ytt\u00e4\u00e4 valikon sivupalkissa Valikko-widgetin avulla. Ongelmana on, ett\u00e4 sivupalkki on yleinen ja sama valikko n\u00e4kyy kaikkialla. Ent\u00e4 jos haluat tiettyjen valikoiden n\u00e4kyv\u00e4n tietyill\u00e4 sivuilla? Opit my\u00f6s, kuinka voit varmistaa, ett\u00e4 alasivut periv\u00e4t valitun valikon. N\u00e4in sinun tarvitsee vain valita yl\u00e4sivun valikko. Kaikki alasivut n\u00e4ytt\u00e4v\u00e4t my\u00f6s saman valikon ilman, ett\u00e4 niit\u00e4 kaikkia tarvitsee muokata.<\/p>\n

Metalaatikon lis\u00e4\u00e4minen valikon valintaa varten<\/h3>\n

Ensimm\u00e4inen vaihe on metalaatikon luominen viesteihin tai sivuihin, joilla saamme mahdollisuuden valita valikon. K\u00e4yt\u00e4mme funktiota add_meta_box()<\/code>ja p\u00e4\u00e4t\u00e4mme, mille viestityypeille haluamme sen n\u00e4ytt\u00e4\u00e4.<\/p>\n

add_action('add_meta_boxes', function() {\n    add_meta_box('metabox-sidebar-menu', __('Sidebar Menu', 'txtdomain'), 'awp_sidebar_menu_metabox_callback', ['post', 'page']);\n});<\/code><\/pre>\n
S\u00e4\u00e4d\u00e4 yll\u00e4 oleva koodi haluamasi otsikon ja viestityyppien mukaan. Yll\u00e4 oleva esimerkki lis\u00e4\u00e4 metalaatikon sek\u00e4 viesteihin ett\u00e4 sivuihin. Kolmas parametri, jota olen kutsunut awp_sidebar_menu_metabox_callback<\/code>, on funktio, joka vastaa metaboxin sis\u00e4ll\u00f6n hahmontamisesta. M\u00e4\u00e4ritell\u00e4\u00e4n se seuraavaksi. T\u00e4m\u00e4 on mit\u00e4 meid\u00e4n on teht\u00e4v\u00e4 metalaatikossamme:<\/p>\n
function awp_sidebar_menu_metabox_callback($post) {\n    \/\/ Get all menus\n\u00a0\n    \/\/ Get the current saved menu, if set\n\u00a0\n    \/\/ Output HTML with a select showing all menus, and mark the currently saved one as selected\n}<\/code><\/pre>\n
Voimme saada taulukon, jossa on kaikki tallennetut valikot WordPressiin wp_get_nav_menus()<\/code>. Mit\u00e4 tulee nykyisen valitun valikon noutamiseen, tallennamme valitun valikon post-meta-tekstiin awp_sidebar_menu<\/code>(kutsu sit\u00e4 miksi haluat), ja haemme arvon yksinkertaisesti $post<\/code>metabox-toiminnossa meille tarjotun virran perusteella. Tallennamme valikon tunnukset, koska se on kaikki, mit\u00e4 tarvitsemme valikon n\u00e4ytt\u00e4miseen. Ja sitten annamme HTML-koodin valinnalle, joka kiert\u00e4\u00e4 valikoissa. Metaboxin HTML-tulostus on todella sinun p\u00e4\u00e4tett\u00e4viss\u00e4si, alla on esimerkki. Olen lis\u00e4nnyt my\u00f6s nonce-toiminnot turvallisuuden vuoksi.<\/p>\n
function awp_sidebar_menu_metabox_callback($post) {\n    \/\/ Get all menus\n    $menus = wp_get_nav_menus();\n\u00a0\n    \/\/ Get the current saved menu, if set\n    $current_selected = get_post_meta($post->ID, 'awp_sidebar_menu', true);\n\u00a0\n    \/\/ Output HTML with a select showing all menus, and mark the currently saved one as selected\n    wp_nonce_field('awp_sidebar_menu_metabox_nonce', 'awp_sidebar_menu_nonce');\n    ?><div class=\"awp-metabox-item\">\n        <div class=\"awp-metabox-label\"><label><?php _e('Choose menu', 'txtdomain'); ?><\/label><\/div>\n        <div class=\"awp-metabox-input\"><?php\n        if (empty($menus)) {\n            echo '<p>'. __('No menus created.', 'txtdomain'). '<\/p>';\n        } else { ?>\n            <select name=\"awp-sidebar-menu\" id=\"awp-sidebar-menu\">\n                <?php \n                echo '<option value=\"\">'. __('Choose menu', 'txtdomain'). '<\/option>';\n                foreach ($menus as $menu) { \n                    echo '<option value=\"'. $menu->term_id. '\" '.selected($current_selected, $menu->term_id).'>'.$menu->name.'<\/option>';\n                } ?>\n            <\/select>\n        <?php } ?>\n        <\/div>\n    <\/div><?php\n}<\/code><\/pre>\n
Tulostan HTML-tulosteeseen tarran. Jos WordPressiss\u00e4 ei ole lainkaan tallennettuja valikkoja, se n\u00e4ytt\u00e4\u00e4 yksinkertaisesti kappaleen. Muussa tapauksessa luodaan valinta, jossa valikon tunnukset ovat arvoina ja valikon nimet otsikoina. Lis\u00e4\u00e4n my\u00f6s tyhj\u00e4n valinnan, jotta viestit eiv\u00e4t n\u00e4yt\u00e4 valikkoa. K\u00e4yt\u00e4n WordPressin aputoimintoa [selected](https:\/\/developer.wordpress.org\/reference\/functions\/selected\/)()<\/code>nykyisen tallennetun vaihtoehdon merkitsemiseen valituksi.<\/p>\n
Jos muokkaat viesti\u00e4 tai sivua, alareunassa pit\u00e4isi n\u00e4ky\u00e4 metalaatikko, joka n\u00e4ytt\u00e4\u00e4 valintasi. Mahtava! T\u00e4ss\u00e4 vaiheessa se ei kuitenkaan tallenna valikkovalintaasi, kun tallennat viestin. Se on seuraava askel.<\/p>\n
Tallennetaan valikon valinta<\/h3>\n
Luomme koukun save_post<\/code>avulla toiminnon, joka tallentaa mink\u00e4 tahansa metalaatikkoon lis\u00e4\u00e4m\u00e4mme valinnan. Koukku laukeaa aina, save_post<\/code>kun viesti\u00e4 tallennetaan tai p\u00e4ivitet\u00e4\u00e4n. Tarkistamme ensin noncen (jos et ole varma, mit\u00e4 nonces ovat, tarkista t\u00e4m\u00e4 WordPress-opas noncesista<\/a> ). T\u00e4m\u00e4n j\u00e4lkeen tarkistamme, saako k\u00e4ytt\u00e4j\u00e4 p\u00e4ivitt\u00e4\u00e4 viestej\u00e4, ja p\u00e4ivit\u00e4mme postausmetamme valinnalla.<\/p>\n
add_action('save_post', function($post_id) {\n    if (!isset($_POST['awp_sidebar_menu_nonce']) || !wp_verify_nonce($_POST['awp_sidebar_menu_nonce'], 'awp_sidebar_menu_metabox_nonce')) {\n        return;\n    }\n\u00a0\n    if (!current_user_can('edit_post', $post_id)) {\n        return;\n    }\n\u00a0\n    update_post_meta($post_id, 'awp_sidebar_menu', $_POST['awp-sidebar-menu']);\n});<\/code><\/pre>\n
Nyt kun p\u00e4ivit\u00e4t viestej\u00e4, se tallentaa my\u00f6s valikon valintasi.<\/p>\n
Ja siin\u00e4 se postin valintaosaan. Seuraava vaihe on itse asiassa valikon tulostaminen, jos valikko on valittu.<\/p>\n
Mukautetun valikon sijainnin valitseminen<\/h3>\n
Lis\u00e4\u00e4n tulosteen sivupalkkiin, mutta voit tulostaa sen miss\u00e4 tahansa teemasi malleissa. Tarvitsemme vain joko ennalta m\u00e4\u00e4ritellyn koukun tai m\u00e4\u00e4rittelemme omamme. Esimerkkin\u00e4 lis\u00e4\u00e4n mukautetun koukun sivupalkin yl\u00e4osaan, jotta voin luoda t\u00e4h\u00e4n kytketyn toiminnon.<\/p>\n
Voit yksinkertaisesti soittaa wp_nav_menu()<\/code>suoraan malliin, mutta suosittelen sen sijaan mukautetun koukun luomista, koska lis\u00e4\u00e4mme melko v\u00e4h\u00e4n koodia ja se voi n\u00e4ytt\u00e4\u00e4 sotkuiselta.<\/p>\n
Minun teemassa jota muokkaan sidebar.php<\/code>ja juuri ennen dynamic_sidebar()<\/code>sivupalkkia kutsutaan (johon widgetit lis\u00e4t\u00e4\u00e4n), lis\u00e4\u00e4n mukautetun koukun do_action()<\/code>ja etunimen. Voit kutsua sit\u00e4 miksi haluat, mutta sen on oltava ainutlaatuinen WordPressiss\u00e4. Joten ainakin etuliit\u00e4 sille jotain ainutlaatuista sinulle.<\/p>\n
<aside class=\"sidebar\">\n    <?php \n    do_action('awp_before_sidebar');\n    dynamic_sidebar('left-sidebar'); \n    ?>\n<\/aside><\/code><\/pre>\n
Valikon render\u00f6iminen<\/h3>\n
Nyt voimme palata kohtaan functions.php<\/code>, m\u00e4\u00e4ritt\u00e4\u00e4 funktion, johon on kiinnitetty, awp_before_sidebar<\/code>ja sen tulos n\u00e4kyy sivupalkissa ennen widgetej\u00e4. Toiminto k\u00e4ytt\u00e4\u00e4 WordPressin ehdollisia tageja<\/a> tarkistaakseen, n\u00e4yt\u00e4mmek\u00f6 t\u00e4ll\u00e4 hetkell\u00e4 yksitt\u00e4ist\u00e4 viesti\u00e4 tai sivua. Ja jos on, haen post-metan. Jos post-meta oli asetettu, tuotamme valikon soittamalla [wp_nav_menu](https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/)()<\/code>ja antamalla sen menu<\/code>parametriksi tallennetun valikkotunnuksen.<\/p>\n
add_action('awp_before_sidebar', function() {\n    if (is_singular()) {\n        global $post;\n\u00a0\n        $sidebar_menu = get_post_meta($post->ID, 'awp_sidebar_menu', true);\n    }\n\u00a0\n    if (!empty($sidebar_menu)) {\n        ?><section class=\"widget awp-sidebar-menu\">\n            <?php wp_nav_menu(['menu' => $sidebar_menu]); ?>\n        <\/section><?php\n    }\n});<\/code><\/pre>\n
Sinun tulee s\u00e4\u00e4t\u00e4\u00e4 valikon ymp\u00e4rill\u00e4 olevaa HTML-koodia niin, ett\u00e4 se sopii muun sis\u00e4ll\u00f6n kanssa. Yll\u00e4 olevassa koodissa k\u00e4\u00e4rin valikon samaan HTML-koodiin, jossa kaikki sivupalkin widgetit on k\u00e4\u00e4ritty niin, ett\u00e4 teeman widget-tyyli koskee mukautettua valikkoamme.<\/p>\n
Se siit\u00e4! Aina kun valitset valikon viestiss\u00e4 tai sivulla, valikko n\u00e4kyy sivupalkin yl\u00e4puolella, kun tarkastelet kyseist\u00e4 viesti\u00e4 tai sivua.<\/p>\n
Voimme kuitenkin ottaa askeleen pidemm\u00e4lle. Jos haluat, ett\u00e4 lapsisivut n\u00e4ytt\u00e4v\u00e4t saman sivupalkin valikon miss\u00e4 tahansa vanhemmassa, lue eteenp\u00e4in.<\/p>\n
Salli alisivujen peri\u00e4 vanhemman valikko<\/h2>\n
T\u00e4m\u00e4 lis\u00e4ominaisuus on j\u00e4rkev\u00e4, jos sinulla on paljon sivuja hierarkiassa tai mukautettu viestityyppi, jossa hierarkia on p\u00e4\u00e4ll\u00e4. Olisi liian hankalaa muokata jokaista alisivua ja valita sama valikko. Siin\u00e4 tapauksessa on parempi valita yl\u00e4sivun valikko ja antaa kaikkien alasivujen automaattisesti "peri\u00e4" t\u00e4m\u00e4 valikkovaihtoehto. Jos jokin alasivu valitsee toisen valikon, se valikko n\u00e4ytet\u00e4\u00e4n kerran "perityn" sijaan.<\/p>\n
Lis\u00e4\u00e4mme koodinp\u00e4tk\u00e4n toimintoomme, joka on koukussa toimintoon awp_before_sidebar<\/code>, sekin sis\u00e4\u00e4n, jos katsomme yksitt\u00e4ist\u00e4 viesti\u00e4 tai sivua:<\/p>\n
        ...\n        $sidebar_menu = get_post_meta($post->ID, 'awp_sidebar_menu', true);\n        if (!empty($sidebar_menu)) {\n            $parents = get_post_ancestors($post->ID);\n            if (!empty($parents)) {\n                \/\/ go step by step up the parents tree\n                for ($i = 0; $i < count($parents); $i++) {\n                    $sidebar_menu = get_post_meta($post->ID, 'awp_sidebar_menu', true);\n                    if (!empty($sidebar_menu)) {\n                        break;\n                    }\n                }\n            }\n        }\n    }\n\u00a0\n    if (!empty($sidebar_menu)) {\n        ...<\/code><\/pre>\n
Mit\u00e4 yll\u00e4 oleva koodi tekee, jos valikkoa ei l\u00f6ydy nykyiselt\u00e4 sivulta, hakee kaikki vanhemmat, joilla on [get_post_ancestors](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_ancestors\/)()<\/code>. T\u00e4m\u00e4 funktio palauttaa joukon yl\u00e4tason viestitunnuksia lajiteltuna ensin l\u00e4himm\u00e4n yl\u00e4tason mukaan. Jos sivulla ei ole vanhempia (esimerkiksi jos se on viesti), palautetaan tyhj\u00e4 taulukko. Ja jos vanhempia on, k\u00e4ymme l\u00e4pi jokaisen vanhemman yksitellen ja tarkistamme, ovatko he asettaneet post-metamme. Jos sellainen l\u00f6ydet\u00e4\u00e4n, lopetamme vanhempien kulkemisen ja $sidebar_menu<\/code>asetetaan ja valikko tulostetaan my\u00f6hemmin -painikkeella wp_nav_menu()<\/code>.<\/p>\n
Ja siin\u00e4 se "perinn\u00f6n" toiminnalle!<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4ss\u00e4 viestiss\u00e4 opimme n\u00e4ytt\u00e4m\u00e4\u00e4n mukautetun valikon sivupalkissa (tai miss\u00e4 tahansa muualla) antamalla viestien tai sivujen valita valikon.<\/p>\n","protected":false},"author":1,"featured_media":224072,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[927,719,719,917,917,1110,834,843,803,803,834,927,843,864,864],"tags":[1166],"class_list":{"0":"post-233390","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-aiheita","8":"category-kehittaejae","10":"category-muut","12":"category-n-a","13":"category-opas-aloittelijoille","14":"category-opetusohjelmia","15":"category-php-5","20":"category-wordpress-5","22":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233390","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=233390"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233390\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224072"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}