{"id":233843,"date":"2023-02-23T10:07:00","date_gmt":"2023-02-23T07:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233843"},"modified":"2022-11-11T12:45:00","modified_gmt":"2022-11-11T09:45:00","slug":"wordpressi-teemaopetus-algajatele-9-osa-menueued-ja-vidinate-alad","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/wordpressi-teemaopetus-algajatele-9-osa-menueued-ja-vidinate-alad\/","title":{"rendered":"WordPressi teema\u00f5petus algajatele \u2013 9. osa: men\u00fc\u00fcd ja vidinate alad"},"content":{"rendered":"\n

See \u00f5ppetund h\u00f5lmab seda, kuidas lisada meie teemale kaks WordPressi p\u00f5hifunktsiooni; men\u00fc\u00fcd ja vidinate alad. \u00d5pime, kuidas registreerida saidi navigeerimismen\u00fc\u00fc asukohta ja v\u00e4ljastada men\u00fc\u00fcd oma mallides, samuti lubada vidinate lisamist meie k\u00fclgribale ja jalusele.<\/p>\n

Innukad v\u00f5isid m\u00e4rgata, et ei "Men\u00fc\u00fcd" ega "Vidinad" pole juurdep\u00e4\u00e4setavad administraatoripaneeli men\u00fc\u00fcst "V\u00e4limus". P\u00f5hjus on selles, et meie teema ei toeta neid veel. Parandame selle selles \u00f5ppet\u00fckis \u2013 alustades men\u00fc\u00fcdest. .<\/p>\n

WordPressi men\u00fc\u00fcd<\/h2>\n

Teemasse men\u00fc\u00fcde lisamisel on kaks osa. K\u00f5igepealt peate m\u00e4\u00e4rama oma men\u00fc\u00fcs \u00fche v\u00f5i mitu men\u00fc\u00fc asukohta functions.php<\/code>. N\u00e4iteks peamen\u00fc\u00fc, mis asub k\u00f5igi lehtede p\u00e4ises. Teine osa on koodi lisamine kohta, kuhu soovite men\u00fc\u00fc v\u00e4ljastada. N\u00e4iteks kohta header.php<\/code>, kuhu soovite peamen\u00fc\u00fc paigutada.<\/p>\n

Men\u00fc\u00fc asukoha registreerimine<\/h3>\n

Selles \u00f5petuses lisame saidi p\u00f5hinavigatsiooni jaoks \u00fche men\u00fc\u00fc asukoha ja asetame selle v\u00e4ljundi meie header.php<\/code>. Alustame asukoha registreerimisest asukohas functions.php<\/code>, mis toimub funktsiooni register_nav_menu<\/a> abil :<\/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
Peame konksu k\u00fclge haakima init<\/code>, mis WordPressi arvates on men\u00fc\u00fc asukohtade registreerimiseks hea kontrollpunkt. Funktsiooni sees kutsume register_nav_menu()<\/code>v\u00e4lja, mis aktsepteerib minimaalselt kahte parameetrit; men\u00fc\u00fck\u00e4epide, mis on ainulaadne n\u00e4pun\u00e4ide, mida kasutate men\u00fc\u00fc renderdamisel identifikaatorina, ja administraatoripaneelil kuvatav men\u00fc\u00fc n\u00e4htav nimi. Pange t\u00e4hele, et ma pakkisin nime sisse __()<\/code>, et muuta see t\u00f5lgitavaks, nagu \u00f5ppisime eelmises etapis<\/a>.<\/p>\n
\"WordPressi<\/a><\/p>\n
Kui v\u00e4rskendate oma administraatoripaneeli, peaksite n\u00fc\u00fcd n\u00e4gema jaotises "V\u00e4limus" uut alammen\u00fc\u00fc elementi; "Men\u00fc\u00fcd". \u00d5nnitleme, teie teema toetab n\u00fc\u00fcd men\u00fc\u00fcde loomist!<\/p>\n
Kui te pole WordPressis men\u00fc\u00fcde loomise ja haldamisega kursis, on see hea juhend<\/a> teile.<\/p>\n
Looge uus men\u00fc\u00fc jaotises "V\u00e4limus > Men\u00fc\u00fcd" – see v\u00f5ib sisaldada k\u00f5ike, mida soovite, lisasin lihtsalt oma WordPressis loodud n\u00e4ivpostitused.<\/p>\n
P\u00e4rast esimese men\u00fc\u00fc salvestamist ilmub teie men\u00fc\u00fc redigeerimisala alla uus jaotis nimega "Men\u00fc\u00fc seaded", mis v\u00f5imaldab teil valida selle men\u00fc\u00fc asukoha. See peaks loetlema \u00fche saadaoleva asukoha, mis on meie loodud asukoht; "Peamine navigeerimine".<\/p>\n
\"WordPressi<\/a><\/p>\n
M\u00e4rkige ruut "Peamine navigeerimine" ja kl\u00f5psake nuppu Salvesta. N\u00fc\u00fcd on teie vastloodud men\u00fc\u00fc asukohaga \u00fchendatud ja kuvatakse automaatselt k\u00f5ikjal, kus lisate selle men\u00fc\u00fc asukoha v\u00e4ljastamiseks koodi. Teeme seda n\u00fc\u00fcd.<\/p>\n
Men\u00fc\u00fc asukoha v\u00e4ljastamine mallis<\/h3>\n
Avage header.php<\/code>ja kuhu iganes soovite men\u00fc\u00fcv\u00e4ljundit lisada, helistage numbrile wp_nav_menu()<\/code>. See funktsioon aktsepteerib massiivi terve hulga argumente, et men\u00fc\u00fcv\u00e4ljundit t\u00f5eliselt kohandada. K\u00f5ige t\u00e4htsam on see, et vajame parameetrit, mis k\u00e4sib sellel tuua peamise navigeerimise asukoha. Selleks lisame argumendi " theme_location<\/code>" ja m\u00e4\u00e4rame selle meie men\u00fc\u00fc k\u00e4epidemesse; ‘ main-nav<\/code>‘.<\/p>\n
Lisasin men\u00fc\u00fc v\u00e4ljundi kohe p\u00e4rast <body><\/code>sildi algust, kuid kui olete oma mallid HTML-iga t\u00e4iendanud, otsustage ise, kus soovite men\u00fc\u00fc kuvada.<\/p>\n
...\n<body <?php body_class(); ?>>\n    <nav class=\"main-nav\"><?php wp_nav_menu(['theme_location' => 'main-nav']); ?><\/nav><\/code><\/pre>\n
V\u00e4rskendage oma kasutajaliidest ja te peaksite n\u00e4gema administraatoris loodud men\u00fc\u00fc malli alguses j\u00e4rjestamata loendina.<\/p>\n
\"WordPressi<\/a><\/p>\n
Nagu tavaliselt, soovitan teil WordPress Codexi dokumentatsiooni<\/a>wp_nav_menu<\/code> parameetritesse pisut s\u00fcveneda ja m\u00e4ngida ringi sellega, kuidas soovite v\u00e4ljundit n\u00e4ha. N\u00e4iteks: saate seda mitte HTML-loendis v\u00e4ljastada, saate piirata men\u00fc\u00fcelemente ainult teatud tasemetega (alamen\u00fc\u00fcde v\u00e4ltimiseks) ja palju muud.<\/a><\/p>\n
Kui olete stiiliosa vastu uudishimulik; vaadake, milliseid klasse WordPress igale men\u00fc\u00fcelemendile automaatselt lisab. Saate h\u00f5lpsasti lisada stiile aktiivsele men\u00fc\u00fc\u00fcksusele, \u00fcksustele, millel on alam\u00fcksused, aktiivse alam\u00fcksuse ema\u00fcksusele jne.<\/p>\n
M\u00e4rkus. Iga teema kasutaja saab alati luua mitu men\u00fc\u00fcd ja kuvada need vidinate abil v\u00e4ljaspool teema registreeritud asukohti. Kuid selleks peab teie teema m\u00e4\u00e4ratlema m\u00f5ned vidinapiirkonnad! Teeme seda j\u00e4rgmisena.<\/p>\n
Vidinate alad<\/h2>\n
Vidinaalad t\u00f6\u00f6tavad men\u00fc\u00fcde t\u00f6\u00f6s \u00fcsna sarnaselt. Registreerite asukoha (vidinate jaoks m\u00e4\u00e4rate piirkonna, kuhu teemakasutaja saab vidinaid paigutada) ja kuhu iganes soovite, et asukoht\/ala teie mallides ilmuks, lisate natuke koodi, mis viitab teie antud k\u00e4epideme ID-le. registreerimiskood.<\/p>\n
M\u00e4\u00e4ratleme vidina ala oma k\u00fclgribal ja \u00fche jaluses. On tavaline, et teemad pakuvad jaluses mitu vidinaala, et need kenasti veergudeks jagada, kuid selles \u00f5petuses lisame jalusesse lihtsalt \u00fche.<\/p>\n
Vidinapiirkondi nimetatakse WordPressi koodis "k\u00fcljeribadeks", kuid see pole m\u00f5eldud ainult veebisaitide vana aja parema k\u00fclgriba jaoks. N\u00e4ib, et m\u00f5ni p\u00e4randnimi on lihtsalt k\u00fclge j\u00e4\u00e4nud ajast, mil veebisaitide k\u00fclgribal oli tavaliselt ainult vidinaala. \u00c4rge arvake, et "k\u00fcljeribad" v\u00f5ivad viidata ainult tegelikele k\u00fclgribadele.<\/p>\n
Registreerige vidinaalad<\/h3>\n
Alustuseks registreerime kaks vidinaala meie functions.php<\/code>. Kasutame funktsiooni register_sidebar<\/code>oma konksu k\u00fclge kinnitatud k\u00fclgribade registreerimiseks widgets_init<\/code>, mille WordPress on m\u00e4\u00e4ratlenud kui parimat konksu vidinaalade (ja kohandatud vidinate) registreerimiseks.<\/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
Funktsioon register_sidebar()<\/code>aktsepteerib \u00fcsna v\u00e4he argumente, minimaalselt vajate argumente "id" ja "nimi". Saadaval on parameetrid, mille abil saate m\u00e4\u00e4rata, kuidas soovite vidina HTML-i \u00fcmbriseid v\u00e4ljastada.<\/p>\n
V\u00e4rskendage oma administraatoripaneeli ja n\u00fc\u00fcd peaksite n\u00e4gema jaotises "V\u00e4limus" men\u00fc\u00fck\u00e4sku "Vidinad". Administraatoripaneelil "Vidinad" n\u00e4ete paremas piirkonnas kahte saadaolevat vidinaala; mis on meie k\u00fclgriba vidinate ala ja jaluse vidinate ala.<\/p>\n
\"WordPressi<\/a><\/p>\n
Asetage juhuslik vidin meie k\u00fclgriba v\u00f5i jaluse vidinate alale, nii et n\u00e4ete seda tegevuses.<\/p>\n
Vidinaala v\u00e4ljastamine mallis<\/h3>\n
Viimane osa on vidinaalade v\u00e4ljastamine meie mallidele. Selleks kasutame funktsiooni dynamic_sidebar()<\/code>ja esitame parameetrina k\u00e4epideme. Avage sidebar.php<\/code>ja lisage <aside><\/code>siltide sisse j\u00e4rgmine teave:<\/p>\n
<aside class=\"sidebar\">\n    <ul><?php dynamic_sidebar('sidebar-area'); ?><\/ul>\n<\/aside><\/code><\/pre>\n
Pange t\u00e4hele, et pakkisin selle j\u00e4rjestamata loendim\u00e4rgendi (<ul><\/code>) sisse. Selle p\u00f5hjuseks on asjaolu, et vaikimisi dynamic_sidebar<\/code>v\u00e4ljastatakse k\u00f5ik \u00fcksustesse pakitud vidinad <li><\/code>. Soovitan teil v\u00e4ljundparameetritega m\u00e4ngida, kui teile ei meeldi, et vidinad on loend.<\/p>\n
Jaluse osas lisame selle m\u00e4rgendi footer.php<\/code>sisse m\u00e4hituna <footer><\/code>(kui soovite).<\/p>\n
    <footer>\n        <ul><?php dynamic_sidebar('footer-area'); ?><\/ul>\n    <\/footer>\n    <?php wp_footer(); ?>\n...<\/code><\/pre>\n
See on k\u00f5ik men\u00fc\u00fcde ja vidinate jaoks. Teie teemal on n\u00fc\u00fcd kasutajal v\u00f5imalus luua uus men\u00fc\u00fc ja kasutada selle k\u00fclgribal v\u00f5i jaluses kuvamiseks vidinat. Selle \u00f5petuste seeria j\u00e4rgmises \u00f5ppet\u00fckis<\/a> loome oma teemale rohkem malle.<\/p>\n
Kasutatud meetodite dokumentatsioon<\/h2>\n