La quête du menu parfait verticale ...

Partie 1 de ce tutoriel décrit étape par étape de la construction horizontale de menu à plusieurs niveaux imbriqués pour thème Wordpress de thèse . Partie 2 va continuer à améliorer cette fonctionnalité. Ici, nous allons ajouter "sombre" version du menu de navigation horizontal et je vais vous apprendre à alterner entre "brillant" et "sombre" de version. Partie 2 est le sur-ensemble de la partie 1. Il comprend tous de la partie 1 + ajoute des trucs plus cool.

L'idée principale que je voulais présenter est l'ajout du menu vertical à thème de thèse (et pour Wordpress en général). Je cherchais vraiment souple, SEO menu convivial et multi-navigateur compatible verticales qui permettrait de créer un nombre illimité de niveaux d'imbrication.

WEB a des tonnes de pages sur le sujet mais quand j'ai commencé à essayer tous ces échantillons - soit ils ont été rompues, effondré, pris en charge uniquement un nombre limité de niveaux ou de mauvaise conduite dans les portes + junksplorer Ballmer 6. Enfin je suis rentré à éprouvée menus Dynamic Drive que leurs échantillons verticaux s'est avéré être une jolie boîte qui convient à mon exigences strictes. J'ai eu à les modifier de façon significative si pour vous assurer qu'il s'intègre le modèle de thèse.
La quête de la perfection se poursuit ...

J'ai passé environ 16 heures à chercher, assemblage, les essais, la fixation, le polissage et le réglage CSS menu vertical et. Code JS et 3 / 4 du temps a été consacré rendant à travailler dans Internet Explorer 6.
Quoi qu'il en soit, j'ai été heureux avec le résultat final. Entraîné le menu de navigation vertical a tous les mêmes avantages que le menu horizontal a.

Ayant la capacité d'ajouter des menus verticale est très important d'environ 70-80% de portails sur le web. Menus horizontaux ont limité «espace» pour accueillir de nombreux choix de menu, mais menu vertical n'a pas cette limitation et aiderait énormément. Alors on y va.

Beaucoup d'étapes pour y arriver sont déjà décrites dans la partie 1 du tutoriel alors ce sera le faire pour une un peu plus courte, mais avec des résultats beaucoup plus évolué.

Alors voilà:

