Creați un meniu de navigare personalizat în WordPress fără a utiliza pluginuri

Indiferent de tema WordPress pe care o utilizați, aproape sigur va oferi cel puțin o locație de meniu unde vă puteți afișa meniul (în mod normal, în antetul site-ului dvs.). Meniurile pot fi create cu ușurință din interiorul zonei de administrare și adăugate rapid la aceste locații prestabilite. Dar ce faci dacă ai nevoie de un alt meniu pentru a fi afișat în altă parte pe site-ul tău? În acest tutorial, vom vedea cum vă puteți crea propriul meniu de navigare care poate fi afișat într-o locație la alegere, fără a fi nevoie să utilizați un plugin.

Haide să mergem!

Înregistrați-vă noua locație de meniu personalizat

Primul lucru pe care trebuie să-l facem este să înregistrăm locația noului meniu personalizat. Pentru a face acest lucru, deschideți fișierul functions.php al temei active cu editorul de text dorit (cum ar fi Sublime) și adăugați următorul cod:

 function my_custom_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'my_custom_menu' );

În această bucată de cod, am folosit hook-ul add_action() pentru a adăuga o funcție de apel invers my_custom_menu() . Aceasta înseamnă că funcția my_custom_menu() va fi executată împreună cu funcțiile de bază implicite care sunt executate de fiecare dată când este apelată acțiunea init . Șirul „Meniul meu personalizat” este versiunea care poate fi citită pe care o veți vedea în pagina de administrare.

În interiorul funcției, funcția de bază register_nav_menu este utilizată pentru a înregistra o locație a meniului de navigare pentru tema noastră. În cazul în care doriți să înregistrați mai multe meniuri, puteți utiliza register_nav_menus() și puteți defini locațiile meniului într-o matrice astfel:

 function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );

Pentru a confirma rezultatele, accesați zona dvs. de administrare sub Aspect > Meniuri. Veți observa că locația dvs. personalizată a meniului este inclusă în Setările meniului.

Notă: Dacă selectăm această locație în acest moment, meniul nu va afișa absolut nimic la interfață.

Cum să afișați meniul nostru personalizat

Să presupunem că dorim ca noua locație a meniului să fie utilizată pentru un meniu orizontal secundar care va fi situat sub „Meniul orizontal desktop” care este deja prezent în tema noastră.

Pentru a realiza acest lucru vom introduce un cod în șablonul temei în care dorim să fie afișat meniul. În acest exemplu, folosim tema Twenty Twenty și îi edităm fișierul header.php pentru a afișa meniul nostru. Veți găsi acest fișier în folderul temei.

Deschideți fișierul header.php cu editorul și găsiți acest element în codul din jurul liniei 33.

 <header class="header-footer-group" role="banner">

Chiar sub această secțiune vom pune codul nostru pentru a afișa noua locație personalizată a meniului: „my-custom-menu”.

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>

Valoarea theme_location trebuie să fie identică cu numele pe care l-ați furnizat pentru meniul dvs. în codul functions.php pe care l-am lipit anterior. În cazul nostru: „meniul-meu-personalizat”.

Acum să creăm un meniu de testare pentru a vedea dacă funcționează. Pentru a face acest lucru, accesați Aspect > Meniuri și începeți să creați un nou meniu.

Dați meniului titlul „Meniu secundar”, selectați „Meniul meu personalizat” pentru o locație și apoi apăsați butonul „Creare meniu”.

În cele din urmă, adăugați câteva elemente în meniu (de exemplu, elementul de meniu 1, elementul de meniu 2, elementul de meniu 3) și apoi salvați meniul.

Să vedem ce avem acum în frontend.

Am reușit să arătăm noul nostru meniu, dar este destul de dezordonat, nu-i așa?

Dacă vedem codul nostru sursă, vom observa că funcția wp_nav_menu() a creat această bucată de cod HTML

 <div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>

