Come aggiungere un attributo data a una voce di menu WordPress

Question

Come aggiungere un attributo data a una voce di menu WordPress

4 nov 2013, 08:02:43

Visualizzazioni: 61.2K

Voti: 21

Sto usando Twitter Bootstrap e ho bisogno di aggiungere l'attributo data-toggle="modal" al tag a di un link del menu. Cercando online, la maggior parte dei risultati fa riferimento all'utilizzo di walker per i menu dropdown di Twitter Bootstrap, tuttavia questo menu non ha dropdown e ho solo bisogno di aggiungere quel particolare attributo.

Successivamente ho trovato questo: Aggiungere attributi personalizzati agli elementi del menu senza plugin che è molto utile poiché sembra che in WordPress 3.6+ non dobbiamo più utilizzare walker complessi ma possiamo invece usare questo: http://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes

Tuttavia al momento quella documentazione API è piuttosto scarna e non offre esempi e, essendo così nuova, ci sono pochissimi riferimenti su Google.

Ho provato prima questo:

add_filter( 'nav_menu_link_attributes', 'mywp_contact_menu_atts', 10, 3 );

function pb_contact_menu_atts( $atts, $item, $args )
{
    // ispeziona $item, poi ...
    $atts['data-toggle'] = 'modal';
    return $atts;
}

e funziona, tuttavia come previsto aggiunge l'attributo a tutti i tag a nel menu. Quindi sto cercando di capire come targetizzare un singolo elemento del menu con #menu-item-7857 a o simili.

Qualcuno sa dove trovare un esempio di come targetizzare un elemento del menu o è in grado di determinare come farlo in base alle informazioni presenti nel riferimento API linkato sopra?

Da notare che ho trovato il seguente esempio ma targetizza solo elementi che hanno figli, cosa che non mi aiuta ma potrebbe essere nella giusta direzione:

add_filter('nav_menu_link_attributes', function($atts, $item, $args) {
    if ( $args->has_children )
    {
        $atts['data-toggle'] = 'dropdown';
        $atts['class'] = 'dropdown-toggle';
    }

    return $atts;
}, 10, 3);

AGGIORNAMENTO - L'unica risposta qui sotto sembra essere sulla strada giusta ma da essa non sono riuscito a determinare come trovare effettivamente il numero per targetizzare il mio link specifico e dove/come aggiungere quella condizione in un esempio funzionante. Ho aggiunto un commento ma non ho ricevuto risposta. Sono passati circa 18 giorni e ho pensato che una ricompensa potesse aiutare.

Quando guardo il codice del link che voglio targetizzare:

<li id="menu-item-7858" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7858"><a href="#" data-toggle="modal">Chat</a></li>

Vedo il numero 7858 quindi penso che potrebbe essere il numero che dovrei targetizzare.

Ma quando provo per esempio:

add_filter( 'nav_menu_link_attributes', 'my_chat_menu_atts', 10, 3 );

function my_chat_menu_atts( $atts, $item, $args ) {
    if ( 7857 == $item['ID'] ) {
        // ispeziona $item, poi ...
        $atts['onclick'] = 'SnapEngage.startLink();';
        return $atts;
    }
}

Tuttavia aggiungendo quell'istruzione if suggerita dal commentatore ottengo il seguente errore:

Fatal error: Cannot use object of type WP_Post as array

Presumo che sia necessario altro codice ma sono bloccato. Come promemoria, senza l'istruzione if funziona, tuttavia targetizza tutti i link anziché solo quello che voglio targetizzare.

TechRemarker

393

funzioni menu

Commenti

Voglio inserire <?php the_id();?> nella variabile $atts. Qualcosa del genere // ispeziona $item if ($item->ID == $menu_target) { $atts['data-toggle'] = 'modal-<?php the_id();?>'; } return $atts; Puoi aiutarmi a capire come inserire the_id nella variabile $atts? Grazie

nadzhq

15 feb 2014 08:42:56

Tutte le risposte alla domanda

Commenti

Dopo aver sostituito alcuni dei miei valori ha funzionato! Grazie! L'ho segnato come corretto, ma dice che devo aspettare altre 23 ore prima di poter assegnare la ricompensa.

TechRemarker

22 nov 2013 17:50:18

Felice di aiutare! :D

Jen

22 nov 2013 17:51:12

Ho impostato un promemoria in Fantastical così non dimentico di assegnare la ricompensa domani.

TechRemarker

22 nov 2013 18:07:00

Cosa fare se hai diversi elementi del menu come target?

Eric Mitjans

20 nov 2015 14:23:29

puoi semplicemente usare più istruzioni if se il valore di data-toggle è diverso. Oppure puoi salvare l'id come chiave di array (considerando che siano univoci) e il nome del modal come valore dell'array. Poi verifica l'istruzione if con array_key_exists()

