it-swarm-eu.dev

Přidání třídy do specifického odkazu v uživatelské nabídce

Vím, že můžete přidat třídu do vlastních možností menu, ale přidává ji do LI před A. Chci aplikovat třídu přímo na tuto specifickou A spíše než na celou LI.

Takže místo výstupu je

<li id="menu-item-51" class="NEWCLASS menu-item menu-item-type-custom menu-item-51"><a href="#">Link</a> </li>

Chci to taky být.

<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-51"><a href="#" class="NEWCLASS">Link</a></li>

Nějaké nápady?

10
user3407

můžete použít filtr nav_menu_css_class

add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
    if(your condition){ //example: you can check value of $item to decide something...
        $classes[] = 'my_class';
    }
    return $classes;
}

Pomocí této položky $ můžete libovolné podmínky, které chcete. a tím přidáte třídu do konkrétního li a vy můžete značku vytvořit na základě tohoto typu:

.my_class a{
   background-color: #FFFFFF;
}
11
Bainternet

Na tomto místě jsem našel řešení pomocí použití vlastního chodítka .

Dva kroky: Nahraďte výchozí kód wp_nav_menu upraveným kódem a poté přidejte kód do function.php motivu.

Nejprve nahraďte výchozí kód wp_nav_code následujícím kódem (kód se zkopíruje z výše uvedených stránek):

    wp_nav_menu( array(
     'menu' => 'Main Menu',
     'container' => false,
     'menu_class' => 'nav',
     'echo' => true,
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'walker' => new description_walker())
     );

Dále přidejte následující kód do function.php. Tímto způsobem můžete skutečně přidat třídu do odkazů nabídky:

class description_walker extends Walker_Nav_Menu
{

  function start_el(&$output, $item, $depth, $args)
  {
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

       $class_names = $value = '';

       $classes = empty( $item->classes ) ? array() : (array) $item->classes;

       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="'. esc_attr( $class_names ) . '"';

       $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

       $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        ) .'"' : '';

       $prepend = '<strong>';
       $append = '</strong>';
       $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

       if($depth != 0)
       {
                 $description = $append = $prepend = "";
       }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
        $item_output .= $description.$args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

                    if ($item->menu_order == 1) {
            $classes[] = 'first';
        }

        }
}

Ke konci kódu je několik řádků, které začínají znakem $ item_output. Zejména se chcete podívat na tento kus:

$item_output .= '<a'. $attributes .'>';

Protože tento řádek určuje výstup pro začátek odkazu html. Pokud ji změníte na něco takového:

$item_output .= '<a'. $attributes . 'class="abc"' .'>';

Pak budou všechny vaše odkazy v menu přidány do třídy = "abc".


To znamená, že neumožňuje vlastní třídu pro každý odkaz (nebo alespoň nevím, jak ho kódovat). To je pro mě problém.

Pro ty, kteří žádají proč bys to chtěl udělat? Chci, aby mé odkazy na menu otevřely lightboxy (colorboxes, aby byly konkrétnější), a na těchto odkazech vyžadují třídy. Například:

<a class="lightbox1" href="#">Photo</a>

Existuje nějaký způsob, jak dynamicky generovat třídy, jako je "lightbox1" pro první odkaz, "lightbox2" pro druhý odkaz, a tak dále?

4
Raiman Au

ŘEŠEN !!!! Potřeboval jsem na to přijít, aby se položka menu spojila s HTML ve fancyboxu. Vložte následující kód do funkce function.php:

function add_menuclass($ulclass) {
    return preg_replace('/<a rel="fancybox"/', '<a class="fancybox"', $ulclass, -1);
}
add_filter('wp_nav_menu','add_menuclass');

Pak ... na kartě Nabídka v panelu WP vytvořte vlastní odkaz, přidejte jej do nabídky. Nahoře, kde se říká Možnosti obrazovky, se ujistěte, že máte zaškrtnuté políčko „Link Relationship (XFN)“. Přidá toto pole do vlastní položky nabídky. Do pole zadejte "fancybox" (bez uvozovek) a uložte nabídku.

Funkce hledá volání do navigačního menu, pak najde všude, kde máte rel="fancybox" a nahradí jej rel="fancybox" class="fancybox". Můžete nahradit fancybox s jakoukoliv třídou, kterou potřebujete přidat do položek menu. Hotovo a hotovo!

3
HahahaComedy

Zdá se, že současné odpovědi neuznávají, že otázkou je, jak přidat třídu do elementu a a ne do elementu li nebo jsou příliš komplikované. Zde je jednoduchý přístup s použitím filtru nav_menu_link_attributes, který vám umožňuje zacílit na konkrétní nabídku na základě jejího stavu a konkrétní odkaz na stránku v tomto menu na základě ID. Můžete var_dump $ args a $ item získat více způsobů, jak vytvořit svůj stav.

add_filter('nav_menu_link_attributes', 'custom_nav_menu_link_attributes', 10, 4);

function custom_nav_menu_link_attributes($atts, $item, $args, $depth){
    if ($args->menu->slug == 'your-menu-slug' && $item->ID == 1){

        $class = "button";

        // Make sure not to overwrite any existing classes
        $atts['class'] = (!empty($atts['class'])) ? $atts['class'].' '.$class : $class; 
    }

    return $atts;
}
1
MarcGuay

V horní části stránky Appearance -> Menus rozbalte Screen Options, zaškrtněte políčko CSS Classes. Když rozbalíte každou z přidaných položek nabídky, zobrazí se pole CSS Classes (optional).

0
Unicornist

Vím, že to bylo zodpovězeno už dávno, ale stejně jako obecné informace, zjistil jsem, jak přidat třídu do každé položky menu jednotlivě pomocí "obrazovky" možnost WordPress admin stránky pro vlastní menu.

0
RaiGA

Nedávno jsem musel udělat něco podobného a vymyslel jsem jiný způsob. Musel jsem přidat podobnou třídu pro plugin Nivo lightbox. Takže jsem přidal "nivo" k atributu rel ("Link Vztah (XFN)") a pak následující na filtr nav_menu_link_attributes.

function add_nivo_menuclass($atts, $item, $args) {
    if( is_array($atts) && !empty($atts['rel']) && $atts['rel'] = 'nivo' ) {
        $atts['class'] = 'lightbox';
        $atts['data-lightbox-type'] = 'inline';
    }

    return $atts;

    }
add_filter('nav_menu_link_attributes','add_nivo_menuclass', 0,3);
0
darrinb