Deci, putem folosi clasele descrise în cod pentru a ne înfrumuseța meniul. Pentru a face acest lucru, vom folosi niște CSS. Găsiți style.css (acesta este în mod normal în aceeași locație cu fișierul header.php) și apoi deschideți-l cu editorul pentru a adăuga acest cod:

 ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }

Rezultatul va fi mult mai ordonat acum și mult mai în concordanță cu stilul site-ului nostru demonstrativ.

Personalizare suplimentară a meniului

Funcția wp_nav_menu() pe care WordPress o oferă pentru afișarea meniurilor vine cu o serie de opțiuni care vă permit să o personalizați în continuare.

„ locație_temă ”

După cum am descris mai sus, acest parametru corespunde cheilor transmise funcției register_nav_menus() din functions.php

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) );

'menu_class'

Există opțiunea „ menu_class ” care vă permite să specificați propria clasă pentru meniu.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'menu_class' => 'my-custom-menu' ) );

După cum probabil ați observat deja, clasa nu înlocuiește nicio altă clasă, ci este adăugată în elementul ul.

„menu_id”

Spre deosebire de opțiunea de clasă, opțiunea menu_id înlocuiește id-ul curent al meniului. HTML-ul generat pentru elementul <ul> va fi cam așa.

 <ul class="menu">

Când această opțiune nu este utilizată, id-ul va fi meniul slug, care va fi incrementat atunci când se utilizează mai multe instanțe.

'container'

Acest parametru definește tipul de element care înconjoară meniul. Valoarea implicită este „div”. Dacă de exemplu utilizați acest cod:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );

veti obtine acest rezultat:

„clasa_container”

Aceasta este o clasă care se aplică elementului părinte meniu:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'my-custom-menu-wrapper', ) );

De asemenea, puteți insera conținut înainte sau după linkul fiecărui element de meniu utilizând parametrii „înainte” și „după”. Acest lucru este foarte util dacă doriți să adăugați o liniuță sau o pictogramă sau să includeți elementele de meniu într-o etichetă span. Puteți încerca exemplul de mai jos pentru a vedea acest lucru în acțiune:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

De asemenea, puteți adăuga pictograme la elementele de meniu. Încercați, de exemplu, să instalați pluginul Font Awesome pentru a include biblioteca lor de pictograme și utilizați opțiunea de meniu „înainte” pentru a aplica o pictogramă cu font extraordinar la elementele de meniu.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );

Puteți găsi codul pentru fiecare pictogramă în lista de pictograme a pluginului.

Parametrul Walker

Nu în ultimul rând, vom oferi un exemplu despre modul în care parametrul walker ajută la personalizarea meniurilor. Dacă nu știți care este clasa WordPress Walker, probabil că următoarele nu vor avea prea mult sens. Vă recomandăm să citiți mai întâi „ Familiarizarea cu clasa WordPress Walker”.

 wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );

Pentru a demonstra clasa Walker, vom adăuga un „articol secundar” în meniul nostru.

Vom suprascrie clasa Walker implicită oferită de WordPress. Acesta se află în fișierul wp-includes/class-walker-nav-menu.php. Pentru a realiza acest lucru, accesați fișierul function.php și introduceți codul de mai jos:

 if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }

Acum, în headers.php, înlocuiți codul meniului cu acesta (vom scoate ambele versiuni de meniu intenționat doar pentru a compara rezultatele):

 wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) );

Comparând acest cod cu clasa originală Walker_Nav_Menu, veți observa că $tree_type și $db_fields au rămas neatinse, dar restul sunt modificate. Fă-ți timp și compară atât codul, cât și rezultatele HTML din aceste două versiuni ale aceluiași meniu și încearcă să experimentezi singur jucându-te cu My_Nav_Menu_Walker Class.

Concluzie

Meniurile de pe site-uri web sunt în mod clar destul de importante! Posibilitatea de a avea control deplin asupra plasării și ieșirii meniurilor vă extinde capacitățile ca dezvoltator de teme și deschide o serie de noi posibilități interesante atunci când proiectați site-uri web, fără a fi nevoie să vă bazați pe pluginuri, ceea ce este întotdeauna grozav să puteți face.