La quête du menu idéal ...
C'est la partie 1 du tutoriel
Partie 2 de ce tutoriel apprend à construire + menu vertical palette de couleurs sombres pour l'horizontale
J'ai décidé de me sujet de la thèse , parce que l'un de mes clients m'a informé des problèmes de compatibilité entre la thèse et mon wordpress site plugin membres MemberWing. Je le fixe et a alors décidé de regarder de plus près à la thèse et en fait pris la peine de regarder les vidéos sur la page d'accueil du site principal de thèse - Diythemes.com .
Ce qui m'a impressionné le plus, c'est l'attention au détail convivialité et les fonctionnalités les plus SEO de tous - qui sont si bien pensé.
plugin membres MemberWing a été conçu dès le départ pour les sites d'adhésion qui devraient tirer le jus de SEO autant que possible. Donc, j'ai payé beaucoup d'attention à une multitude d'améliorations et de perfectionnements dans SEO MemberWing. Beaucoup de mes propres clients demandent sur des thèmes différents à utiliser et qui a été le thème d'avoir si bien optimisé SEO de l'intérieur profond serait un excellent choix pour les entrepreneurs membres du portail.
La combinaison des pouvoirs de référencement SEO MemberWing avec les puissances du sujet de la thèse serait de donner le meilleur parti des possibilités de classement pour mes clients. Alors, j'ai fait de thèse et a joué avec lui 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 de 1,5 + c'est un menu de niveau seulement. Mon désir est d'habitude d'être en mesure de personnaliser la navigation autant que nécessaire. Certains sites n'ont que quelques pages, beaucoup d'autres ont des tonnes de pages statiques + zillions d'articles / postes + beaucoup de catégories.
Ainsi, dans le monde idéal ayant une chance de créer de jolis organisée hiérarchiquement menu de navigation convivial est un must. Thèse droit au large de la chauve-souris a beau la navigation, mais j'ai remarqué que tous les sites Web de thèse fondée sur la recherche sont comme des jumeaux. Personnalisation des menus de navigation thèse n'est pas vraiment facile si 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 placer entre les pages. Et encore, la capacité à créer des structures imbriquées menu est manquant. J'ai donc décidé de voir ce qui pourrait être fait à ce sujet.
Après avoir essayé la moitié environ menu douzaine / Navigation plugins liés j'ai mis mon choix sur Wordpress Plugin de navigation Liste NAVT .
NAVT plugin est essentiellement non-ordonnée générateur de liste avec fantaisie et super un peu dur à la figure interface d'administration non traditionnels. Qu'est-ce trompeur, c'est que cela ne crée pas de fantaisie menus cherche par lui-même. Il ne la partie la plus difficile du travail bien - vous donne une capacité à rassembler visuellement, et de générer des listes à puces - squelette de votre menu à l'être. Et vous pouvez créer des menus de nombreux aussi. Vous pouvez tirer toutes sortes de choses Wordpress dans le menu de navigation: pages, messages, articles, catégories, les utilisateurs, les blocs de code, les liens externes, des séparations, des séparateurs et de combiner et de nidification et d'organiser et de les personnaliser dans une structure arborescente vous voulez.
NAVT génère pour vous conduit HTML liste non ordonnée. beauté Deuxième NAVT est qu'il vous aide à insérer votre nouveau menu dans votre thème via logique basée JQuery célèbres, mais sans qu'il soit nécessaire de modifier n'importe quel code! NAVT vous permet de spécifier: "remplacer cet élément # avec mon menu NAVT nouvelle". # Élément pourrait être un id 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. Donc, ce remplacement ne NAVT pour vous sans vous forcer à aller dans le code thème et de le rendre plus propre que d'elle l'est déjà. Si tout cela ressemble à du charabia - ne vous inquiétez pas - je vais vous guider étape par étape bientôt. La partie difficile de NAVT pour tout le monde, c'est que vous aurez à trouver des CSS + images réelles code javascript + pour 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 correctement vous connecter ensemble.
Sincèrement, sans savoir JQuery + PHP + CSS des + ayant une expérience décent avec Wordpress - cette chose est difficile à tirer.
Volontiers je sais ce genre de choses un peu alors j'ai décidé de serrer les dents et l'humanité à la liberté guide dans la construction de la meilleure des menus de navigation meilleure pour Wordpress. J'avais juste besoin de trouver des sources pour certains jolis menus CSS horizontaux. J'ai choisi le site d'entraînement dynamique pour leurs meilleures 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, imbriqués structure une navigation pour mon site Wordpress + thèse fondée.
Liste des caractéristiques des niveaux multiples, navigation dans les menus imbriqués pour Wordpress Thème de thèse
(Vous devez aimer ce genre de choses):
- Professionnel, propre look and feel.
- Support pour tous les navigateurs modernes, y compris MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome en javascript et des modes non-javascript.
- Gracieusement downgradable pour les navigateurs non javascript. Vous menu sera utilisable, visuellement similaires et de travail, même pour les navigateurs sans javascript (bien que la navigation de haut niveau sera visible et aucun flyouts-t-il bien sûr qu'ils sont faits par javascript).
- caractéristiques SEO friendly - non ordonnée code menu de la liste est générée au sein de HTML. Google et autres moteurs de recherche sera en mesure d'indexer votre structure de navigation et de trouver des liens vers des pages intérieures.
- Support pour un nombre illimité niveaux d'imbrication et de sous-niveaux.
- Support pour toute commande ou pages, les messages (via des URI défini par l'utilisateur), les catégories, les utilisateurs, les blocs de code personnalisé et les liens externes dans le menu.
- Support du texte ainsi que des éléments de menu à base d'images. (J'ai pas encore essayé ces bien).
- Structure du menu et le contenu est visuellement réglable par zone d'administration NAVT.
- Compact: flyouts JQuery base pour les niveaux imbriqués.
- Fast: jQuery pour le menu est chargé sur les serveurs Google (je Thèse amour lui-même à faire de même au lieu de le tirer sur place). Ce serait d'accélérer les choses un peu.
- Évolutivité - Ce type de menu est modifiable et configurable à tout moment via les paramètres de plugin NAVT sans qu'il soit nécessaire de coder n'importe où.
J'ai utilisé ce menu excellent disque dynamique 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 postes de mon site ont été utilisés pour assembler la structure du menu. Votre site sera spécificités différentes - mais des concepts seront les mêmes.
Alors laissez-passer, allons-nous?
Étape par étape les instructions pour configurer NAVT base imbriqués, personnalisable, multi-niveaux, SEO friendly
et tout simplement cool menu de navigation pour Wordpress et thèses Thème
- Aller au panneau d'administration Wordpress. Plugins-> Ajouter de nouvelles, de la recherche pour "navt". Le plugin sera affiché. Cliquez sur [Installer], [Installer maintenant], "Activer le plugin".
- Outils-> Listes NAVT, Inside "Navigation groupe" zone trouver le nom de «groupe» et entrez: "menu1" dans le champ, appuyez sur [Créer] bouton. "Menu1 zone rectangulaire" m'a créé.
Cette "menu1" zone sera le terrain de jeu principal pour la construction du menu. Vous serez glisser-déposer ici vos éléments de menu. - Dans "actifs" zone de trouver des «autres» ListBox et cliquez sur "Accueil" choix. "Home" truc apparaîtra à l'intérieur du "non assignés" région. Bizarre, hein? Pas de soucis, tant que cela fonctionne - et ce sera pour nous.
- Faites glisser ce "Home" truc de «actifs» en zone "menu1 zone rectangulaire". Il va devenir "Home" dans le menu.
- Répétez les étapes 3-4 pour quelques pages de "Pages" zone, ainsi que pour les catégories des "catégories" région. Faites glisser les éléments que vous voulez être le menu de votre intérieur "menu1" rectangle. Vous pouvez cliquer sur les pages, catégories, utilisateurs et certains des éléments personnalisés tels que diviseur de «liste» et le bloc de code ". bloc de code est vraiment cool pour ajouter des extraits à l'intérieur du menu personnalisé.
- 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 ahurissant dialogue de personnalisation supplémentaires pour cet article. J'ai surtout utilisé par défaut mais techniquement vous pouvez vous rendre 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 les autres "sous-enfants», j'ai choisi "bloc de code" type. Par exemple lors de la personnalisation tels élément bloc de code je suis entré pour "alias de menu" = "MemberWing" et "Enter bloc de code:" = "<a href='#'> MemberWing </ a>". Ayant href = "#", il sera cliquable, mais agissant comme un valide "parent" choix de menu pas.
- Voici comment menu1 "Mon NAVT« structure construire ressemblait presque terminé:
- cliquez sur Terminer la construction initiale, puis sur "engin" icône pour personnaliser votre structure de menu:
- Il est ouvert de dialogue avec 4 onglets: Options, Affichage, CSS, Thème.
- Allez dans "Options" et vérifiez que tout est cochée et le nom de «groupe», déclare: "menu1"
- Aller à onglet "Affichage" et s'assurer que tout le «groupe de la navigation ... Afficher sur la« zone est cochée [x]. Laissez le reste à défaut.
- Allez sur "CSS" et l'onglet Sélectionner le bouton (x) «Ne pas appliquer classes CSS".
- Allez dans "Theme" onglet et remplissez-le comme ça:
INSERT INTO "Ajouter des tags avant le ..." zone de ce code:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
INSERT INTO "Ajouter des tags après ..." zone de ce code:
<br style='clear: left' /></div> - Appuyez sur [Sauver / Fermer]
- Au menu de ce bâtiment point de l'intérieur NAVT options de l'extension est terminée.
Maintenant il est temps de faire un petit air pour thème de thèse pour la préparer. Pour cela nous devons ajouter quelques fichiers personnalisés - CSS et javascript qui appartient au menu et mettre à jour custom_functions.php thèse " - Télécharger le jeu complet des fichiers ici .
- Décompressez archive. Si vous avez mis à jour avec vos personnalisations custom_functions.php - vous avez besoin de les fusionner avec mon stuff. 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: j'ai préféré au menu position dans l'en-tête site (par défaut ci-dessus) - si mon ajustement compris cette préférence ainsi. - archive d'envoi, y compris tous les sous-répertoires et fichiers sous votre sujet de la thèse «coutume» répertoire, 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 CSS menu spécifique en vertu de leurs propres sites pour éviter de créer à l'intérieur du mess custom.css - À ce stade, vous pouvez recharger votre site Web et voir la nouvelle belle nouvelle à plusieurs niveaux, imbriqués, référencement optimisé menu.
- Vous pouvez toujours revenir à des paramètres NAVT et personnaliser votre menu avec plus de choix ou de repositionner quoi que ce soit. Il sera traduit en direct sur le site automatiquement.
Le chemin à parcourir ...
Ce didacticiel exemple de création d'un type de menu. J'ai joué avec un autre - juste pour voir comment sombres menu coloré ressemblera à:
sujet de la thèse - à plusieurs niveaux imbriqués menu CSS - palette sombre
Je pense qu'il est très agréable. Il ya plus de nombreux échantillons de navigation disponibles à Dynamic Drive - ils sont tous possible de personnaliser des thèses et d'autres thèmes Wordpress avec un certain effort:
Dynamic Drive menus horizontaux
J'espère que vous trouverez ce tutoriel bénéfique et utile. Comme je l'ai dit, il est possible de personnaliser ces menus pour de thèse - que l'on donne 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 voulez, 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 hauteur de construction SEO super optimisé membres Premium Wordpress portail - la meilleure solution pour cela:
Thème de thèse + plugin membres MemberWing + auto organisé Wordpress , bien sûr.