Bâtiment SEO friendly, vertical, multiniveaux de menu hiérarchiquement emboîtés pour Wordpress et le thème de thèse . Étape par étape
(... Ce que vous n'auriez jamais cru possible ...)

1. Installez le plugin php exec et l'activer. Nous en aurons besoin, car je vais utiliser PHP à l'intérieur du widget texte à émettre le code HTML du menu vertical ».
2. Répétez les étapes 1 - 6 de la partie 1 du tutoriel . Fondamentalement, vous devez installer et activer l'utilisation NAVT plugin + créer visuellement votre menu. Assurez-vous que votre nom de groupe de menu est "menu1". Ce nom est codée en dur dans custom_functions.php
3. Cliquez sur le 'gear' icône de votre "menu1" groupe à modifier ses propriétés:
   
4. Suit les étapes 7,1 -7,3 de la partie 1 tutoriel pour régler "Options", "Affichage" et "CSS" onglets des paramètres.
5. Maintenant, cliquez sur le "thème" onglet de ce dialogue. Nous allons écraser nombre de paramètres là (si vous suivi l'étape 1). C'est ok - vous ne perdrez rien - mais ces changements sont nécessaires parce que j'ai changé un peu de code de l'étape 1.
   Voici comment ce dialogue doit être rempli:
   1. A l'intérieur du "Thème xpath:" zone de saisir ce code (il commande pour remplacer toute étiquette avec ces classes):
      .jquerycssmenu, .jqueryslidemenu
   2. Réglez "action" à "Remplacer avec"
   3. A l'intérieur de la «Ajouter des tags avant la navigation de groupe" zone de saisir ce code:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. A l'intérieur de la «Ajouter des tags après la navigation de groupe" zone de saisir ce code:
      <br style='clear: left' /></div>
   5. Cliquez sur [Enregistrer / Fermer] bouton.
6. Maintenant, allez à Panneau d'administration Wordpress -> Apparence -> Widgets.
7. Drag "Texte" widget (à partir de la grande "Disponible widgets" zone) en "Sidebar une" zone de droite. Nous allons ajouter du code dans le widget texte qui va nous aider à matérialiser le menu vertical.
   NOTE: Je présume que vous avez "Sidebar 1" dans l'existence. Thèse options vous permet de l'éteindre - mais pour le bien de ce tutorial laisse faire être.
8. Une fois que vous avez fait glisser et de tomber ce widget - il s'ouvre comme une fleur (je suis sentiment romantique maintenant que la lutte est terminée MSIE).
9. Dans "Titre" zone de saisir «meilleures au monde menu vertical" ... Eh bien, n'hésitez pas à utiliser votre créativité - que le texte va aller au-dessus de votre menu vertical qui vient de naître.
10. En grande zone de texte - entrez ce code PHP:
    <?php
if (function_exists('navt_getlist'))
$menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
else
$menu_html = "";
$menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
echo $menu_html;
?>
11. Appuyez sur [Enregistrer], cliquez sur "Fermer" lien.
12. Télécharger mis à jour un ensemble de fichiers ici .
    Cette archive comprend:

    
    

    • Version mise à jour du "brillant" code de menu horizontal
    • "Sombre" version du menu horizontal
    • Codes menu vertical
    • Version mise à jour des custom_functions.php
13. Maintenant vous avez besoin de décompresser cette archive et le télécharger dans le répertoire "custom" de votre thème de thèse .
    Remarque: si vous avez fait toutes les personnalisations à l'intérieur custom_functions.php - vous aurez besoin de les fusionner. Si ce n'est pas - n'hésitez pas à l'écraser avec ma version.
14. Voila! Maintenant, vous pouvez recharger votre site Web et voir le même "brillant" menu horizontal + neato menu vertical dans la barre latérale gauche.
15. Tâche BONUS: Laissez le changement "brillant" du menu horizontal sur le schéma de couleurs "sombre".
    1. A l'intérieur du fichier custom_functions.php:
       remplacer ce code:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       avec ce code:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       Fondamentalement, nous sommes commentant une ligne et décommenter l'autre.
    2. Maintenant, allez à Wordpress Admin-> Outils-> Listes NAVT et cliquez sur susmentionnées "gear" icône pour modifier les propriétés de votre «menu1» du groupe.
    3. Cliquez sur "Thème" onglet.
    4. A l'intérieur de la «Ajouter des tags avant la navigation de groupe" zone de saisir ce code:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Maintenant - rechargez votre page - et votre menu principal de navigation horizontale "magique" est devenu sombre, quelque chose comme ça:
       

       Thème de thèse - à plusieurs niveaux imbriqués de menu CSS - palette sombre

       Palette de couleurs sombres peuvent être plus appropriés pour certains sites que celui de couleur claire. Donc maintenant vous avez une liberté de choix dans votre vie!

    6. Pour revenir à des couleurs "lumineux" - juste au-dessus de défaire "Bonus" étapes.
16. Conclusion:
    J'aime Thème de thèse , j'adore Wordpress et j'aime le fait que nous avons une façons d'ajouter des menus de navigation décente à nos portails.

20 $

Amusez-vous!

Gleb Esman

Tagged as: menu hiérarchique pour wordpress , comment construire wordpress la navigation , le menu à plusieurs niveaux pour wordpress , le menu de navigation pour wordpress , thème de la thèse , la thèse menu thématique , le thème de thèse tutoriel , wordpress menus , la navigation wordpress , wordpress menus imbriqués