9
votes

Ajouter un balisage personnalisé au menu WordPress

Je suis fouillé longtemps pour une solution à ce problème, mais que vous n'avez rien trouvé pour que vous puissiez être mon dernier espoir!

J'essaie de construire un nouveau menu CSS3 sur un site WordPress 3 que Je travaille sur. J'aurais besoin d'étendre la marque de menu par défaut mais je ne sais pas comment. P>

Ceci est la balise que j'utilise dans le thème pour émettre le menu pour le moment: P>

<div class="menu-header">
 <ul id="menu-main-menu" class="menu">
  <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a>
   <div class="sub-menu-container">
    <div class="submenu">
     <ul class="sub-menu">
      <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li>
     </ul>
    </div>
   </div>
  </li>
  <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a>
   <div class="sub-menu-container">
    <div class="submenu">
     <ul class="sub-menu">
      <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li>
      <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li>
      <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li>
     </ul>
    </div>
   </div>
  </li>
  <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li>
 </ul>
</div>


0 commentaires

5 Réponses :


0
votes

Pas exactement sûr de ce que vous avez besoin, mais voici une référence sur la création d'un menu WP personnalisé.

Dans la base de données Regardez dans la table WP_POSTS. Voici l'endroit où se trouvent les éléments de menu de navigation.

Pour CSS personnalisé, vous pouvez utiliser l'éditeur CSS. Il peut être trouvé sous Modifier CSS dans l'onglet Présentation de votre tableau de bord. Il consiste en une zone vide pour la frappe et deux boutons. Vous pouvez faire des changements en direct et voir le résultat instantanément.

Pour utiliser un menu de navigation personnalisé à la place du menu par défaut de votre thème, la prise en charge de cette fonctionnalité doit être enregistrée dans le fichier Fonctions.php .

Voir: http://codex.wordpress.org/navigation_menus et http://codex.wordpress.org/funt_reference/register_nav_menus


0 commentaires

2
votes

Vous pouvez simplement utiliser une fonction jQuery .Wrap, comme xxx

N'oubliez pas d'ajouter la bonne jQuery .js à votre en-tête.

Vous devriez probablement Utilisez une fonction .Readady () également.


1 commentaires

Travaillé parfaitement! Merci



3
votes

Le balisage du menu est généré dans WP-Inclus / classes.php avec Walker classe, spécifiquement classe walker_page étend walker {

Si vous regardez à travers les fonctions de la classe, vous pouvez voir où le balisage réel est généré.

http://codex.wordpress.org/funt_reference/walker_class


0 commentaires

3
votes

Cela peut aider:

Combinez WP_NAV_MENU () avec une classe Walker personnalisée

http://www.kriesi.at/archives/ Améliorez-votre-WordPress-Navigation-Menu-Sortie

combiner wp_get_nav_menu_items () avec la fonction CLEAN_CUSTOM_MENUS ()

http://digwp.com/2011/11/html-formatting -Custom-menus /


0 commentaires

6
votes

Selon la documentation WordPress http://codex.wpress.org/funt_reference/wp_nav_menu#example , juste ajoutez un walker au menu: xxx pré>

puis dans votre thème Fonctions.php Fichier Ajouter le code suivant: P>

class my_Walker_MegaMenu extends Walker_Nav_Menu{
    /**
     * @see Walker::start_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        //$output .= "\n$indent<ul class=\"sub-menu\">\n"; //this is default output;

        //if( $depth==0 ) //'0'==>1st-sub-level; '1'=2nd-sub-level; ....
        $output .= "\n$indent<div class=\"sub-menu-container\"><div class=\"submenu\"><ul class=\"sub-menu\">\n";
    }

    /**
     * @see Walker::end_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     */
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        //$output .= "$indent</ul>\n"; //this is default output;

        //if( $depth==0 ) //'0'==>1st-sub-level; '1'=2nd-sub-level; ....
        $output .= "$indent</ul></div></div>\n";
    }
}


0 commentaires