Accentsconagua

Intégration du menu Superfish dans un modèle

Code
Share

Ceci est un guide court et facile, étape par étape, sur l’utilisation du plugin de menu jQuery, Superfish, développé par Joel Birch..

Étape 1 Télécharger

Téléchargez le zip du pack Superfish sur le site officiel.

Étape 2 Structure du fichier

Copiez les CSS et JS dans le dossier du thème. Pour notre tut, la cible est la vingt onze dossier. Les noms de répertoire sont superfish-css et superfish-js.

Étape 3 Commandes d'importation

Importez les fichiers CSS et JS dans header.php avec le wp_enqueue_script et wp_enqueue_style Fonctions WordPress.

Étape 4 Configuration de la classe

Recherchez la ligne indiquée ci-dessous et changez comme indiqué. De cette façon, nous faisons en sorte que WordPress utilise la version Superfish pour le menu principal:

 // changement de ceci:  «primaire»)); ?> // Pour cela:  'primaire', 'menu_class' => 'sf-menu',)); ?>

Étape 5 Créer un menu

Créez et enregistrez un système de menus dans l’administrateur WordPress, puis il apparaîtra dans la partie appropriée du site. La photo ci-dessous montre le site avant le menu ajouté:

Étape 6 Menu ajouté

Une fois le menu ajouté:

Étape 7 Styling

Modifiez les styles Superfish pour qu'ils correspondent au thème Twenty Eleven. Le fichier s'appelle superfish.css. Voici les détails:

 / * Modifiez ceci: * / .sf-menu a, .sf-menu a: visité / * pseudo-sélecteur visité afin que IE6 applique la couleur du texte * / color: # 13a;  .sf-menu li arrière-plan: # BDD2FF;  / * Pour cela: * / .sf-menu a, .sf-menu a: visité / * pseudo sélecteur visité afin que IE6 applique la couleur du texte * / color: # 999; / * # 13a; * / .sf-menu li arrière-plan: #ccc; / * # BDD2FF; * /
 / * Modifiez ceci: * / .sf-menu li: survol, .sf-menu li.sfHover, .sf-menu a: focus, .sf-menu a: survol, .sf-menu a: actif background: # CFDEFF; contour: 0;  / * Pour cela: * / .sf-menu li: survol, .sf-menu li.sfHover, .sf-menu a: focus, .sf-menu a: survol, .sf-menu a: actif background: #eee; contour: 0; couleur: # 111; 
 / * Modifiez ceci: * / .sf-shadow ul background: url ('… /images/shadow.png') no-repeat en bas à droite; remplissage: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px;  / * À ceci: * / .sf-shadow ul / * background: url ('… /images/shadow.png') non répétée en bas à droite; remplissage: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; * /

Étape 8 Version terminée

Voici à quoi ça ressemblera quand ce sera fini:

Code
×