La quête du menu parfait ...
C'est la partie 1 du tutoriel
Partie 2 de ce didacticiel enseigne comment construire menu vertical + palette de couleur sombre pour l'horizontale
J'ai décidé de thème de thèse , parce que l'un de mes clients m'a informé des problèmes de compatibilité entre la thèse et mon wordpress adhésion site de plug-in MemberWing. Je l'ai corrigé et puis j'ai décidé de jeter un oeil de plus près Thèses et réellement pris la peine de regarder les vidéos sur la page d'accueil du site de la thèse principale - Diythemes.com .
Ce qui m'a impressionné le plus, c'est l'attention au détail, de la convivialité et surtout - fonctions SEO qui sont si bien pensé.
plugin adhésion MemberWing a été conçu dès le départ pour des sites d'adhésion qui devraient tirer le jus autant SEO que possible. Donc j'ai payé beaucoup d'attention à multitude de SEO améliorations et perfectionnements dans MemberWing. Beaucoup de mes propres clients posent des questions sur des thèmes différents à utiliser et ayant thème qui a été si bien optimisé SEO de l'intérieur profond serait un excellent choix pour les entrepreneurs de portail d'adhésion.
La combinaison de pouvoirs SEO de MemberWing avec des pouvoirs de référencement de thème de thèse donnerait le meilleur parti des possibilités de classement pour mes clients. Alors je me suis Thèses et joué avec lui pendant une journée.
C'est un excellent thème de toutes les manières. La partie navigation de celui-ci, cependant, c'est un peu limité en fonction. A partir de 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 n'ont que quelques pages, beaucoup d'autres ont des tonnes de pages statiques + zillions d'articles / posts + beaucoup de catégories.
Donc, dans le monde idéal avoir une chance de créer looking nice menu de navigation convivial organisé hiérarchiquement est un must. Thèse dès le départ a une bonne navigation regarder, mais j'ai remarqué que tous les sites Web fondé sur une thèse cherchent comme des jumeaux. Personnalisation menu de navigation de la thèse n'est pas vraiment facile pour la plupart des gens le laisser tel quel. Il n'est pas possible de modifier l'ordre des catégories dans le menu ou les positionner dans les pages. Et encore une fois, la possibilité de créer des structures de menus imbriqués est manquant. J'ai donc décidé de voir ce qui pouvait être fait à ce sujet.
Après avoir essayé sur demi-douzaine de plugins associés menu / navigation j'ai mis mon choix sur WordPress liste de navigation NAVT Plugin .
NAVT plugin est essentiellement non ordonnées générateur de liste avec super chic et une interface d'administration difficiles à comprendre non traditionnels bit. Qu'est-ce tromper, c'est que cela ne crée pas réellement menus fantaisie à la recherche de lui-même. Il fait la partie la plus difficile du travail si - vous donne une capacité à tirer visuellement ensemble, et de générer des listes non ordonnées - squelette de votre menu-à-être. Et vous pouvez créer plusieurs menus trop. Vous pouvez tirer toutes sortes de WordPress choses dans le menu de navigation: pages, des poteaux, des articles, des catégories, des utilisateurs, des blocs de code, liens externes, des séparations, des séparateurs et de combiner et nid et d'organiser et de les personnaliser dans une structure arborescente vous vouloir.
NAVT génère pour vous entraîné HTML liste non ordonnée. Deuxième beauté de NAVT est qu'il vous permet d'insérer votre nouvelle carte dans votre thème via célèbre logique basé sur JQuery, mais sans avoir besoin de modifier le code! NAVT vous permet de spécifier: "remplacer cet élément # avec mon nouveau menu NAVT". # Élément pourrait être un id ou class de chemin de menu existant ou div balise de l'élément qui est généré par votre thème actuel. Alors NAVT cela remplacement pour vous sans vous forcer à aller dans le code de 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 bientôt. La partie difficile de NAVT pour tout le monde, c'est que vous aurez à venir avec réelle CSS + images + 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 correctement 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 que ce genre de choses un peu alors j'ai décidé de serrer les dents et guider l'humanité vers la liberté dans la construction du meilleur des meilleurs menus de navigation pour WordPress. J'ai juste besoin de trouver des sources pour la recherche de belles CSS menus horizontaux. J'ai ramassé site d'entraînement dynamique pour leurs meilleures sélections, des démos et des sources.
J'ai consacré une journée pour étudier Thèses et jouer avec NAVT plugin. A la fin je fièrement créé, flexible, référencement optimisé, à plusieurs niveaux, la structure imbriquée nagivation personnalisé pour mon + en fonction du site thèse WordPress.
Liste des fonctionnalités de multi, le menu imbriqué WordPress navigation pour Thème de thèse
(Vous devez aimer ce genre de choses):
- Professionnel, look propre et sentir.
- Prise en charge de tous les navigateurs modernes, y compris MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome à la fois javascript et des modes non javascript.
- Gracieusement à niveau inférieure pour les navigateurs non-javascript. Vous menu sera utilisable, visuellement similaires et de travail, même pour les navigateurs sans javascript (quoique navigation de niveau supérieur ne sera visible et aucun Flyouts se passera bien sûr car ils sont fabriqués par javascript).
- SEO fonctionnalités conviviales - liste non ordonnée code de menu est généré à l'intérieur de HTML. Google et d'autres moteurs de recherche sera en mesure d'indexer votre structure de navigation et trouver des liens vers des pages internes.
- Prise en charge de niveaux d'imbrication illimitée et sous-niveaux.
- Prise en charge de tout ordre ou pages, messages (via défini URI utilisateur), les catégories, les utilisateurs, les blocs de code personnalisés et les liens externes dans le menu.
- Appui de texte ainsi que des éléments de menu à base d'images. (Je n'ai pas encore essayé ces bien).
- La structure du menu et le contenu est réglable via visuellement zone d'administration NAVT.
- Compact: Flyouts base de jQuery pour les niveaux imbriqués.
- Rapide: JQuery pour le menu est chargé depuis les serveurs Google (j'aimerais thèse elle-même à faire de même au lieu de tirer localement). Cela permettrait d'accélérer un peu les choses.
- Évolutivité - Ce type de menu est modifiable et configurable à tout moment via les paramètres de plug-in NAVT sans qu'il soit nécessaire de coder n'importe où.
J'ai utilisé cet excellent menu du lecteur dynamique portail de base. J'ai dû adapter le code javascript un peu ainsi que comprennent morceau de PHP dans custom_functions.php pour le faire fonctionner avec thèse. De plus, le nombre de pages pré-existantes, les catégories et les postes de mon site ont été utilisés pour assembler la structure de menu. Votre site spécificités seront différentes - mais concepts seront les mêmes.
Alors laissez aller, allons-nous?
Étape par étape les instructions pour configurer NAVT imbriquée basée, personnalisable, multi-niveaux, SEO friendly
et tout simplement cool menu de navigation pour WordPress et Thesis Theme
- Accédez au panneau d'administration WordPress. Plugins-> Ajouter, recherchez «navt". Le plugin sera affiché. Cliquez sur [Installer], [Installer maintenant], "Activer Plugin".
- Outils-> Listes NAVT, Intérieur de la région "Navigation Group" trouver "nom de groupe" et saisissez: "menu1" dans le champ, appuyez sur le bouton [Créer]. Zone rectangulaire "menu1" s'est créé.
Cette zone "menu1" sera le terrain de jeu principal pour la construction du menu. Vous serez glisser-déposer ici vos éléments de menu. - En zone "actifs" trouver "autre" liste déroulante et cliquez sur le choix "Home". "Home" thingie apparaîtra à l'intérieur de la zone «non affecté». Bizarre, hein? Pas de soucis, tant que ça marche - et ce sera pour nous.
- Faites glisser ce "Home" thingie de zone "actifs" dans la zone de rectangle "menu1". Il devient une pièce "Home" dans le menu.
- Répétez les étapes 3-4 pour certaines pages de la zone "Pages", ainsi que pour les catégories dans la zone «catégories». Faites glisser les autres éléments que vous voulez être à votre menu à l'intérieur rectangle "menu1". Vous pouvez cliquer sur les pages, les catégories, les utilisateurs et certains éléments personnalisés tels que "liste diviseur" et "bloc de code". bloc de code est vraiment cool à ajouter des extraits personnalisés à l'intérieur du menu.
- Vous pouvez faire glisser des éléments de menu à l'intérieur de la zone "menu1" pour réorganiser l'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 du menu - ouvre le dialogue de personnalisation supplémentaire ahurissant pour cet article. J'ai surtout utilisé par défaut, mais techniquement, vous pouvez aller 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 unclikable sans maillon qui serviront de "parents" pour les autres "sous-enfants" J'avais l'habitude de type "bloc de code". Par exemple lors de la personnalisation comme élément de bloc de code je suis entré pour "Point de menu alias" = "MemberWing" et "Enter bloc de code:" = "<a href='#'> MemberWing </ a>". Avoir href = "#", il sera pas cliquable mais agissant comme un "parent" choix de menu valide.
- Voici comment la structure Créer ma NAVT 'menu1' ressemblait presque terminé:
- Terminer la construction initiale, puis cliquez sur l'icône "engrenage" pour personnaliser votre structure de menu:
- Il ouvrira le dialogue avec 4 onglets: Options, Affichage, CSS, Theme.
- Allez dans l'onglet "Options" et s'assurer que tout n'est pas cochée et "nom de groupe" dit: "menu1"
- Allez à "Affichage" et s'assurer que tout le "groupe Afficher la navigation sur ..." est cochée zone [x]. Laissez le reste à défaut.
- Allez à l'onglet "CSS" et sélectionnez le bouton radio (x) «Ne pas appliquer classes CSS".
- Allez à l'onglet «Thème» et remplissez-le comme ça:
Insérer dans "Ajouter des tags avant ..." zone ce code:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Insérer dans "Ajouter des tags après ..." zone ce code:
<br style='clear: left' /></div> - Appuyez sur la touche [SAVE / fermer]
- À ce bâtiment du menu du point de l'intérieur options de l'extension NAVT est terminée.
Maintenant, il est temps de faire un peu de tune up pour le thème de thèse pour obtenir le prêt. Pour cela, nous devons ajouter quelques fichiers personnalisés - CSS et JavaScript qui appartient au menu et le custom_functions.php de mise à jour Thèse - Télécharger le jeu complet des fichiers ici .
- Décompressez l'archive. Si vous avez mis à jour votre custom_functions.php avec vos personnalisations - vous devez les fusionner avec mes affaires. Je m'en remets à vous.
Si vous n'avez pas touché - n'hésitez pas à le remplacer par le mien. Veuillez noter: je préférais positionner menu sous l'en-tête du site (par défaut ci-dessus) - donc mon adaptation inclus cette préférence ainsi. - Téléchargez l'archive, y compris les sous-répertoires et fichiers sous le répertoire de votre thème de thèse «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 CSS menu spécifique dans le cadre de leurs propres sites afin d'éviter la création de désordre à l'intérieur custom.css - A ce stade, vous pouvez recharger votre site Web et voir la nouvelle belle nouvelle, imbriqué, un menu optimisé SEO plusieurs niveaux.
- Vous pouvez toujours revenir à NAVT paramètres et personnaliser votre menu avec plusieurs choix ou repositionner rien. Il sera automatiquement répercuté sur le site en direct.
Le chemin à parcourir ...
Ce tutoriel inclus par exemple la création d'un type de menu. J'ai joué avec un autre - juste pour voir comment le menu de couleur foncée pourrait ressembler:
thème de thèse - multiniveaux CSS menu imbriqué - palette sombre
Je pense qu'il est assez agréable. Il existe de nombreux échantillons plus navigation disponibles à Dynamic Drive - ils sont tous possible de personnaliser la Thèse et d'autres thèmes WordPress avec un peu d'effort:
Dynamic Drive menus horizontaux
J'espère que vous trouverez ce tutoriel bénéfique et utile. Comme je le disais, il est possible de personnaliser ces menus pour thèse - que l'on 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 web.
20 $
Et bien sûr, si vous êtes à la construction de super-optimisé SEO prime wordpress adhésion portail - la meilleure solution pour cela:
Thème de thèse + plugin adhésion MemberWing + auto organisé wordpress bien sûr.
Commentaires sur cette entrée sont fermées.