Sisir

17 apr 2016 16:32:33

Il secondo argomento $item, che viene reso disponibile alla tua funzione di filtro, contiene un oggetto voce di menu. Se stampato, appare più o meno così:

[1] => WP_Post Object
    (
        [ID] => 2220
        [post_author] => 1
        [post_date] => 2012-12-26 19:29:44
        [post_date_gmt] => 2012-12-26 17:29:44
        [post_content] => 
        [post_title] => Home
        [post_excerpt] => 
        [post_status] => publish
        [comment_status] => open
        [ping_status] => open
        [post_password] => 
        [post_name] => home-3
        [to_ping] => 
        [pinged] => 
        [post_modified] => 2013-06-05 01:55:20
        [post_modified_gmt] => 2013-06-04 22:55:20
        [post_content_filtered] => 
        [post_parent] => 0
        [guid] => http://dev.rarst.net/?p=2220
        [menu_order] => 1
        [post_type] => nav_menu_item
        [post_mime_type] => 
        [comment_count] => 0
        [filter] => raw
        [db_id] => 2220
        [menu_item_parent] => 0
        [object_id] => 2220
        [object] => custom
        [type] => custom
        [type_label] => Custom
        [title] => Home
        [url] => http://dev.rarst.net/
        [target] => 
        [attr_title] => 
        [description] => 
        [classes] => Array
            (
                [0] => 
                [1] => menu-item
                [2] => menu-item-type-custom
                [3] => menu-item-object-custom
                [4] => current-menu-item
                [5] => current_page_item
                [6] => menu-item-home
            )

        [xfn] => 
        [current] => 1
        [current_item_ancestor] => 
        [current_item_parent] => 
    )

Per indirizzare una specifica voce di menu, devi formulare la tua condizione e verificarla con i dati disponibili nell'oggetto, ad esempio if ( 2220 == $item['ID'] )

Rarst

100K

4 nov 2013 11:20:03

Commenti

Grazie per questo! Non sono del tutto sicuro di capire come ottenere l'ID $item per la mia voce di menu specifica. Nel tuo esempio il 2220 è lo stesso del tuo url "http://dev.rarst.net/?p=2220". Il link a cui voglio aggiungere l'attributo data non va a un altro URL WordPress ma piuttosto è href="#ContactForm". Basandomi sul tuo esempio ho cercato su Google e ho provato a eseguire echo var_export($GLOBALS['post'], TRUE); ma quando guardo vicino alla singola voce del menu non vedo alcun ID univoco. Puoi chiarire? O in "if ( 2220 == $item['ID'] )" Grazie in anticipo!

TechRemarker

4 nov 2013 16:07:44

L'errore che stai vedendo è perché $item è un oggetto, non un array; cambia $item['ID'] in $item->ID.

Jen

22 nov 2013 17:36:49

Perché non affronti questo problema da una prospettiva diversa? Invece di cercare di individuare la voce di menu con id == ?? che potrebbe cambiare in futuro (la voce di menu, non l'id), utilizza l'area di amministrazione di WP per aggiungere una classe personalizzata alla voce di menu che desideri individuare. Puoi poi usare quella classe nel tuo Javascript per attivare le informazioni di cui hai bisogno:

$('.my-class').click(function(e){
  // fai altre operazioni
  e.preventDefault;
});

Il mio javascript non è garantito. Se non stai usando jQuery, potresti provare questo.

Jen

2.92K

22 nov 2013 17:31:19

Volevo aggiungere data-letters al menu personalizzato che avevo creato in WordPress.

I passaggi che ho scelto sono stati:

Trovato il numero ID del mio menu.
Aggiunto quelle righe di codice da @guiniveretoo
Scritto istruzioni if per ogni voce del menu (poiché volevo iniettare valori di attributi diversi).
Funzionato!

Ecco il mio codice.

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{  
  $menu_target = 6;

  if ($item->ID == $menu_target) {
    $atts['data-letters'] = 'PROGETTI';
  }

  elseif ($item->ID == 7) {
    $atts['data-letters'] = 'CV';
  }
  elseif ($item->ID == 8) {
    $atts['data-letters'] = 'OPERE';
  }
  elseif ($item->ID == 9) {
    $atts['data-letters'] = 'CIAO!';
  }
  return $atts;
}

Spero che questo ti sia d'aiuto.

Anoop Anson

11

1 mag 2018 09:56:15

Jen 2.92K · Accepted Answer · 2013-11-22T17:41:52Z

Modificando specificamente il codice che hai fornito nella domanda originale:

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{
  // L'ID della voce di menu target
  $menu_target = 123;

  // analizza $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
  }
  return $atts;
}

Jen

2.92K

22 nov 2013 17:41:52