WordPress handledning: Anpassad meny för inlägg eller sidor i sidofältet

Det här inlägget är för dig som hanterar en WordPress-sajt som har mycket innehåll, eventuellt många sidor strukturerade i hierarki, och önskar bättre navigering utanför huvudmenyn. För att hjälpa till att navigera på webbplatsen kommer en anpassad meny relaterad till det aktuella inlägget att hjälpa enormt. Problemet med att placera en menywidget i sidofältet (eller var du vill) är att sidofältet är vanligt. I det här inlägget kommer vi att lära oss hur du visar en extra anpassad meny i sidofältet, genom att tillåta inlägg, sidor eller anpassade inläggstyper att välja en meny.

Lägg till koden nedan i ditt teman functions.phpeller i din plugin-kod.

Tillåt inlägg eller sidor att välja en meny

Det är enkelt att skapa menyer i WordPress, och du kan använda menywidgeten för att visa en meny i sidofältet. Problemet är att sidofältet är globalt och samma meny kommer att visas överallt. Vad händer om du vill att specifika menyer ska visas på specifika sidor? Du kommer också att lära dig hur du kan se till att den valda menyn ärvs av underordnade sidor. På så sätt behöver du bara välja menyn på den överordnade sidan. Alla undersidor kommer också att visa samma meny utan att behöva redigera alla.

Lägga till en metabox för att välja meny

Det första steget är att skapa en metabox på inlägg eller sidor där vi får möjlighet att välja en meny. Vi använder funktionen add_meta_box()och bestämmer vilka inläggstyper vi vill visa den för.

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

Justera ovanstående kod till den titel och inläggstyper du vill ha. Ovanstående exempel kommer att lägga till metaboxen till både inlägg och sidor. Den tredje parametern, vad jag har kallat awp_sidebar_menu_metabox_callback, är funktionen som ansvarar för att rendera metaboxens innehåll. Låt oss definiera det härnäst. Det här är vad vi behöver göra i vår metabox:

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
}

Vi kan få en array med alla sparade menyer i WordPress med wp_get_nav_menus(). När det gäller att hämta aktuell vald meny lagrar vi den valda menyn som en postmeta i awp_sidebar_menu(kalla det vad du vill), och vi hämtar helt enkelt värdet baserat på strömmen $postsom tillhandahålls oss i metabox-funktionen. Vi kommer att spara meny-ID eftersom det är allt vi behöver för att visa en meny. Och sedan matar vi ut HTML för ett urval som går igenom menyerna. HTML-utgången för metaboxen är verkligen upp till dig, nedan är ett exempel. Jag har inkluderat nonce-funktionalitet för säkerhet också.

I HTML-utgången skriver jag ut en etikett. Om det inte finns några sparade menyer i WordPress alls, kommer det helt enkelt att visa ett stycke. Annars genereras ett urval med meny-ID:n som värden och menynamn som etikett. Jag lägger också till ett tomt val för att tillåta att inlägg inte visar en meny. Jag använder WordPresss hjälpfunktion [selected](https://developer.wordpress.org/reference/functions/selected/)()för att hantera att markera det aktuella sparade alternativet som valt.

Om du redigerar ett inlägg eller en sida bör du se metaboxen visas längst ner, som visar ditt val. Grymt bra! Men vid denna tidpunkt kommer det för närvarande inte att spara ditt menyval när du sparar inlägget. Det är nästa steg.

Sparar menyvalet

Vi använder kroken save_postför att skapa en funktion som sparar alla val vi har lagt till i vår metabox. Kroken save_postutlöses varje gång ett inlägg sparas eller uppdateras. Vi kontrollerar nonce först (om du är osäker på vad nonces är, kolla denna WordPress-guide om nonces ). Vi dubbelkollar sedan om användaren får uppdatera inlägg och uppdaterar vår inläggsmeta med valet.

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']);
});

Nu när du uppdaterar inlägg sparar den också ditt val av meny.

Och det var allt för inläggsvalsdelen. Nästa steg är faktiskt att mata ut menyn om en meny har valts.

Välja en position för den anpassade menyn

Jag lägger till utdata i sidofältet, men du kan mata ut det var som helst i ditt temas mallar. Vi behöver bara antingen en fördefinierad krok eller definiera vår egen. Som ett exempel lägger jag till en anpassad krok överst i sidofältet, så att jag kan skapa en funktion kopplad till denna.

Du kan helt enkelt ringa wp_nav_menu()direkt i mallen men jag rekommenderar att du skapar en anpassad krok istället eftersom vi kommer att lägga till en hel del kod och det kan verka rörigt.

I mitt tema redigerar jag sidebar.phpoch precis innan dynamic_sidebar()med sidofältet kallas (där widgets läggs till), lägger jag till min anpassade krok med do_action()och ett givet namn. Du kan kalla det vad du vill, men det måste vara unikt inom WordPress. Så prefix det åtminstone med något unikt för dig.

Rendering av menyn

Nu kan vi gå tillbaka till functions.php, definiera en funktion kopplad till awp_before_sidebaroch dess utdata kommer att visas i sidofältet före widgetarna. Funktionen kommer att använda WordPress villkorliga taggar för att kontrollera om vi för närvarande visar ett enskilt inlägg eller en sida. Och i så fall hämtar jag vår postmeta. Om post-meta var inställd matar vi ut menyn genom att anropa [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()och ange det sparade meny-ID som menuparameter.

Du bör justera HTML-koden runt menyn så att den passar in i resten av innehållet. I koden ovan slår jag in menyn i samma HTML som alla widgets i sidofältet är inslagna i så att temats widget-styling gäller för vår anpassade meny.

Det är allt! När du väljer en meny i ett inlägg eller sida kommer menyn att visas ovanför sidofältet när du tittar på inlägget eller sidan.

Vi kan dock ta det ett steg längre. Om du vill att barnsidor ska visa samma sidofältsmeny i någon av föräldrarna, läs vidare.

Tillåt underordnade sidor att ärva förälderns meny

Denna extra funktion är vettig om du har många sidor i en hierarki, eller en anpassad inläggstyp med hierarki aktiverad. Det skulle vara för krångligt att redigera varje enskild underordnad sida och välja samma meny. I så fall är det bättre att välja menyn på den överordnade sidan och automatiskt låta alla undersidor "ärva" det menyvalet. Om någon undersida väljer en annan meny kommer den menyn att visas istället för den "ärvda" en gång.

Inuti vår funktion kopplad till awp_before_sidebar, lägger vi till en kodbit, i kontrollen om vi tittar på ett enskilt inlägg eller en sida:

Vad ovanstående kod gör om ingen meny hittades på den aktuella sidan hämtar alla föräldrar med [get_post_ancestors](https://developer.wordpress.org/reference/functions/get_post_ancestors/)(). Den här funktionen returnerar en uppsättning av föräldrapost-ID:n sorterade efter närmaste förälder först. Om sidan inte har några föräldrar (till exempel om det är ett inlägg) returneras en tom array. Och om det finns några föräldrar går vi igenom varje förälder en efter en och kollar om de har satt vår postmeta. Om en hittas bryter vi ut från att korsa föräldrarna och $sidebar_menukommer att ställas in och menyn kommer att matas ut senare med wp_nav_menu().

Och det är allt för "arvs"-funktionen!