Comment faire votre propre barre collante comme MakeUseOf

Il y a environ un mois, nous avons ajouté un nouvel élément d'interface à MakeUseOf - une barre de navigation et de recherche flottante. Les réactions que nous avons eues sont presque entièrement positives, le trafic de recherche interne a explosé et certains lecteurs nous ont demandé comment en créer un pour leur propre site..

Nous utiliserons jQuery pour coller la barre en haut de l'écran, mais seulement au-delà d'un certain point. Je vais faire tout cela dans le thème par défaut de WordPress - Twenty Eleven, bien que cela puisse bien sûr être appliqué à tout thème ou site Web que vous comprenez suffisamment bien comment le modifier..

Le HTML

Tout d’abord, ouvrez le fichier header.php et identifiez la barre de navigation que nous allons rendre collante. Comme je l'ai dit, le code ci-dessous correspond au code par défaut vingt-onze; le vôtre peut varier.

Premièrement, ajoutez un nouveau conteneur DIV entourant toute la section NAV..

En outre, déplaçons la barre de recherche par défaut ici. Vous remarquerez qu'il est ajouté par défaut en haut à droite du thème; trouver la ligne et collez-le dans notre section de navigation. Supprimer toutes les autres instances de ce fichier.

Si vous enregistrez et actualisez maintenant, vous verrez que le formulaire de recherche n'apparaît pas dans la barre de navigation - il apparaît toujours en haut à droite. C'est parce qu'il a été positionné absolument avec CSS, et nous allons supprimer tout cela dans une seconde.

Le CSS

Ouvrez le fichier principal style.css et recherchez la section du formulaire de recherche:

 #branding #searchform …

Remplacez ce qui se trouve à l’intérieur de celui-ci (cela devrait permettre environ quatre lignes, y compris un positionnement absolu) par ceci:

 #branding #searchform float: left; fond blanc; marge: 7px; 

N'hésitez pas à ajuster la couleur ou la marge. Changez le flotteur si vous préférez qu'il apparaisse à droite du bar. Dans ce thème, la recherche est définie pour se développer lorsque l'utilisateur clique dessus. c'est hors de portée de ce tutoriel, mais vous pouvez voir un effet similaire sur notre recherche MakeUseOf.

jQuery

Si vous vous demandez pourquoi nous utilisons jQuery pour cela, c'est simple: CSS est corrigé et ne peut pas être ajusté de manière dynamique. Bien que nous puissions utiliser CSS pour créer un en-tête collant, il faudrait que ce soit l’élément supérieur de la page. Le problème que nous avons est que notre menu n’est pas l’élément le plus important, nous ne pouvons donc pas commencer avec cela. C'est ici que jQuery est utilisé. on peut vérifier quand l'utilisateur dépasse un certain point; alors, et seulement alors, le rendre collant.

Commencez par ajouter jQuery à votre thème. Votre thème peut déjà l'avoir chargé; sinon, pas de soucis. Vous pouvez soit le mettre en file d'attente, en ajoutant le code suivant à votre fichier functions.php, comme suit:

Ou vous pouvez simplement contourner WordPress et le placer dans le fichier d’en-tête. Quelque part dans votre section de tête, ajoutez simplement cette ligne:

Si vous utilisez la première méthode, elle sera chargée dans pas de conflit mode, ce qui signifie que vous aurez besoin d'utiliser “jQuery” dans votre code pour accéder aux fonctions jQuery. Si vous utilisez la seconde méthode pour l'ajouter directement à votre en-tête, vous pouvez utiliser l'accesseur jQuery standard de $. Je vais assumer la deuxième méthode dans le code ci-dessous.

Donc, pour ajouter du code jQuery, placez le texte suivant quelque part à la fin de votre header.php - J'ai placé le mien juste avant le