✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

WordPress-opetusohjelma: Mukautettu valikko viesteille tai sivuille sivupalkissa

4

Tämä viesti on sinulle, joka hallitset WordPress-sivustoa, jolla on paljon sisältöä, mahdollisesti useita hierarkiaan rakennettuja sivuja, ja haluat parempaa navigointia päävalikon ulkopuolella. Nykyiseen viestiin liittyvä mukautettu valikko auttaa suuresti navigoimaan sivustolla. Ongelma valikkowidgetin sijoittamisessa sivupalkkiin (tai minne tahansa haluat), että sivupalkki on yleinen. Tässä viestissä opimme näyttämään ylimääräisen mukautetun valikon sivupalkissa antamalla viestien, sivujen tai mukautettujen viestityyppien valita valikon.

Lisää alla oleva koodi teemaasi functions.phptai laajennuskoodin sisään.

Salli viestien tai sivujen valita valikko

Valikkojen luominen WordPressissä on helppoa, ja voit näyttää valikon sivupalkissa Valikko-widgetin avulla. Ongelmana on, että sivupalkki on yleinen ja sama valikko näkyy kaikkialla. Entä jos haluat tiettyjen valikoiden näkyvän tietyillä sivuilla? Opit myös, kuinka voit varmistaa, että alasivut perivät valitun valikon. Näin sinun tarvitsee vain valita yläsivun valikko. Kaikki alasivut näyttävät myös saman valikon ilman, että niitä kaikkia tarvitsee muokata.

Metalaatikon lisääminen valikon valintaa varten

Ensimmäinen vaihe on metalaatikon luominen viesteihin tai sivuihin, joilla saamme mahdollisuuden valita valikon. Käytämme funktiota add_meta_box()ja päätämme, mille viestityypeille haluamme sen näyttää.

add_action('add_meta_boxes', function() { add_meta_box('metabox-sidebar-menu', __('Sidebar Menu', 'txtdomain'), 'awp_sidebar_menu_metabox_callback', ['post', 'page']); });

Säädä yllä oleva koodi haluamasi otsikon ja viestityyppien mukaan. Yllä oleva esimerkki lisää metalaatikon sekä viesteihin että sivuihin. Kolmas parametri, jota olen kutsunut awp_sidebar_menu_metabox_callback, on funktio, joka vastaa metaboxin sisällön hahmontamisesta. Määritellään se seuraavaksi. Tämä on mitä meidän on tehtävä metalaatikossamme:

