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 à (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 . É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:
    navt_customize_menu
  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 .
    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:
      Thesis theme - multilevel nested CSS menu - dark palette

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

comments } { 5 commentaires }

La quête du menu parfait ...

C'est la partie 1 du tutoriel
La partie 2 de ce tutoriel enseigne comment construire menu vertical + palette de couleur foncée pour l'horizontale

J'ai décidé de faire le thème de thèse , parce que l'un de mes clients m'a informé de problèmes de compatibilité entre la thèse et mon adhésion à WordPress Plugin place MemberWing. Je l'ai fixé et a alors décidé de regarder de plus près à la thèse et réellement pris la peine de regarder les vidéos sur la première page du site de la thèse principale - Diythemes.com .
Ce qui m'a impressionné le plus, c'est l'attention aux détails, la convivialité et surtout - les caractéristiques de SEO qui sont si bien pensé.
Plugin membres MemberWing a été conçu dès le départ pour des sites d'adhésion qui aurait besoin de tirer autant de jus de SEO que possible. Alors j'ai payé beaucoup d'attention à une multitude de référencement des améliorations et perfectionnements dans MemberWing. Beaucoup de mes propres clients demandent sur des thèmes différents à utiliser et ayant le thème qui a été si bien optimisé SEO de l'intérieur profond serait un excellent choix pour les entrepreneurs portail d'adhésion.

Combinant les pouvoirs du référencement SEO MemberWing avec les puissances du serait donner le meilleur de chances de classement pour mes clients. Alors, j'ai fait de thèse et a joué avec elle pendant une journée.

Il est un excellent thème de toutes les manières. La partie navigation de celui-ci est cependant un peu limité en fonction. A partir de la thèse 1.5 + c'est un menu de niveau seulement. Mon désir habituel est de pouvoir personnaliser la navigation autant que nécessaire. Certains sites ont des pages seulement quelques années, beaucoup d'autres ont des tonnes de pages statiques + zillions d'articles / messages + de nombreuses catégories.
Ainsi, dans l'idéal avoir une chance de créer agréable à regarder le menu de navigation organisées hiérarchiquement convivial est un must. Thèse droit hors la chauve-souris a une bonne navigation à la recherche, mais j'ai remarqué que tous les sites de thèse basée cherchent comme des jumeaux. Personnalisation menu de navigation de thèse n'est pas vraiment facile pour la plupart des gens le laisser tel quel. Il n'existe aucun moyen pour changer l'ordre des catégories dans le menu ou les positionner dans les pages. Et encore, la possibilité de créer des structures de menu imbriqué est manquant. J'ai donc décidé de voir ce qui pourrait être fait à ce sujet.
Après avoir essayé environ la moitié des plugins douzaine de menu / navigation liées définir mon choix sur Wordpress Plugin de navigation NAVT Liste .
Le plugin est essentiellement non-ordonnée NAVT générateur de liste avec super chic et un peu difficile à la figure untraditional interface d'administration. Qu'est-ce trompeuse, c'est que cela ne crée pas réellement envie menus à la recherche par lui-même. Il ne la plus difficile partie du travail de bien - vous donne une capacité à rassembler visuellement, et de générer la liste non ordonnée - squelette de votre menu-à-être. Et vous pouvez créer des menus de nombreux aussi. Vous pouvez tirer toutes sortes de choses Wordpress dans le menu de navigation: les pages, les messages, des articles, des catégories, les utilisateurs, les blocs de code, des liens externes, des séparations, des séparateurs et des mix and match et le nid et d'organiser et de les personnaliser dans toute structure arborescente comme vous voulez.
NAVT génère pour vous entraîné HTML liste non ordonnée. La beauté Deuxième NAVT est qu'il permet d'insérer votre nouveau menu dans votre thème via la logique JQuery fameuse base mais sans nécessité de modifier le code! NAVT vous permet de spécifier: "remplacer cet élément de menu avec mon # NAVT nouvelle". # Élément pourrait être une pièce d'identité ou une classe de chemin de menu existant ou balise de l'élément div qui est généré par votre thème actuel. Alors ne NAVT ce remplacement pour vous sans vous forcer à aller dans le code thème et de le rendre plus salissant que c'est déjà fait. Si tout cela ressemble à du charabia - ne vous inquiétez pas - je vais vous guider étape par étape prochainement. La partie difficile du NAVT pour tout le monde, c'est que vous aurez à trouver des images réelles + CSS + code javascript de votre menu vous-même. Et c'est à vous de savoir où et comment intégrer ces fichiers et de faire ce genre de choses bien se connecter ensemble.
Sincèrement sans savoir JQuery + un peu de PHP + CSS + ayant une expérience décente avec Wordpress - cette chose est difficile à tirer.
Volontiers je sais ce truc un peu alors j'ai décidé de mordre la balle et l'humanité à la liberté guider dans la construction de la meilleure des menus de navigation meilleure pour Wordpress. J'ai juste besoin de trouver des sources pour certains jolie menus CSS horizontal. J'ai ramassé site dynamique en temps réel pour obtenir les meilleurs de leurs sélections, des démos et des sources.

