La quête du menu idéal ...
Ceci est la partie 1 du tutoriel
Partie 2 de ce tutoriel enseigne comment construire le menu vertical + palette de couleurs sombres pour l'horizontale
J'ai décidé de me Thème de thèse, parce que l'un de mes clients m'ont informé sur les problèmes de compatibilité entre la thèse et mon wordpress adhésion MemberWing site plugin. Je le fixe et décide ensuite de prendre un coup d'oeil de plus près les thèses réellement donnés la peine de regarder les vidéos sur la page d'accueil du site principal de la thèse - Diythemes.com.
Ce qui m'a impressionné le plus, c'est l'attention au détail, de la convivialité et surtout - les caractéristiques SEO qui sont si bien pensé.
MemberWing plugin adhésion a été conçu dès le départ pour les sites d'adhésion qui devraient tirer le jus SEO autant que possible. J'ai donc payé beaucoup d'attention à une multitude d'améliorations SEO et perfections en MemberWing. Beaucoup de mes propres clients demandent sur des thèmes différents à utiliser et ayant thème qui a été si bien Optimisé pour le référencement de l'intérieur profond serait un excellent complément à l'adhésion des entrepreneurs portail.
La combinaison de compétences référencement de MemberWing avec des pouvoirs référencement de thèses Thème donnerait le meilleur des possibilités de classement à mes clients. Alors, j'ai fait de thèse et a joué avec lui pendant une journée.
C'est un excellent thème de toutes les manières. La partie la navigation de celui-ci est cependant un peu limité en fonction. A partir de thèse 1.5 + il est l'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 des articles ou des postes + beaucoup de catégories.
Ainsi, dans le monde idéal avoir une chance de créer de jolis organisée hiérarchiquement de navigation convivial menu est un must. Thèse droit au large de la chauve-souris a beau la navigation, mais j'ai remarqué que toutes les thèses de sites Web basés êtes à la recherche comme des jumeaux. Personnalisation de thèse menu de navigation n'est pas vraiment simple, alors la plupart des gens il suffit de laisser tel quel. Il n'existe aucun moyen pour changer l'ordre des catégories dans le menu ou les positionner sur les différentes pages. Et encore, la possibilité de créer des structures de menu imbriqué est manquant. J'ai donc décidé de voir ce qui pouvait être fait à ce sujet.
Après avoir essayé la moitié environ douzaine de menu / navigation plugins liés je configurer mon choix sur Wordpress Navigation Liste NAVT Plugin.
NAVT plugin est essentiellement générateur de liste non-ordonnée avec fantaisie super et un peu difficiles à chiffre interface d'administration non traditionnels. Quelle confusion à ce sujet est qu'il ne crée pas de fantaisie menus regardant par elle-même. Elle ne la plus dure partie du travail si - vous donne une capacité d'attraction visuelle ensemble, et générer la liste non ordonnée - squelette de votre menu-to-be. Et vous mai créer des menus trop nombreux. Vous mai tirer toutes sortes de trucs Wordpress dans le menu de navigation: pages, des postes, des articles, des catégories, les utilisateurs, les blocs de code, liens externes, des séparations, des séparateurs et de combiner et le nid et prend des dispositions et de les personnaliser en aucune structure arborescente vous vouloir.
NAVT génère pour vous entraîné HTML liste non ordonnée. Seconde beauté de NAVT est qu'il vous permet d'insérer votre nouveau menu dans votre thème via JQuery célèbre base logique, 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 identifiant ou la 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 prochainement. La partie difficile de NAVT pour tout le monde est que vous aurez à trouver des effectifs CSS + images + 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 se connecter ensemble.
Sincèrement, sans savoir JQuery + un peu de PHP + CSS + ayant une expérience décent avec Wordpress - cette chose est difficile à tirer.
Volontiers je sais que ce genre de choses un peu alors j'ai décidé de serrer les dents et guident l'humanité à la liberté dans la construction du meilleur des meilleurs menus de navigation pour Wordpress. J'ai juste besoin de trouver des sources pour certains menus nice looking horizontale CSS. J'ai choisi le site Web de conduite dynamique pour leurs meilleures sélections, des démos et des sources.
J'ai consacré une journée à l'étude de thèse et jouer avec le plugin NAVT. À la fin, j'ai fièrement créé sur mesure, flexible, référencement optimisé, à plusieurs niveaux, la structure de navigation à imbriqués pour mon site Wordpress + thèse fondée.
Liste des caractéristiques des niveaux multiples, le menu de navigation imbriquée pour Wordpress Thème de thèse
(You Got to love this stuff):
- Professionnel, propre look and feel.
- Support de tous les navigateurs modernes, y compris 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome dans les deux javascript et les modes non javascript.
- Downgradable gracieusement pour les navigateurs non-javascript. Menu vous seront utilisables, visuellement similaires et de travail, même pour les navigateurs sans javascript (bien que seulement la navigation de haut niveau seront visibles et aucun flyouts se passera bien sûr, comme elles sont réalisées par javascript).
- Fonctionnalités conviviales SEO - liste non-ordonnée code menu est généré dans le HTML. Google et d'autres robots de recherche sera en mesure d'indexer votre structure de navigation et de trouver des liens vers des pages intérieures.
- Support de niveaux illimité de nidification et de sous-niveaux.
- Support pour toute commande ou de pages, les postes (définis par l'utilisateur via des URI), les catégories, les utilisateurs, les blocs de code personnalisé et des liens externes dans le menu.
- L'appui de texte ainsi que l'image fondée sur des éléments de menu. (J'ai pas encore essayé ces cependant).
- Structure du menu et le contenu visuel est réglable par NAVT admin domaine.
- Compact: flyouts JQuery base pour les 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 sur place). Cela permettrait d'accélérer un peu les choses.
- Évolutivité - Ce type de menu est modifiable et configurable à tout moment grâce aux paramètres du plugin NAVT sans qu'il soit nécessaire de coder n'importe où.
J'ai utilisé ce menu excellent portail de lecteur dynamique comme base. J'ai eu de personnaliser un peu le code javascript ainsi qu'à inclure morceau de PHP dans custom_functions.php pour le faire fonctionner avec thèse. Aussi le nombre de pré-pages existantes, les catégories et les postes de mon site ont été utilisés pour assembler la structure du menu. Caractéristiques de votre site sera différente - mais les concepts seront les mêmes.
Alors laissez-passer, allons-nous?
Des instructions étape par étape pour NAVT configuration à base SEO imbriqués, personnalisable, à plusieurs niveaux, amical
et juste cool looking plaine menu de navigation pour Wordpress et thèses Thème
- Aller à Wordpress panneau d'administration. Plugins-> Ajouter de recherche, nouvelle pour les «navt". Le plugin sera affichée. Cliquez sur [Install], [Installer maintenant], "Activer le plugin».
- Outils-> Listes NAVT, Inside "Navigation groupe" zone de trouver "nom de groupe" et entrez: "menu1" dans le champ, appuyez sur [Créer] bouton. "Menu1" zone rectangulaire se créé.
Cette "menu1" zone sera le terrain de jeu principal pour la construction de menu. Vous serez glisser-déposer ici vos éléments de menu. - Dans "actifs" zone de trouver "listbox" Autres et cliquez sur "Home" choix. "Home" thingie apparaîtront à l'intérieur de "unassigned" domaine. Bizarre, hein? Pas de soucis, tant que ça marche - et ce sera pour nous.
- Faites glisser cette «Home» thingie de «actifs» dans la zone "menu1" rectangle. Il deviendra "Home" dans le menu.
- Répétez les étapes 3-4 pour quelques pages de "Pages" de la zone, ainsi que pour les catégories des "catégories" région. Faites glisser les autres articles que vous souhaitez apparaître sur votre menu à l'intérieur "menu1" rectangle. Vous cliquez sur les pages de mai, les catégories, les utilisateurs et certains éléments personnalisés tels que "diviseur de liste" et "bloc de code". Bloc de code est une façon cool d'ajouter des extraits personnalisé à l'intérieur du menu.
- Vous mai faire glisser des éléments de menu à l'intérieur "menu1" zone à réorganiser leur ordre.
- Vous mai ajuster la position hiérarchique de chaque option de menu avec "<" et ">" flèches.
- En cliquant sur le nom de texte de chaque élément de menu - ouvre l'esprit ahurissant de 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 basés sur des images de menus et ajouter des morceaux de code HTML dans sa création. Procédez avec prudence cependant.
- Pour linkless sous-menus unclikable qui servira de «parents» pour les autres "sous-enfants" j'ai choisi "bloc de code" type. Par exemple, quand un tel article de la personnalisation du code du bloc I existant pour "alias Menu item" = "MemberWing" et pour "Enter bloc de code:" = "<a href='#'> MemberWing </ a>". Ayant href = "#", il sera impossible de cliquer dessus, mais agissant comme un valide "parent" choix de menu.
- Voici comment mon NAVT "menu1" construire la structure ressemblait presque terminée:
- Achever la construction initiale et cliquez ensuite sur "vitesse supérieure" icône pour personnaliser votre structure de menu:
- Il sera ouvert de dialogue avec 4 onglets: Options, Affichage, CSS, Theme.
- Allez dans "Options" et s'assurer que tout n'est pas cochée et "nom de groupe", déclare: "menu1"
- Aller à onglet "Affichage" et s'assurer que tout sur "Afficher la navigation de groupe sur ..." est cochée la zone [x]. Laissez les autres à défaut.
- Allez dans "CSS" onglet et sélectionnez le bouton radio (x) "Ne pas appliquer sur les classes CSS".
- Allez dans "Theme" onglet et remplissez-le comme ça:
Insert into "Ajouter vos tags avant le ..." zone de ce code:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Insert into "Ajouter vos tags après le ..." zone de ce code:
<br style='clear: left' /></div> - Appuyez sur [Enregistrer / Fermer]
- A ce point du menu de construction à l'intérieur des options du greffon NAVT 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 avons besoin d'ajouter un peu de fichiers personnalisés - CSS et JavaScript qui appartient au menu et mettre à jour custom_functions.php Thesis ' - Télécharger le jeu complet de fichiers ici.
- Décompressez archives. Si vous avez mis à jour avec vos personnalisations custom_functions.php - vous avez besoin de les fusionner avec mon stuff. Je laisserai le soin de vous.
Si vous ne l'avez pas touché - n'hésitez pas à le remplacer avec la mienne. S'il vous plaît noter: je préférais à la position de menu sous l'en-tête site web (par défaut ci-dessus) - si mon ajustement compris cette préférence aussi. - Archive des téléchargements y compris tous les sous-répertoires et fichiers contenus dans votre thème de thèse répertoire 'custom', 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 menu-CSS spécifique en vertu de leurs propres sites pour éviter de créer à l'intérieur du mess custom.css - A ce stade, vous mai recharger votre site Web et voir le nouveau menu belle nouvelle à niveaux multiples, imbriqués, référencement optimisé.
- Vous mai toujours revenir aux paramètres NAVT et personnalisez votre menu avec un choix plus vaste ou repositionner rien. Elle sera répercutée sur site en ligne automatiquement.
La route devant nous ...
Ce tutoriel inclus exemple créatif d'un type de menu. J'ai joué avec un autre - juste pour voir comment le menu de couleur foncée ressemblerait à ceci:
Thème de thèse - à plusieurs niveaux imbriqués menu CSS - palette sombre
Je pense qu'il est plutôt sympathique. Il ya beaucoup plus d'échantillons navigation disponibles à Dynamic Drive - tous sont possible de personnaliser de la thèse et d'autres thèmes Wordpress avec un peu d'effort:
Dynamic Drive Horizontal Menus
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 de la thèse - que se donne le temps et le désir d'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.
20 $
Et bien sûr si vous êtes à la hauteur de construction SEO super optimisé portail wordpress d'abonnement - la meilleure solution pour cela:
Thème de thèse + MemberWing plugin adhésion + Auto-hébergé Wordpress bien sûr.
