{"id":233815,"date":"2023-02-23T10:07:00","date_gmt":"2023-02-23T07:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233815"},"modified":"2022-11-11T12:35:31","modified_gmt":"2022-11-11T09:35:31","slug":"wordpress-temahandledning-foer-nyboerjare-del-9-menyer-och-widgetomraaden","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-temahandledning-foer-nyboerjare-del-9-menyer-och-widgetomraaden\/","title":{"rendered":"WordPress-temahandledning f\u00f6r nyb\u00f6rjare \u2013 Del 9: Menyer och widgetomr\u00e5den"},"content":{"rendered":"\n

Den h\u00e4r lektionen tar upp hur du l\u00e4gger till tv\u00e5 grundl\u00e4ggande WordPress-funktioner till v\u00e5rt tema; menyer och widgetomr\u00e5den. Vi l\u00e4r oss hur man registrerar en plats f\u00f6r en webbplatsens huvudnavigeringsmeny och matar ut menyn i v\u00e5ra mallar, samt till\u00e5ter att l\u00e4gga till widgets i v\u00e5rt sidof\u00e4lt och sidfotsomr\u00e5de.<\/p>\n

De som \u00e4r intresserade av er kanske har m\u00e4rkt att varken "menyer" eller "widgetar" \u00e4r tillg\u00e4ngliga fr\u00e5n "Utseende"-menyn i adminpanelen. Detta beror p\u00e5 att v\u00e5rt tema inte st\u00f6der dessa \u00e4nnu. Vi kommer att fixa det i den h\u00e4r lektionen – med b\u00f6rjan i menyer .<\/p>\n

WordPress menyer<\/h2>\n

Det finns tv\u00e5 delar i att l\u00e4gga till menyer i ditt tema. F\u00f6rst m\u00e5ste du definiera en eller flera menyplatser i din functions.php<\/code>. Ett exempel \u00e4r en huvudmeny som kommer att finnas i rubriken p\u00e5 alla sidor. Den andra delen \u00e4r att l\u00e4gga till lite kod p\u00e5 den plats d\u00e4r du vill att menyn ska matas ut. Till exempel header.php<\/code>p\u00e5 den plats du vill placera huvudmenyn.<\/p>\n

Registrera en menyplats<\/h3>\n

I den h\u00e4r handledningen kommer vi att l\u00e4gga till en menyplats f\u00f6r webbplatsens huvudnavigering och placera dess utdata i v\u00e5r header.php<\/code>. L\u00e5t oss b\u00f6rja med att registrera platsen i functions.php<\/code>, vilket g\u00f6rs genom att anv\u00e4nda funktionen 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
Vi m\u00e5ste haka p\u00e5 kroken init<\/code>, vilket WordPress har best\u00e4mt \u00e4r en bra "kontrollpunkt" f\u00f6r att registrera menyplatser. Inuti v\u00e5r funktion anropar vi register_nav_menu()<\/code>som accepterar ett minimum av tv\u00e5 parametrar; menyhandtaget som \u00e4r en unik slug som du kommer att anv\u00e4nda som en identifierare n\u00e4r du renderar menyn, och det synliga namnet p\u00e5 menyn som visas i adminpanelen. Observera att jag lindade in namnet __()<\/code>f\u00f6r att g\u00f6ra det \u00f6vers\u00e4ttbart, som vi l\u00e4rde oss i f\u00f6reg\u00e5ende steg<\/a>.<\/p>\n
\"WordPress-temahandledning<\/a><\/p>\n
Om du uppdaterar din adminpanel b\u00f6r du nu se en ny undermeny under "Utseende"; "Menyer". Grattis, ditt tema st\u00f6der nu skapande av menyer!<\/p>\n
Om du inte \u00e4r bekant med att g\u00f6ra och administrera menyer i WordPress \u00e4r det h\u00e4r en bra guide<\/a> f\u00f6r dig.<\/p>\n
Skapa en ny meny i "Utseende > Menyer" \u2013 den kan inneh\u00e5lla vad du vill, jag har precis lagt till dummy-inl\u00e4ggen jag hade skapat i min WordPress.<\/p>\n
N\u00e4r du har sparat din f\u00f6rsta meny kommer ett nytt avsnitt som heter "Menyinst\u00e4llningar" att dyka upp under ditt menyredigeringsomr\u00e5de, som l\u00e5ter dig v\u00e4lja en plats f\u00f6r den h\u00e4r menyn. Det b\u00f6r lista en tillg\u00e4nglig plats, vilket \u00e4r den vi gjorde; "Huvudnavigering".<\/p>\n
\"WordPress-temahandledning<\/a><\/p>\n
Placera en bock i "Huvudnavigering" och tryck p\u00e5 Spara. Nu \u00e4r din nyskapade meny kopplad till platsen och kommer att visas automatiskt var du \u00e4n l\u00e4gger till koden f\u00f6r att mata ut denna menyplats. L\u00e5t oss g\u00f6ra det nu.<\/p>\n
Mata ut en menyplats i en mall<\/h3>\n
\u00d6ppna upp header.php<\/code>och var du \u00e4n vill att menyutg\u00e5ngen ska vara, l\u00e4gg till ett samtal till wp_nav_menu()<\/code>. Den h\u00e4r funktionen accepterar en hel massa argument i en array f\u00f6r att verkligen anpassa menyutg\u00e5ngen. Viktigast av allt beh\u00f6ver vi parametern som s\u00e4ger att den ska h\u00e4mta platsen f\u00f6r "Huvudnavigering". F\u00f6r att g\u00f6ra det l\u00e4gger vi till argumentet ’ theme_location<\/code>’ och st\u00e4ller in det i handtaget p\u00e5 v\u00e5r meny; ’ main-nav<\/code>’.<\/p>\n
Jag lade till menyutg\u00e5ngen direkt efter start av <body><\/code>taggen, men om du har kompletterat dina mallar med HTML, best\u00e4m sj\u00e4lv var du vill att menyn ska visas.<\/p>\n
...\n<body <?php body_class(); ?>>\n    <nav class=\"main-nav\"><?php wp_nav_menu(['theme_location' => 'main-nav']); ?><\/nav><\/code><\/pre>\n
Uppdatera din frontend och du b\u00f6r se menyn du skapade i admin som en oordnad lista i b\u00f6rjan av mallen.<\/p>\n
\"WordPress-temahandledning<\/a><\/p>\n
Som vanligt uppmuntrar jag dig att gr\u00e4va lite djupare i parametrarna f\u00f6r att wp_nav_menu<\/code>i WordPress Codex-dokumentation f\u00f6r det<\/a> och leka med hur du vill att utdata ska vara. Till exempel: du kan g\u00f6ra att det inte matas ut i en HTML-lista, du kan begr\u00e4nsa menyalternativen till endast vissa niv\u00e5er (f\u00f6r att f\u00f6rhindra undermenyer) och mer.<\/p>\n
Om du \u00e4r nyfiken p\u00e5 stylingdelen; ta en titt p\u00e5 klasserna WordPress l\u00e4gger till automatiskt i varje menyalternativ. Du kommer enkelt att kunna l\u00e4gga till stilar f\u00f6r aktivt menyobjekt, objekt som har underordnade objekt, \u00f6verordnat objekt f\u00f6r ett aktivt underordnat objekt, etc.<\/p>\n
Obs: Alla temaanv\u00e4ndare kan alltid skapa flera menyer och v\u00e4lja att visa dessa utanf\u00f6r ett temas registrerade platser med hj\u00e4lp av widgets. Men f\u00f6r att g\u00f6ra detta m\u00e5ste ditt tema definiera n\u00e5gra widgetomr\u00e5den! L\u00e5t oss g\u00f6ra det h\u00e4rn\u00e4st.<\/p>\n
Widgetomr\u00e5den<\/h2>\n
Widgetomr\u00e5den fungerar ganska lika i hur menyer fungerar. Du registrerar en plats (f\u00f6r widgetar definierar du ett omr\u00e5de d\u00e4r temaanv\u00e4ndaren kan placera widgets i), och var du \u00e4n vill att platsen\/omr\u00e5det ska visas i dina mallar l\u00e4gger du till lite kod som h\u00e4nvisar till handtags-id:t du angav i din registreringskod.<\/p>\n
L\u00e5t oss definiera ett widgetomr\u00e5de i v\u00e5rt sidof\u00e4lt och ett i sidfoten. Det \u00e4r vanligt att teman tillhandah\u00e5ller flera widgetomr\u00e5den i sidfoten f\u00f6r att dela upp dem snyggt i kolumner, men i den h\u00e4r handledningen l\u00e4gger vi bara till en i sidfoten.<\/p>\n
Widgetomr\u00e5den h\u00e4nvisas till som "sidof\u00e4lt" i WordPress-kod, men det \u00e4r inte enbart f\u00f6r det gamla h\u00f6gra sidof\u00e4ltet p\u00e5 webbplatser. Det verkar som att ett gammalt namn bara har fastnat fr\u00e5n en tid d\u00e5 webbplatser vanligtvis bara hade ett widgetomr\u00e5de i sidof\u00e4ltet. Tro inte att "sidof\u00e4lt" bara kan referera till faktiska sidof\u00e4lt.<\/p>\n
Registrera widgetomr\u00e5den<\/h3>\n
Vi b\u00f6rjar med att registrera tv\u00e5 widgetomr\u00e5den i v\u00e5r functions.php<\/code>. Vi anv\u00e4nder funktionen register_sidebar<\/code>f\u00f6r att registrera v\u00e5ra sidof\u00e4lt, anslutna till widgets_init<\/code>kroken, som WordPress har definierat som den b\u00e4sta kroken f\u00f6r att registrera widgetomr\u00e5den (och anpassade widgets).<\/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
Funktionen register_sidebar()<\/code>accepterar en hel del argument, som minimum beh\u00f6ver du argumenten ’id’ och ’name’. Det finns parametrar tillg\u00e4ngliga f\u00f6r att definiera hur du vill att widgetens HTML-omslag ska matas ut.<\/p>\n
Uppdatera din adminpanel och du b\u00f6r nu se menyalternativet "Widgets" visas under "Utseende". I "Widgets" adminpanel kan du se tv\u00e5 tillg\u00e4ngliga widgetomr\u00e5den i det h\u00f6gra omr\u00e5det; som \u00e4r v\u00e5rt "Sidef\u00e4ltswidgetomr\u00e5de" och "Sidfotswidgetomr\u00e5de".<\/p>\n
\"WordPress-temahandledning<\/a><\/p>\n
Placera en slumpm\u00e4ssig widget i v\u00e5rt sidof\u00e4lt eller sidfotswidgetomr\u00e5de, bara s\u00e5 att du kan se den i aktion.<\/p>\n
Mata ut ett widgetomr\u00e5de i en mall<\/h3>\n
Den sista delen \u00e4r att mata ut widgetomr\u00e5dena till v\u00e5ra mallar. F\u00f6r att g\u00f6ra detta anv\u00e4nder vi funktionen dynamic_sidebar()<\/code>och tillhandah\u00e5ller handtaget som parameter. \u00d6ppna sidebar.php<\/code>och l\u00e4gg till f\u00f6ljande i <aside><\/code>taggarna:<\/p>\n
<aside class=\"sidebar\">\n    <ul><?php dynamic_sidebar('sidebar-area'); ?><\/ul>\n<\/aside><\/code><\/pre>\n
L\u00e4gg m\u00e4rke till att jag lindade in den i en oordnad listtagg (<ul><\/code>). Detta beror dynamic_sidebar<\/code>p\u00e5 att alla widgets som \u00e4r inslagna i <li><\/code>objekt som standard visas. Jag uppmuntrar dig att leka med utdataparametrarna om du inte gillar att widgets \u00e4r en lista.<\/p>\n
N\u00e4r det g\u00e4ller sidfoten l\u00e4gger vi till den i b\u00f6rjan av footer.php<\/code>, insvept i en <footer><\/code>tagg (om du vill).<\/p>\n
    <footer>\n        <ul><?php dynamic_sidebar('footer-area'); ?><\/ul>\n    <\/footer>\n    <?php wp_footer(); ?>\n...<\/code><\/pre>\n
Det \u00e4r det f\u00f6r menyer och widgetomr\u00e5den. Ditt tema har nu anv\u00e4ndarens flexibilitet att skapa en ny meny och anv\u00e4nda en widget f\u00f6r att visa den i sidof\u00e4ltet eller sidfoten. I n\u00e4sta lektion<\/a> i denna handledningsserie kommer vi att skapa fler mallar till v\u00e5rt tema.<\/p>\n
Dokumentation om anv\u00e4nda metoder<\/h2>\n