J'ai consacré une journée à l'étude de thèse et de jouer avec le plugin NAVT. A la fin je suis fier créé sur mesure, flexible, référencement optimisé, à plusieurs niveaux, la structure nagivation imbriquées pour mon site Wordpress + thèse fondée.

Liste des fonctionnalités de multi-niveaux, niché de menu pour
(Vous devez aimer ce genre de choses):

  • Professionnels, look propre et sentir.
  • Support pour tous les navigateurs modernes, y compris MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome en tant javascript et non javascript modes.
  • Gracieusement downgradable pour les non-javascript navigateurs. Vous menu sera utilisable, visuellement similaires et de travail, même pour les navigateurs sans javascript (bien que la navigation de haut niveau seront visibles et aucune Flyouts se passera bien car elles sont faites par javascript).
  • Caractéristiques SEO friendly - non ordonnée code du menu liste est générée au sein de HTML. Google et d'autres moteurs de recherche seront en mesure de l'index de votre structure de navigation et de trouver des liens vers les pages intérieures.
  • Soutien pour un nombre illimité de niveaux d'imbrication et de sous-niveaux.
  • Soutien pour toute commande ou des pages, les messages (via les URI définis par l'utilisateur), les catégories, les utilisateurs, les blocs de code personnalisé et les liens externes dans le menu.
  • Soutien du texte ainsi que des éléments de menu à base d'images. (Je n'ai pas encore essayer ces si).
  • La structure du menu et le contenu est visuellement réglable par zone admin NAVT.
  • Compact: JQuery Flyouts base des niveaux imbriqués.
  • Rapide: jQuery pour le menu est chargé depuis les serveurs de Google (j'aimerais thèse elle-même à faire de même au lieu de le tirer localement). Ce serait d'accélérer les choses un peu.
  • Évolutivité - Ce type de menu est modifiable et configurable à tout moment via le plugin paramètres NAVT sans qu'il soit nécessaire de coder n'importe où.

J'ai utilisé ce menu excellent disque dynamique, le portail comme une base. J'ai eu de personnaliser le code javascript un peu ainsi que comprennent morceau de PHP dans custom_functions.php pour le faire fonctionner avec thèse. Aussi le nombre de pages pré-existantes, les catégories et les messages de mon site ont été utilisés pour assembler la structure du menu. Votre site sera spécificités différentes - mais les concepts seront les mêmes.
Alors laissez aller, allons-nous?

Étape par étape les instructions pour configurer NAVT basé imbriquées, personnalisable, multi-niveaux, SEO friendly
et tout simplement cool et Thèse Thème

  1. Aller à Wordpress Admin-Panel. Plugins-> Ajouter nouveau, recherchez «navt". Le plugin sera montré. Cliquez sur [Installer], [Installer maintenant], "Activer Plugin".
  2. Outils-> Listes NAVT, Inside "Navigation groupe" zone de trouver "le nom du groupe" et entrez: "menu1" dans le champ, appuyez sur bouton [Créer]. Zone "menu1" rectangle obtenu créé.
    Cette "menu1" zone sera le terrain de jeu principal pour la construction du menu. Vous serez le glisser-déposer ici vos éléments de menu.
  3. Dans "actifs" zone de trouver des «autres» listbox et cliquez sur "Accueil" choix. "Home" thingie apparaîtront à l'intérieur du «non attribué» zone. Bizarre, hein? Pas de soucis, tant que cela fonctionne - et il sera pour nous.
  4. Faites glisser ce "Home" thingie de "biens" zone en zone "menu1" rectangle. Il deviendra "Home" dans le menu.
    • Répétez les étapes 3-4 pour certaines pages de "Pages" zone, ainsi que pour les catégories des «catégories» zone. Faites glisser les autres articles que vous voulez être sur votre menu à l'intérieur "menu1" rectangle. Vous pouvez cliquer sur les pages, catégories, les utilisateurs et certains éléments personnalisés tels que «diviseur liste" et "bloc de code". Bloc de code est vraiment cool d'ajouter des extraits personnalisée à l'intérieur du menu.
    • Vous pouvez faire glisser des éléments de menu à l'intérieur "menu1" zone à réorganiser leur ordre.
    • Vous pouvez ajuster la position hiérarchique de chaque élément de menu avec "<" et ">" flèches.
    • En cliquant sur le nom de texte de chaque élément de menu - ouvre l'esprit de dialogue ahurissant de personnalisation supplémentaires pour cet article. J'ai surtout utilisé par défaut, mais techniquement, vous pouvez devenir fou et commencer à faire des choix de menu à base d'images et ajouter des morceaux de code HTML en elle. Procédez avec prudence cependant.
    • Pour les sous-menus sans maillon unclikable qui servira de «parents» pour d'autres "sous-enfants" j'ai utilisé "bloc de code« type. Par exemple lors de la personnalisation telles élément bloc de code je suis entré pour "élément de menu alias" = "MemberWing" et pour "Entrez bloc de code:" = "MemberWing href='#'> <a </ a>". Ayant href = "#", il sera pas cliquable, mais agissant comme un valide le choix de menu «parent».
  5. Voici comment structurer mon NAVT "menu1" construire ressemblait presque terminé:
    navt_building_icon
  6. Terminer la construction initiale, puis cliquez sur "gear" icône pour personnaliser votre structure de menu:
    navt_customize_menu
  7. Il va ouvrir le dialogue avec 4 onglets: Options, Affichage, CSS, Thème.
    1. Aller à la onglet "Options" et s'assurer que tout est décoché et "nom de groupe", déclare: "menu1"
    2. Aller à la onglet "Affichage" et de s'assurer que tout sur "Afficher la navigation sur le groupe de ..." est cochée zone [x]. Laissez le reposer à défaut.
    3. Aller à la "CSS" et sélectionnez l'onglet bouton radio (x) «Ne pas appliquer des classes CSS".
    4. Allez à "Thème" onglet et de le remplir comme ça:
      navt_configuration_theme_tab_icon
      Insérez-le dans «Ajouter des tags avant ..." zone de ce code:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Insérez-le dans «Ajouter des tags après ..." zone de ce code:
      <br style='clear: left' /></div>
    5. Appuyez sur [Save / Close]
  8. Au menu de ce bâtiment points de l'intérieur options du plugin NAVT est terminée.
    Maintenant il est temps de faire un petit air pour afin qu'elle soit prête. Pour cela nous devons ajouter quelques fichiers personnalisés - CSS et javascript qui appartient au menu et custom_functions.php thèse mise à jour '
  9. Télécharger le jeu complet de fichiers ici .
  10. Décompressez des archives. Si vous avez mis à jour votre custom_functions.php avec vos personnalisations - vous avez besoin de les fusionner avec mes trucs. Je vais laisser à vous.
    Si vous ne l'avez pas touché - n'hésitez pas à l'écraser avec le mien. S'il vous plaît noter: je préfère la position de menu sous l'entête site (par défaut ci-dessus) - de sorte mon adaptation inclus cette préférence ainsi.
  11. Archive des téléchargements y compris tous les sous-répertoires et fichiers sous votre répertoire «coutume», comme ceci:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    Je n'ai pas touché custom.css - je préfère garder un menu CSS spécifique dans leurs propres sites pour éviter de créer désordre intérieur custom.css
  12. A ce stade, vous pouvez recharger votre site Web et voir de nouvelles belles nouvelles à plusieurs niveaux, imbriqués, référencement optimisé de menu.
  13. Vous pouvez toujours revenir à NAVT réglages et de personnaliser votre menu avec plus de choix ou de repositionner rien. Il sera reflétée sur le site vivons automatiquement.

Le chemin à parcourir ...

Ce didacticiel exemple créatif d'un type de menu. J'ai joué avec un autre - juste pour voir comment sombres menus colorés ressemblerait à ceci:

Thesis theme - multilevel nested CSS menu - dark palette

- à plusieurs niveaux imbriqués de menu CSS - palette sombre

Je pense qu'il est assez agréable. Il ya beaucoup plus d'échantillons de navigation disponibles sur Dynamic Drive - elles sont toutes possibles à personnaliser pour la thèse et d'autres thèmes Wordpress avec un certain effort:

Dynamic Drive Horizontal Menus

Menus Dynamic Drive horizontale

J'espère que vous allez trouver ce tutoriel bénéfique et utile. Comme je l'ai dit, il est possible de personnaliser ces menus pour la thèse - qui est donné du temps et de volonté pour y arriver.

Je pouvais faire ce travail pour vous sur une base contractuelle. Il suffit de choisir le menu que vous aimez, contactez-moi et je vais travailler sur le code et les instructions pour votre site web.

20 $

Et bien sûr si vous êtes à la construction de Super référencement optimisé Membre Premium WordPress portail - la meilleure solution pour cela:
Thème de thèse + plug-in d'adhésion MemberWing + auto hébergé Wordpress , bien sûr.

comments } { 15 commentaires }

