La quête pour le menu vertical parfait ...

Partie 1 de ce tutoriel décrit étape par étape le processus de construction de menu horizontal imbriqué plusieurs niveaux pour thème de thèse WordPress . Partie 2 va continuer à améliorer cette fonctionnalité. Ici, nous allons ajouter la version "sombre" du menu de navigation horizontal et je vais vous apprendre comment basculer entre "brillant" et la version "sombre". 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 ajoute menu vertical à (et pour WordPress en général). Je cherchais vraiment souple, SEO friendly et multi-navigateur compatible menu vertical 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 en panne, effondré, a soutenu que nombre limité de niveaux ou mal comporté dans l'affaire Gates + de Ballmer junksplorer 6. Enfin, je suis rentré à éprouvés et fiables menus de conduite dynamique que leurs échantillons verticaux se sont révélés être un cas bien qui correspond à mes exigences strictes. J'ai dû modifier considérablement leur bien pour s'assurer qu'il correspond 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 du menu vertical CSS et. Du code js et 3/4 du temps a été consacré à ce qui fonctionne dans Internet Explorer 6.
Quoi qu'il en soit, j'ai été heureux avec le résultat final. Menu de navigation vertical entraîné possède les mêmes avantages que le menu horizontal a.

Avoir la capacité d'ajouter menu vertical est très important pour 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écrits dans la partie 1 du tutoriel pour cela rendra un peu plus courte, mais avec beaucoup plus de longs riches résultats.

Alors voilà:

Bâtiment SEO friendly, vertical, à plusieurs niveaux, le menu hiérarchiquement emboîtés pour WordPress et le thème de la thèse. Étape par étape
(... Qu'est-ce que vous n'auriez jamais cru possible ...)

  1. Installez exec php plug-in et l'activer. Nous aurons besoin parce que je vais utiliser PHP dans le widget texte à émettre du code HTML menu vertical.
  2. Répétez les étapes 1 à 6 de la partie 1 du tutorial . Fondamentalement, vous devez installer et l'activer, utilisez NAVT plug-in + construire visuellement votre menu. Assurez-vous que votre nom de groupe de menus est 'menu1'. Ce nom est codé en dur dans custom_functions.php
  3. Cliquez sur l'icône «engrenage» pour votre groupe 'menu1' pour éditer ses propriétés:
    navt_customize_menu
  4. Suit des étapes 7.1 -7.3 de la partie 1 tutoriel pour définir les "Options", "affichage" et les paramètres des onglets «CSS».
  5. Maintenant, cliquez sur l'onglet «Thème» de cette boîte de dialogue. Nous allons écraser nombre de paramètres là (si vous suiviez 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 à partir de l'étape 1.
    Voici comment ce dialogue doit être rempli:
    1. A l'intérieur du "Thème XPath:" zone Entrez ce code (il ordonne de remplacer toute étiquette avec ces classes):
      .jquerycssmenu, .jqueryslidemenu
    2. Réglez "Action" à "Remplacer par"
    3. A l'intérieur de "Ajouter des tags avant de navigation groupe« zone entrer ce code:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. A l'intérieur des balises "Ajouter après la navigation groupe« zone entrer ce code:
      <br style='clear: left' /></div>
    5. Cliquez sur le bouton [SAVE / CLOSE].
  6. Maintenant, allez dans le panneau d'administration WordPress -> Apparence -> Widgets.
  7. Faites glisser widget de "texte" (de la grande zone "widgets disponibles") dans la zone "Sidebar 1" sur la droite. Nous allons ajouter du code dans le widget texte qui nous aidera à matérialiser menu vertical.
    NOTE: Je présume que vous avez "Sidebar 1" dans l'existence. Thesis Options vous permet de l'éteindre - mais pour le bien de ce tutoriel Faisons ce soit.
  8. Une fois que vous glisser et déposé ce widget - il s'ouvre comme une fleur (je me sens romantique maintenant que la lutte MSIE est terminée).
  9. Dans la zone "Titre" entrer "meilleur Menu vertical du monde" ... Eh bien, n'hésitez pas à utiliser votre créativité - que le texte ira au-dessus de votre menu vertical nouveau-né.
  10. Dans le grand secteur pour le texte - entrer 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 le bouton [Enregistrer], cliquez sur le lien "Fermer".
  12. Télécharger mise à jour un ensemble de fichiers ici .
    Cette archive comprend:


    • Version mise à jour de code de menu horizontal "lumineux"
    • La version "Dark" du menu horizontal
    • Les codes des menus verticaux
    • Version mise à jour de custom_functions.php
  13. Maintenant, vous devez décompresser l'archive et le télécharger dans le répertoire «coutume» de votre thème de thèse.
    Note: 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 à écraser avec ma version.
  14. Voila! Maintenant, vous pouvez recharger votre site Web et voir le même menu horizontal "lumineux" + menu vertical Neato dans la barre latérale gauche.
  15. tâche BONUS: Let changer menu horizontal "clair" sur le schéma de couleur «dark».
    1. Inside 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 commentons sur une ligne et décommentant l'autre.
    2. Maintenant, allez à WordPress Admin-> Outils-> Listes NAVT et cliquez sur l'icône "engrenage" susmentionnée pour modifier les propriétés de votre groupe 'menu1'.
    3. Cliquez sur l'onglet «Thème».
    4. A l'intérieur de "Ajouter des tags avant de navigation groupe« zone entrer ce code:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Maintenant - recharger ta page - et le menu de navigation horizontal principal "comme par magie" est devenu sombre, quelque chose comme ça:
      Thesis theme - multilevel nested CSS menu - dark palette

      thème de thèse - multiniveaux CSS menu imbriqué - palette sombre

      Palette de couleur sombre peut être plus approprié pour certains sites que celui de la couleur de la lumière. Alors maintenant, vous avez une liberté de choix dans votre vie!

    6. Pour revenir à des couleurs "lumineux" - il suffit de défaire les étapes précédentes "Bonus".
  16. Conclusion:
    J'adore Thème de thèse, j'aime WordPress et j'aime le fait que nous avons une façons d'ajouter des menus de navigation décents à nos portails.

