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 à thème de thèse (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 ...)
- 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.
- 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
- Cliquez sur l'icône «engrenage» pour votre groupe 'menu1' pour éditer ses propriétés:
- 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».
- 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:- A l'intérieur du "Thème XPath:" zone Entrez ce code (il ordonne de remplacer toute étiquette avec ces classes):
.jquerycssmenu, .jqueryslidemenu - Réglez "Action" à "Remplacer par"
- A l'intérieur de "Ajouter des tags avant de navigation groupe« zone entrer ce code:
<div class='jquerycssmenu' style='margin-top:5px;'> - A l'intérieur des balises "Ajouter après la navigation groupe« zone entrer ce code:
<br style='clear: left' /></div> - Cliquez sur le bouton [SAVE / CLOSE].
- A l'intérieur du "Thème XPath:" zone Entrez ce code (il ordonne de remplacer toute étiquette avec ces classes):
- Maintenant, allez dans le panneau d'administration WordPress -> Apparence -> Widgets.
- 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. - 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).
- 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é.
- 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;
?> - Appuyez sur le bouton [Enregistrer], cliquez sur le lien "Fermer".
- 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
- 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. - 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.
- tâche BONUS: Let changer menu horizontal "clair" sur le schéma de couleur «dark».
- 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. - 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'.
- Cliquez sur l'onglet «Thème».
- A l'intérieur de "Ajouter des tags avant de navigation groupe« zone entrer ce code:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Maintenant - recharger ta page - et le menu de navigation horizontal principal "comme par magie" est devenu sombre, quelque chose comme ça:
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!
- Pour revenir à des couleurs "lumineux" - il suffit de défaire les étapes précédentes "Bonus".
- Inside fichier custom_functions.php:
- 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}