Message Premium 3

5 juillet 2009

C'est teaser gratuit pour poster des primes 3.
Cet article contient un contenu combiné: La première partie est visible pour les membres Gold, tout l'article est uniquement visible pour les membres Platinum.
Essayez de vous connecter comme l'or premier membre (username / password = or / or) - vous verrez plus de contenu.
... Et puis fermeture de session et reconnectez-vous en tant que membre platine (nom d'utilisateur / [...]

Lire l'article complet →

Prime Post 2

5 juillet 2009

C'est teaser gratuit pour poster prime de 2. Le reste est visible pour les membres Gold et uniquement.
Astuce - Connexion Membre d'or / mot de passe = or / or

Le reste de cet article est accessible aux membres Premium uniquement.
Connexion ou Devenir membre

Lire l'article complet →

Prime de poste 1

5 juillet 2009

Ceci est l'article de démo pour MemberWing-X. Avec MemberWing-X de cet article est fait pour l'achat à un prix unique de 2,95 $ ou en s'abonnant à «Adhésion Gold» du programme.
Donc, ce n'est teaser gratuit pour prime de poste 1. Le reste de cet article est uniquement visible pour les membres qui l'a acheté pour 2,95 $ ou abonné à «L'adhésion d'or".
Astuce [...]

Lire l'article complet →

Thème de la thèse et le plugin MemberWing appartenance à un site pour les meilleurs sites d'adhésion SEO

5 juillet 2009

MemberWing est un plugin wordpress site d'adhésion spécialement conçu pour les portails de référencement optimisé des membres. Avec sa souplesse teasers indexables, le soutien à Google Premier Cliquez libre standard, le contenu numérique et la protection de téléchargement habilités à PromoFusion - il garantit votre site d'adhésion indexation rapide et un meilleur classement.
Tout site d'adhésion d'autres logiciels aime pour désactiver complètement l'accès à [...]

Lire l'article complet →