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 thème de la thèse 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, le menu de navigation pour Wordpress imbriquées Thème de thèse
(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 le menu de navigation fraîche à la recherche d'Wordpress 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é:
   
6. Terminer la construction initiale, puis cliquez sur "gear" icône pour personnaliser votre structure de 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:
      
      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 thème de thèse 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 thème Thèse 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:

Thème de thèse - à 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:

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.

Tagged as: le menu CSS pour Wordpress , thème de la thèse , la thèse hiérarchique des menus à thème , menu thématique multi-thèse , la thèse nagivation thème , menus à thème thèse imbriquées , tutoriel thème de thèse , wordpress CSS Menu , wordpress menus imbriqués