20 $


Amusez-vous!

Gleb Esman

{Commentaires sur cette entrée sont fermées}

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 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, niché des menus 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 et Thesis Theme

  1. Accédez au panneau d'administration WordPress. Plugins-> Ajouter, recherchez «navt". Le plugin sera affiché. Cliquez sur [Installer], [Installer maintenant], "Activer Plugin".
  2. 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.
  3. 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.
  4. 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.
  5. Voici comment la structure Créer ma NAVT 'menu1' ressemblait presque terminé:
    navt_building_icon
  6. Terminer la construction initiale, puis cliquez sur l'icône "engrenage" pour personnaliser votre structure de menu:
    navt_customize_menu
  7. Il ouvrira le dialogue avec 4 onglets: Options, Affichage, CSS, Theme.
    1. Allez dans l'onglet "Options" et s'assurer que tout n'est pas cochée et "nom de groupe" dit: "menu1"
    2. Allez à "Affichage" et s'assurer que tout le "groupe Afficher la navigation sur ..." est cochée zone [x]. Laissez le reste à défaut.
    3. Allez à l'onglet "CSS" et sélectionnez le bouton radio (x) «Ne pas appliquer classes CSS".
    4. Allez à l'onglet «Thème» et remplissez-le comme ça:
      navt_configuration_theme_tab_icon
      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>
    5. Appuyez sur la touche [SAVE / fermer]
  8. À 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
  9. Télécharger le jeu complet des fichiers ici .
  10. 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.
  11. 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
  12. A ce stade, vous pouvez recharger votre site Web et voir la nouvelle belle nouvelle, imbriqué, un menu optimisé SEO plusieurs niveaux.
  13. 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:

Thesis theme - multilevel nested CSS menu - dark palette

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 Horizontal Menus

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.

comments } { 15 commentaires }

Prime Post 3

5 juillet 2009

C'est-tête Gratuit pour poste prime 3. Cet article contient le contenu combiné: première partie est visible aux membres Gold, tout l'article est uniquement visible pour les membres Platinum. Essayez de vous connecter en tant que premier membre d'or (nom d'utilisateur / mot de passe = / or) - vous verrez plus de contenu. ... Et puis déconnectez et reconnectez-vous que le platine [...]

Lire l'article complet →

Prime Post 2

5 juillet 2009

C'est-tête Gratuit pour poste prime 2. Le reste est visible pour l'or et les membres seulement. Astuce - or member login / mot de passe = / or ......

{{{Or | platine}}}
Le reste de cet article est disponible aux membres de la prime.

Lire l'article complet →

Prime post 1

5 juillet 2009

C'est l'article de démonstration pour MemberWing-X. Avec MemberWing-X cet article est fait à l'achat à un prix unique de 2,95 $ ou en vous abonnant au programme »pour l'Adhésion Or". Donc, c'est taquin gratuit pour poste prime 1. Le reste de cet article est uniquement visible pour les membres qui ont acheté pour 2,95 $ ou souscrites à "or [...]

Lire l'article complet →

thème de la thèse et l'appartenance site de plug-in MemberWing pour les meilleurs sites d'adhésion SEO

5 juillet 2009

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

Lire l'article complet →