Apple a toujours été un dieu dans la manière dont il se présente et présente ses produits. J'adore la barre latérale de la page de démarrage d'Apple et je voulais utiliser le plug-in Accordion dans l'interface utilisateur de jQuery pour y parvenir! Comme si cela ne me suffisait pas, je veux pouvoir le montrer et le cacher à mon gré. Je vais te montrer comment!

Préface

Ce tutoriel suppose que vous avez un moteur wordpress s'exécutant sur un serveur auquel vous avez accès pour télécharger des fichiers, télécharger des fichiers et accéder à. Si vous voulez exécuter un serveur local sur votre ordinateur avec une installation wordpress, il existe un tutoriel à ce sujet ici pour Windows et ici pour OS X.

Fichiers dont vous aurez besoin.

Nous avons besoin d'un total de 6 fichiers pour ce tutoriel:

• functions.php - Cela contiendra une petite ligne de code enregistrant notre barre latérale.
• index.php - Nous avons très certainement besoin de ce fichier. Tout devine pourquoi?
• jQuery - Voici la version 1.2.6 pour vous.
• jQuery UI (accordéon) - Nous avons seulement besoin du plug-in Accordion et du noyau de l'interface utilisateur, pas de la bibliothèque entière de l'interface utilisateur..
• sidebar.js - Contient tout le code jQuery de la barre latérale.
• style.css - Nécessaire pour activer le thème, et contient tout le CSS.
• dossier images - Je vais vous donner une liste d’images à compléter un peu plus tard, dans la partie CSS. Pour l'instant, cependant, nous n'avons besoin que d'une image au format HTML - l'icône RSS! Placez-le dans le dossier 'images' et commençons!

N'oubliez pas d'activer votre thème Wordpress (qui doit être nommé judicieusement sidebarTheme) dans Dashboard! Droite. Pour le tutoriel! Nous allons commencer avec le HTML et Wordpress dont nous aurons besoin. Cela inclura le strcutre dont nous aurons besoin, puis nous le remplirons avec le code Wordpress qui affichera les messages, s’enregistrera et montrera notre barre latérale. Cela semblera toujours moche après cela, donc nous allons y remédier avec quelques jolis CSS qui la feront ressembler un peu à la page de démarrage d’Apple et donnerons à la barre latérale un aspect d’apple-y aussi. Nous faisons cela avant le JS afin que ceux sans JS voient toujours le joli lookin. Enfin, mon préféré: le jQuery. Nous allons l'animer ouvert et fermé, et utiliser accordéon() et ses paramètres pour générer l'effet de survol.

Étape 1 - HTML

Ouvrir rapidement functions.php, et mettez ceci dans:

 «appleQuery»)); ?>

functions.php est automatiquement récupéré par PHP / Wordpress et exécute les fonctions. Cette fonction demande à Wordpress d’enregistrer une nouvelle barre latérale dans le tableau de bord pour y ajouter des widgets. Ce n'est pas tout… Nous devons intégrer cela dans notre thème! Je vais expliquer cela après le bit HTML / Wordpress suivant. Le tableau ne fait que nommer la barre latérale, ce qui permet de sélectionner la barre latérale à éditer dans Dashboard (pas vraiment un problème… Plus une bonne habitude en cas de nombreuses barres latérales).

Copiez ou tapez ceci dans votre index.html:

            
 
 
 
   
 
 
 
  Meilleurs histoires  "title =" Flux RSS 2 "> 
  
  
"title ="">
 
  
 
   
 
  

Explication

Ok… je sais que c'est beaucoup. Beaucoup beaucoup. Mais ce tutoriel ne se concentre pas spécifiquement sur Wordpress et HTML, mais je vais sélectionner les intérêts que vous devriez probablement comprendre..