function awp_sidebar_menu_metabox_callback($post) { // Get all menus   // Get the current saved menu, if set   // Output HTML with a select showing all menus, and mark the currently saved one as selected }

Voimme saada taulukon, jossa on kaikki tallennetut valikot WordPressiin wp_get_nav_menus(). Mitä tulee nykyisen valitun valikon noutamiseen, tallennamme valitun valikon post-meta-tekstiin awp_sidebar_menu(kutsu sitä miksi haluat), ja haemme arvon yksinkertaisesti $postmetabox-toiminnossa meille tarjotun virran perusteella. Tallennamme valikon tunnukset, koska se on kaikki, mitä tarvitsemme valikon näyttämiseen. Ja sitten annamme HTML-koodin valinnalle, joka kiertää valikoissa. Metaboxin HTML-tulostus on todella sinun päätettävissäsi, alla on esimerkki. Olen lisännyt myös nonce-toiminnot turvallisuuden vuoksi.

Tulostan HTML-tulosteeseen tarran. Jos WordPressissä ei ole lainkaan tallennettuja valikkoja, se näyttää yksinkertaisesti kappaleen. Muussa tapauksessa luodaan valinta, jossa valikon tunnukset ovat arvoina ja valikon nimet otsikoina. Lisään myös tyhjän valinnan, jotta viestit eivät näytä valikkoa. Käytän WordPressin aputoimintoa [selected](https://developer.wordpress.org/reference/functions/selected/)()nykyisen tallennetun vaihtoehdon merkitsemiseen valituksi.

Jos muokkaat viestiä tai sivua, alareunassa pitäisi näkyä metalaatikko, joka näyttää valintasi. Mahtava! Tässä vaiheessa se ei kuitenkaan tallenna valikkovalintaasi, kun tallennat viestin. Se on seuraava askel.

Tallennetaan valikon valinta

Luomme koukun save_postavulla toiminnon, joka tallentaa minkä tahansa metalaatikkoon lisäämämme valinnan. Koukku laukeaa aina, save_postkun viestiä tallennetaan tai päivitetään. Tarkistamme ensin noncen (jos et ole varma, mitä nonces ovat, tarkista tämä WordPress-opas noncesista ). Tämän jälkeen tarkistamme, saako käyttäjä päivittää viestejä, ja päivitämme postausmetamme valinnalla.

add_action('save_post', function($post_id) { if (!isset($_POST['awp_sidebar_menu_nonce']) || !wp_verify_nonce($_POST['awp_sidebar_menu_nonce'], 'awp_sidebar_menu_metabox_nonce')) { return; }   if (!current_user_can('edit_post', $post_id)) { return; }   update_post_meta($post_id, 'awp_sidebar_menu', $_POST['awp-sidebar-menu']); });

Nyt kun päivität viestejä, se tallentaa myös valikon valintasi.

Ja siinä se postin valintaosaan. Seuraava vaihe on itse asiassa valikon tulostaminen, jos valikko on valittu.

Mukautetun valikon sijainnin valitseminen

Lisään tulosteen sivupalkkiin, mutta voit tulostaa sen missä tahansa teemasi malleissa. Tarvitsemme vain joko ennalta määritellyn koukun tai määrittelemme omamme. Esimerkkinä lisään mukautetun koukun sivupalkin yläosaan, jotta voin luoda tähän kytketyn toiminnon.

Voit yksinkertaisesti soittaa wp_nav_menu()suoraan malliin, mutta suosittelen sen sijaan mukautetun koukun luomista, koska lisäämme melko vähän koodia ja se voi näyttää sotkuiselta.

Minun teemassa jota muokkaan sidebar.phpja juuri ennen dynamic_sidebar()sivupalkkia kutsutaan (johon widgetit lisätään), lisään mukautetun koukun do_action()ja etunimen. Voit kutsua sitä miksi haluat, mutta sen on oltava ainutlaatuinen WordPressissä. Joten ainakin etuliitä sille jotain ainutlaatuista sinulle.

Valikon renderöiminen

Nyt voimme palata kohtaan functions.php, määrittää funktion, johon on kiinnitetty, awp_before_sidebarja sen tulos näkyy sivupalkissa ennen widgetejä. Toiminto käyttää WordPressin ehdollisia tageja tarkistaakseen, näytämmekö tällä hetkellä yksittäistä viestiä 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/)()ja antamalla sen menuparametriksi tallennetun valikkotunnuksen.

Sinun tulee säätää valikon ympärillä olevaa HTML-koodia niin, että se sopii muun sisällön kanssa. Yllä olevassa koodissa käärin valikon samaan HTML-koodiin, jossa kaikki sivupalkin widgetit on kääritty niin, että teeman widget-tyyli koskee mukautettua valikkoamme.

Se siitä! Aina kun valitset valikon viestissä tai sivulla, valikko näkyy sivupalkin yläpuolella, kun tarkastelet kyseistä viestiä tai sivua.

Voimme kuitenkin ottaa askeleen pidemmälle. Jos haluat, että lapsisivut näyttävät saman sivupalkin valikon missä tahansa vanhemmassa, lue eteenpäin.

Salli alisivujen periä vanhemman valikko

Tämä lisäominaisuus on järkevä, jos sinulla on paljon sivuja hierarkiassa tai mukautettu viestityyppi, jossa hierarkia on päällä. Olisi liian hankalaa muokata jokaista alisivua ja valita sama valikko. Siinä tapauksessa on parempi valita yläsivun valikko ja antaa kaikkien alasivujen automaattisesti "periä" tämä valikkovaihtoehto. Jos jokin alasivu valitsee toisen valikon, se valikko näytetään kerran "perityn" sijaan.

Lisäämme koodinpätkän toimintoomme, joka on koukussa toimintoon awp_before_sidebar, sekin sisään, jos katsomme yksittäistä viestiä tai sivua:

Mitä yllä oleva koodi tekee, jos valikkoa ei löydy nykyiseltä sivulta, hakee kaikki vanhemmat, joilla on [get_post_ancestors](https://developer.wordpress.org/reference/functions/get_post_ancestors/)(). Tämä funktio palauttaa joukon ylätason viestitunnuksia lajiteltuna ensin lähimmän ylätason mukaan. Jos sivulla ei ole vanhempia (esimerkiksi jos se on viesti), palautetaan tyhjä taulukko. Ja jos vanhempia on, käymme läpi jokaisen vanhemman yksitellen ja tarkistamme, ovatko he asettaneet post-metamme. Jos sellainen löydetään, lopetamme vanhempien kulkemisen ja $sidebar_menuasetetaan ja valikko tulostetaan myöhemmin -painikkeella wp_nav_menu().

Ja siinä se "perinnön" toiminnalle!

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja