Como adicionar um atributo de dados a um item de menu do WordPress

11

Sou o Twitter Bootstrap e preciso adicionar o atributo data-toggle="modal" à tag do link do menu. Ao pesquisar a maioria dos resultados, faça uma caminhada pelos menus suspensos do Twitter Bootstrap, mas esse menu não tem dropdowns e eu só preciso adicionar o atributo em particular.

Em seguida, encontrei o seguinte: Adicione atributos personalizados aos itens de menu sem o plugin , que é muito útil como aparece no WordPress 3.6+, não precisamos mais fazer walkers longos e complexos, e usar isso: enlace

No entanto, a partir dessa execução, a referência da API é bastante nua e não oferece exemplos e, como é tão nova, há muito poucas referências a ela no Google.

Eu tentei isso primeiro:

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

function pb_contact_menu_atts( $atts, $item, $args )
{
    // inspect $item, then …
    $atts['data-toggle'] = 'modal';
    return $atts;
}

e isso funciona, no entanto, conforme o esperado, adiciona o atributo a todas as tags a no menu. Então, estou tentando descobrir como segmentar um item de menu com # menu-item-7857 a ou algo semelhante.

Alguém sabe onde encontrar um exemplo de segmentação de um item de menu ou pode determinar como basear as informações na referência da API vinculada acima?

Para observar, eu encontrei o seguinte exemplo, mas ele só segmenta itens que têm filhos que não ajudam, mas podem estar na direção certa:

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);

ATUALIZAÇÃO - A única resposta abaixo parece estar ligada a algo, mas a partir dele não foi possível determinar como realmente encontrar o número para direcionar meu link específico e onde / como adicionar essa condição em um exemplo de trabalho. Adicionado um comentário, mas não ouviu de volta. Desde cerca de 18 dias pensei que eu veria se uma recompensa ajudaria.

Quando olho para o código do link que desejo segmentar:

<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>

Eu vejo o número 7858, pensando que talvez seja esse o número que eu deveria segmentar.

Mas quando tento, por exemplo:

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


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

No entanto, adicionando que a instrução if o comentador sugeriu, recebo o seguinte erro:

Fatal error: Cannot use object of type WP_Post as array

Estou assumindo que mais código é necessário, mas perdido. Como um lembrete sem a instrução if, ela funciona, mas segmenta todos os links, em vez do link que desejo segmentar.

    
por cchiera 04.11.2013 / 07:02

4 respostas

30

Editando especificamente o código que você forneceu na pergunta original:

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 123;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
  }
  return $atts;
}
    
por guiniveretoo 22.11.2013 / 16:41
7

O segundo argumento $item , que está sendo disponibilizado para sua função de filtro, contém um objeto de item de menu. Se despejado, parece algo assim:

[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] => 
    )

Para segmentar itens de menu específicos, você precisa formular sua condição e verificar os dados disponíveis no objeto, por exemplo, if ( 2220 == $item['ID'] )

    
por Rarst 04.11.2013 / 10:20
1

Eu queria adicionar letras de dados ao menu personalizado que criei no WordPress.

Os passos que escolhi foram:

  1. Encontrei o número de ID do meu menu.
  2. adicionou essas linhas de código de @guiniveretoo
  3. escreveu instruções if para cada item de menu (como eu queria que diferentes valores de atributo fossem injetados).
  4. funcionou!

Aqui está o meu código.

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'] = 'PROJECTS';
  }

  elseif ($item->ID == 7) {
    $atts['data-letters'] = 'RESUME';
  }
  elseif ($item->ID == 8) {
    $atts['data-letters'] = 'ARTWORKS';
  }
  elseif ($item->ID == 9) {
    $atts['data-letters'] = 'HELLO!';
  }
  return $atts;
}

Espero que isso ajude você.

    
por Anoop Anson 01.05.2018 / 08:56
0

Por que você não aborda esse problema de outra forma? Em vez de tentar segmentar o item de menu com id == ?? o que poderia mudar em algum momento (o item de menu, não o id), use a área Admin do WP para adicionar um classe personalizada para o item de menu que você deseja segmentar. Em seguida, use essa classe no seu Javascript para acionar as informações de que você precisa:

$('.my-class').click(function(e){
  // do other stuff
  e.preventDefault;
});

Meu javascript não é garantido. Se você não estiver usando o jQuery, tente este .

    
por guiniveretoo 22.11.2013 / 16:31