• Le segment entier de la barre latérale - C'est l'essentiel de ce qui est important. Ce que nous demandons à wordpress, est-ce si, dans tout le moteur wordpress local, la fonction barre dynamique est présent (ce qu'il est dans functions.php), exécutez la fonction. AppleQuery spécifie le nom de la barre latérale que nous lui avons attribuée (en functions.php, rappelles toi?).
• - Ceci est un peu de PHP brut pour faire écho à la date et l'heure actuelles de l'utilisateur. C'est seulement ici parce que c'est sur Apple! C'est au format de: (Mois JJ, AAAA 00:00 GMT).
• - Regarde dans le tête élément… Voyez-vous la même chose? Encore une fois, c'est sur le site Web d'Apple. C'est juste le flux d'entrées XML pour le blog.
• - Rien d’incroyable… C’est juste le bouton qui permet de basculer la visibilité de la barre latérale. J'en ai fait une étendue pour qu'il ne soit pas cliquable pour les navigateurs JSless, mais en utilisant la fonction .click () de jQuery, les personnes ayant JS peuvent!

Donc, avec le HTML et le Wordpress, je vous suggère d’aller dans votre administrateur WP et d’ajouter quelques widgets à votre blog. Pour une raison quelconque, Search n'a pas de titre et le widget Nuage de tags ne disparaît pas - Allez-vous comprendre! J'ai utilisé le suivant dans le mien:

• Les catégories
• Les archives
• Liens
• Des pages
• Méta

Et cela devrait ressembler à quelque chose comme ça: Un peu moche hein? Ne craignez rien, CSS est là!

Étape 2 - CSS

Oui, le fantastique CSS est là pour sauver la journée! Nous voulons créer quelque chose qui nous rappelle quelque chose (maquette Photoshop):

Vous aimez mon petit effet de flou? Je pensais que ça convenait… En tout cas. Le flou sera le JS, mais pour le moment, nous voulons que tout soit développé et affiché. Ainsi, pour le 1% des cookies intelligents pour lesquels JS n'est pas activé, la barre latérale sera toujours visible et jolie. Très, très gros, mais néanmoins là. C'est un gros morceau, alors je l'ai mis dans un autre fichier, pour ne pas remplir cette page - Ne me tuez pas! Copiez ou tapez ce CSS dans votre style.css. Vous aurez besoin de toutes ces images:

• activeBg.png
• h1.png
• inactiveBg.png
• sidebarClose.png
• sidebarOpen.png
• topStoriesBg.png

Quelques choses à noter

• En ce qui concerne la taille des polices, je me suis efforcé de respecter les normes, de sorte que 75% réduisent simplement la taille du texte à 12 pixels, qui devient alors 1em. C'est pour un autre tutoriel si!
• Dans le code h1, j'ai utilisé 'text-shadow'. C'est CSS3. Il contribue simplement à l'aspect de la pomme!
• #contenu - A une couleur de fond de blanc. Pourquoi demandes-tu? Le fond sera toujours blanc de toute façon, à quoi ça sert? Eh bien, mes amis, quand nous arrivons à la jQuery nous avons besoin #contenu devenir une couverture pour la barre latérale, et s'il n'y a pas d'arrière-plan défini, ce sera transparent, montrant ainsi la barre latérale.
• #sidebarToggleButton - C'est un sacré nom… Cela définit le bouton qui bascule la visibilité de la barre latérale pour qu'elle soit correctement positionnée, mais invisible pour les utilisateurs de JSless. Lorsque nous passons sur le JS, les images d'arrière-plan seront appliquées à ce moment-là.!

Ces 3 choses sont à peu près les seules bizarreries ici. J'ai testé ce code dans FF, Safari 3 et Opera 9, et tout semble parfait! Voici à quoi cela devrait ressembler:

Ensuite, nous devons jQueryfy.

Étape 3 - Heure jQuery!

J'aime jQuery! J'adore le fait que vous puissiez traduire des mots en code si facilement, et je commence toujours par les mots. Voici une idée de base de ce que nous voulons que le script fasse.

• Masquer la barre latérale.
• En cliquant sur '.sidebarOpen', basculez comme suit:
  • Supprimer la classe 'sidebarOpen'.
  • Ajoutez la classe 'sidebarClose' (que nous styliserons à la section suivante).
  • Animez la barre latérale pour sortir du dessous (littéralement, en utilisant position: relative;)
  • Animer (this) pour déplacer X nombre de pixels vers la gauche (afin qu’il reste aligné avec la barre latérale).
• Initier l'accordéon.

Tout cela semble beaucoup (mais ce n'est vraiment pas…) alors je vais vous l'expliquer étape par étape. Ouvrez le fichier que vous avez créé appelé sidebar.js et commencez à taper!

Étape 3.1

Comme toujours, n'oubliez pas de tout emballer dans le document spécial de jQuery:

$ (document) .ready (function () // le code jQuery va ici);

Mettez tout ici entre le document prêt!

Étape 3.2

$ ("# sidebar"). css (left: "205px");

Ceci "cache" la barre latérale en manipulant les CSS de niveau DOM. Ce n'est pas vraiment, ça passe juste sous le tapis. Le tapis littéral contenu div #. Cela ne fonctionnera pas tant que nous n'aurons pas ajouté un peu plus de CSS, mais je couvrirai après cette section.

Étape 3.3

$ (". sidebarOpen"). toggle (function () $ (this) .removeClass ("sidebarOpen") .addClass ("sidebarClose") .animate (right: "205px", 500); $ ("# sidebar "). animate (left:" 0px ", 500);, function () $ (this) .removeClass (" sidebarClose ") .addClass (" sidebarOpen ") .animate (right:" 0px " , 500); $ ("# barre latérale"). Animate (left: "205px", 500););

OK je peux comprendre votre confusion. C'est beaucoup pour une instruction pas à pas, n'est-ce pas?! Eh bien oui… Mais c'est en fait 2 choses très similaires. La première fonction dans le .basculer() volonté:

• Supprime la classe de 'sidebarOpen' (les classes sont pour CSS dans la section suivante).
• Ajoute la classe de 'sidebarClose'.
• Anime notre petit bouton pour glisser à gauche à côté:
• La barre latérale glissant elle-même, étant animée avec jQuery. Les deux sont prêts à sortir pendant une demi-seconde, ils doivent donc bouger ensemble.

Le fait est que la deuxième fonction est exactement cela, mais en sens inverse. Il:

• Supprime la classe de 'sidebarClose'.
• Ajoute la classe de 'sidebarOpen'.
• Anime notre petit bouton pour glisser à droite:
• La barre latérale qui glisse dans.

Voir! Pas si dur. Il suffit de lire beaucoup de code.

Étape 3.4

Temps accordéon! Yay! Nous arrivons enfin à utiliser l'interface utilisateur jQuery. La façon dont ils ont conçu le widget le rend très simple à implémenter:

$ ("# sidebar ul"). accordion (en-tête: 'h2', événement: 'survol', activeClass: 'sélectionné');

C'est juste celui .accordéon() fonction, appliquée à la ul dans le #sidebar div. Les paramètres (un par ligne) sont les suivants (joli auto-explicatif… Mais hein):

• entête - Ceci définit les poignées de chaque tiroir pour accordéon - Dans notre cas, le h2 de chaque widget.
• un événement - Définit quand changer de tiroir, et nous voulons l'effet de survol comme Apple, alors nous utilisons passer la souris
• activeClass - C'est pratique pour le petit supplément de CSS que nous sommes sur le point de supporter. Il donne au tiroir élargi une classe de "sélectionné".

C'est tout le code JavaScript dont nous aurons besoin. Tout est simple et facilement modifiable pour répondre à tous vos besoins!

Pourquoi c'est si fantastique

Je pense que cela n'a pas encore été suffisamment glorifié! Ce qui est étonnant avec le plugin accordéon, c’est que vous n’avez pas à éditer les fichiers. Wordpress généré code, que nous n'avons pas du tout formaté (mis à part l'emballage) ul, mais c'est nécessaire malgré tout). Non seulement il est 100% discret et 100% non fiable sur le code HTML modifié, mais il s'agit également d'une fonction rapide et rapide. Accordion fait tout le sale travail de sélection, animation, activation, changement de classe, etc. C'est génial! Considérez AccordionUI glorifié! Vous devriez probablement avoir quelque chose de semblable à ceci (j'ai mis l'accordéon très légèrement pour que vous puissiez voir où il devrait être):

Étape 4 - CSS jQuery

Il est donc évident que nous aurons besoin d’un peu de CSS supplémentaire pour tenir compte de tous les changements et modifications apportés par jQuery. Les choses nécessitant un style supplémentaire sont:

• #sidebarToggleButton - En utilisant les classes que jQuery nous attribue, nous pouvons maintenant nommer en toute sécurité les images "sidebarClose.png" et "sidebarOpen.png" que je vous ai demandé de sauvegarder plus tôt..
• L'accordéon a certainement besoin de travail. Nous devons réparer les cordes carrées avec du CSS3 et donner un style à la classe active.

/ * jQUERY CSS * / #sidebar> ul border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -opera-frontière-rayon: 5px;  span.sidebarOpen background: url (images / sidebarOpen.png) no-repeat center;  span.sidebarClose background: url (images / sidebarClose.png) no-repeat center;  h2.selected background: url (images / activeBg.png) repeat-x! IMPORTANT; couleur: blanc! IMPORTANT; 

Juste 2 choses à noter:

1. #sidebar> ul - C'est le direct ul enfant de #sidebar obtient les cordes arrondies cool - toujours bêta CSS3. Mais fonctionne dans tous les navigateurs basés sur Mozilla, Opera et WebKit.
2. !IMPORTANT - Cela est nécessaire pour remplacer ce qui a été défini précédemment - le fond gris de la poignée par défaut.

Et si maintenant, votre spectacle de produit final soit quelque chose de joli comme ceci: (Cliquez pour la version HTML)

Emballer

Nous avons donc passé en revue quelques éléments de ce didacticiel. Nous avons examiné les barres latérales dynamiques, beaucoup de jQuery pour afficher et masquer la barre latérale qui est en fait un accordéon en soi! Ce tutoriel visait à utiliser des plugins supplémentaires pour le jQuery par défaut (nous avons branché l'interface utilisateur de jQuery), ainsi que la fonction dynamic_sidebar..