Adăugarea de câmpuri personalizate la elementele de meniu WordPress

Publicat: 2021-03-23

Meniul unui site web este adesea neglijat atunci când proiectați un site. Acest lucru s-ar putea datora faptului că, în mod tradițional, personalizarea a fost dificilă din punct de vedere tehnic. Acest lucru s-a schimbat acum cu WordPress 5.4, care a introdus câteva cârlige noi care vă vor permite să adăugați un meniu WordPress câmpuri personalizate relativ ușor.

Cârligele în cauză sunt cârlige de acțiune wp_nav_menu_item_custom_fields și wp_nav_menu_item_custom_fields_customize_template . Folosind acestea, acum puteți adăuga cu ușurință propriile câmpuri personalizate la elementele de meniu atât în ​​pagina de editare a meniului Administrator, cât și în panoul de opțiuni de personalizare.

În acest articol, vom analiza câteva moduri simple în care puteți utiliza cârligul wp_nav_menu_item_custom_fields pentru a adăuga propriile câmpuri personalizate la elementele de meniu, precum și pentru a arunca o privire la două plugin-uri care pot fi, de asemenea, utilizate pentru a adăuga câmpuri personalizate fără a fi nevoie să codificați .

Haide să mergem.

Cârligul de câmp personalizat al meniului WordPress

Cârligul wp_nav_menu_item_custom_fields este specific ecranului Meniu și este descris după cum urmează:

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );
  • Numărul întreg $id este ID-ul elementului de meniu
  • Obiectul $menu_item este obiectul de date al elementului de meniu
  • Numărul întreg $depth este adâncimea elementului de meniu
  • $args este obiectul argumentelor elementului de meniu

Cârligul se declanșează chiar înainte de butoanele de mutare ale unui element de meniu de navigare în editorul de meniu și este introdus în fișierul wp-admin/includes/class-walker-nav-menu-edit.php în jurul liniei 242.

Puteți demonstra acest lucru în practică cu un exemplu foarte simplu. Deschideți fișierul functions.php al temei active și adăugați această bucată de cod:

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

Acum, dacă accesați pagina de administrare de editare a meniului, veți vedea șirul ecou sub fiecare element de meniu, așa cum se arată în captura de ecran de mai jos.

Desigur, aceasta nu are deloc funcționalitate, dar arată cum este posibil să editați meniul. Să încercăm acum ceva mai util prin adăugarea unor funcționalități simple sub forma unui câmp personalizat.

Adăugați un câmp personalizat pentru elementul de meniu WordPress folosind Cod

În acest exemplu, vom crea un câmp personalizat de meniu WordPress care ne permite să inserăm o descriere în orice element de meniu.

Pasul unu: Adăugarea ieșirii

Pentru început, ceea ce vom face mai întâi este să creăm funcția de apel invers care va afișa câmpul de introducere în care utilizatorul admin poate completa descrierea. Iată codul pentru a face acest lucru:

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

Adăugați acest cod în fișierul functions.php și salvați-l. Acum, dacă vă conectați din nou în zona de administrare a site-ului dvs. WordPress și deschideți ecranul Meniuri, ar trebui să vedeți câmpul afișat. În cazul nostru, am numit această „Descriere articol”. Desigur, sunteți liber să editați codul de mai sus pentru a denumi câmpul după cum credeți de cuviință. Rețineți că trebuie să fie un nume unic.

Pasul doi: Salvarea intrării

Apoi, vom insera fragmentul de cod de mai jos, care va actualiza valoarea câmpului în meta-tabelul de post al bazei de date, ceea ce înseamnă că intrarea noastră va fi salvată.

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

Cu acest cod salvat în fișierul functions.php , puteți să vă întoarceți în administratorul WordPress, să deschideți un element de meniu și să adăugați o descriere în câmp. Apoi, mergeți la baza de date phpMyAdmin și ar trebui să puteți vedea intrarea în tabelul post metabază de date.

Dacă modificați valoarea în meniu admin, aceasta ar trebui să fie reflectată în baza de date. La fel, dacă ștergeți valoarea, aceasta ar trebui să dispară cu totul.

Pasul trei: Afișați valoarea câmpului de meniu

În continuare, vom arăta cum putem prelua datele din câmpurile de meniu salvate și le vom afișa în meniul front-end utilizând funcția get_post_meta și hook-ul nav_menu_item_title . Adăugați următorul cod de mai jos în fișierul functions.php .

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

Cârligul nav_menu_item_title filtrează titlul unui element de meniu și poate fi găsit în fișierul wp-includes/class-walker-nav-menu.php în jurul liniei 225.

Acceptă 4 parametri, șirul de titlu al elementului de meniu, elementul curent de meniu, un obiect cu argumente wp_nav_menu() și un număr întreg care este adâncimea elementului de meniu.

Acum ar trebui să vedeți descrierea sub titlul elementului de meniu și, folosind CSS-ul corespunzător, puteți, desigur, să stilați aceasta pentru a se potrivi site-ului dvs.

Adăugați un câmp personalizat pentru elementul de meniu WordPress folosind un plugin

Dacă nu doriți să vă implicați în scrierea codului pentru a adăuga un câmp personalizat la meniul dvs. WordPress, atunci vești bune... există plugin-uri care pot face acest lucru pentru dvs.

Câmpuri personalizate avansate

Pluginul extrem de popular și mereu versatil Advanced Custom Fields demonstrează încă o dată puterea sa aici, cu capacitatea de a adăuga câmpuri personalizate în meniul WordPress.

După ce îl instalați și îl activați, deschideți pluginul și apoi faceți clic pe butonul „Adăugați nou” pentru a adăuga câmpurile. Selectați „Element de meniu” din regulile locației. Urmați instrucțiunile și actualizați câmpurile după cum este necesar.

După ce publicați câmpul, vă puteți îndrepta către meniul WordPress din zona de administrare pentru a vedea noul câmp pe care l-ați creat. Destul de ușor!

Câmpuri personalizate din meniul WP

Pluginul WP Menu Custom Fields este un plugin relativ nou care, după cum sugerează și numele, vă va ajuta să adăugați câmpuri personalizate la elementele din meniu. Puteți adăuga un text personalizat, o imagine, un cod scurt sau un HTML personalizat.

În loc să creeze elemente de meniu personalizate printr-o interfață de plugin dedicată (cum procedați cu Câmpurile personalizate avansate), WP Menu Custom Fields adaugă opțiuni editabile direct la orice element de meniu din zona de editare a meniului de administrare.

Este destul de explicit de utilizat și o modalitate simplă și plăcută de a adăuga câmpuri personalizate și alt conținut la elementele din meniu. Documentația pluginului oferă, de asemenea, cârligele pluginului pe care le puteți utiliza pentru a personaliza în continuare HTML generat pentru fiecare caracteristică.

Concluzie

Adăugarea de câmpuri personalizate la meniurile WordPress poate fi cu adevărat utilă și vă poate ajuta să îmbunătățiți această zonă adesea neglijată a site-ului dvs. Dacă sunteți un programator încrezător, atunci utilizarea noilor cârlige furnizate în WordPress 5.4 ar trebui să se dovedească a fi relativ ușoară, în timp ce non-codatorii pot profita la maximum de pluginurile disponibile pentru a realiza această sarcină.

Vezi si

  • Adăugarea de câmpuri la elementele de meniu WordPress – Plugin personalizat