Wordpress fournit un grand nombre d'informations sur votre blog et son contenu. Montrer beaucoup de ces informations peut prendre beaucoup de place. Une excellente solution à ce problème est le contenu en onglets!

Dans ce tutoriel, nous allons prendre la disposition de presse WordPress sur laquelle nous avons travaillé précédemment et l'étendre avec des onglets..

Préface

Droite! Nous allons utiliser une combinaison agréable et puissante d'animation de jQuery et .lier la fonction se mélange bien avec la polyvalence de Wordpress WP_Query () et balises conditionnelles exclusives Wordpress. Si vous êtes comme moi, vous aimez voir le produit fini avant tout:

Si vous voulez faire seulement Pour ce tutoriel, vous aurez besoin de la dernière version de jQuery pour ce tutoriel. Télécharger les ici. Sinon, il devrait déjà être dans ce thème que j'ai préparé, que vous pouvez télécharger ici: myTheme.

Nous supposons que vous avez une installation Wordpress en direct, qu’elle soit locale ou hébergée. Il existe des tutoriels sur l’exécution locale de Wordpress ici pour Windows et ici pour OS X. Activer le thème que j’avais préparé précédemment, myTheme, nous aiderait beaucoup. Nous allons continuer sur ce sujet, alors ouvrez index.php et passons à l'édition!

Étape 1 - Nouveau code HTML structurel.

Nous avons besoin de nouveaux codes HTML, évidemment. C'est simple. Nous avons seulement besoin de divs supplémentaires pour envelopper tout ce avec quoi nous travaillons. Placez ce code suivant juste au dessus de

 
 
 
iBlog - Wordpress et jQuery ensemble dans Harmonie.
 
 

Étape 2 - Tags conditionnels

Nous aimons donc le contenu à onglets que nous sommes sur le point de créer, mais nous ne le voulons que sur notre première page pour le plaisir du spectacle! Comment est-il possible d'avoir un code exclusif sur la première page que vous demandez !? Simple. Les balises conditionnelles de Wordpress. C'est une leçon précieuse à apprendre! Les balises conditionnelles fournissent un moyen très puissant de personnaliser vos thèmes un petit peu plus! Ils sont très explicites, mais je vais donner un aperçu de base sous le code. Ajoutez ceci juste sous notre nouveau h1 élément dans index.php.

Vous obtenez ce que c'est, non? if (is_home ()) est notre condition ici, alors si la page actuellement consultée est la maison, inclure notre fichier tabbedContent.php. Que nous allons créer ensuite.

Étape 3 - tabbedContent.php (HTML)

Alors maintenant, nous avons demandé à Wordpress d'inclure tabbedContent.php quand la page est à la maison, mais nous avons toujours besoin du fichier et du contenu réels! Créez un nouveau fichier dans notre répertoire "myTheme" et nommez-le tabbedContent.php. Tapez ou collez le texte suivant dans ce nouveau fichier:

 
 
Articles récents
 
Archives mensuelles
 
Chercher
 
 
 
 
  
 
 
 
  
 
 
  
 
 
 

Génial. Pour le moment, il ne s'agit que de HTML brut, sans ajouts à Wordpress ni à jQuery. Ce n’est pas une nouveauté, mais laissez-moi vous expliquer un peu la mise en page..

• #tabsNav - Ce sont les onglets cliquables! Nous avons ajouté un href attribut de leur contenu correspondant
• . S'assurer que le hrefs correspond au nom d'identifiant de l'élément de liste de contenu correspondant!
• #tabContent - Nous utilisons un
  pas comme les barres latérales de Wordpress, car il est facile à coiffer et est essentiellement une liste de contenu de toute façon! Je pense que le contenu de cet élément est explicite.

  Étape 4 - tabbedContent.php (fonctions Wordpress)

  Maintenant que c'est fait, ça va quand même avoir l'air un peu vide. Nous devons donc remplacer le <-- --> commentaires avec contenu réel! Nous allons commencer par WP_Query (), wp_get_archives () et un formulaire de recherche.

  4.1 - WP_Query ()

  Encore une autre leçon précieuse à apprendre. C'est fantastique si vous voulez faire des choses comme nous, ou un «article en vedette». Fondamentalement, c'est une boucle simplifiée n'importe où sur la page. C'est bien. Alors découpez la balise de commentaire pour notre WP_Query et tapez ce qui suit:

   have_posts ()): $ recent-> the_post ();?> 
   "title =" Lien vers "> 
   

  WP_Query () est fantastique. Oui, c'est une boucle. Pas tout à fait si. Tout ce que nous faisons simplement, c'est de dire à la boucle suivante immanemment de nous montrer une liste des 5 derniers messages. La chaîne entre les crochets de WP_Query peut être n'importe quoi… filtrer par dates, catégories, tags, limite, etc. C'est un outil fantastique pour comprendre, et pourtant un autre précieuse leçon à tirer de cette!

  4.2 - Archives

  Si vous utilisez souvent wordpress themer, vous devez savoir comment faire cela. C'est un appel de base pour une liste de mensuel les archives. Et pour correspondre à la section WP_Query, nous voulons seulement 5 d'entre eux (automatiquement par ordre décroissant). Il suffit de changer le <-- WP_ARCHIVES GOES HERE --> dans tabbedContent.php avec ce qui suit:

  4.3 - Recherche

  Nous n'utiliserons qu'une entrée et une recherche très simples, en utilisant la recherche par défaut que j'utilise toujours dans mes propres modèles. Remplacez le commentaire WP SEARCH par ceci:

  Génial, vous devriez maintenant avoir un nouveau fichier dans le mon thème répertoire appelé tabbedContent.php, et la balise conditionnelle dans index.php. Si vous avez tout suivi correctement, votre thème devrait ressembler à ceci:

  

  Pas si jolie encore… Ou onglet, ou jQueried ou CSSed du tout d'ailleurs. Mais c'est un début et il est bon de savoir que notre code wordpress fonctionne! Nous en avons fini avec tabbedContent.php, afin que vous puissiez fermer ça maintenant!

  Étape 5 - CSS

  Nous avons besoin que nos onglets se fondent dans la page. Pour le moment, ce sont des côtés laids. Nous devons d'abord créer la page pour les personnes sans JavaScript, pour une dégradation progressive. Vous aurez besoin de quelques images si vous voulez le rendre aussi joli que moi. En voici une liste (clic droit et enregistrer sous dans le dossier images du répertoire myTheme!)

  • searchInputBg.png
  • tabContent.png
  • tabContentHover.png
  • tabsNavBg.png
  • tabsNavActive.png
  • tabsNavHover.png

  Tapez ou collez cette énorme dalle de CSS. Rien de nouveau ici, nous alignons simplement les onglets avec les "Détails de la publication", le contenu avec la colonne blanche du contenu principal et utilisons l'occurrence: hover quelques fois..

  / * ------ ONGLETS ------ * / #container width: 600px; marge: 0 auto;  h1 font-size: 1.3em; text-transform: majuscule; couleur: # 949494; espacement des lettres: 1px;  #tabsAndContent ul, #tabsAndContent li padding: 0 ul # tabsNav float: left; largeur: 200px; style de liste: aucun;  ul # tabsNav li background: url (images / tabsNavBg.png) no-repeat center # a8a8a8;  ul # tabsNav li: survol background: url (images / tabsNavHover.png) no-repeat center #eee;  ul # tabsNav *: focus contour: aucun ul # tabsNav li.active background: url (images / tabsNavActive.png) no-repeat center #fff;  ul # tabsNav li.active a color: # 303030;  ul # tabsNav li a padding: 1em 15px; marge: 0 0 1em 0; bloc de visualisation; largeur: 170px; texte-décoration: aucun; couleur: # 7e7e7e; police: 11px / 20px Georgia; text-transform: majuscule;  ul # tabsNav a: survol couleur: # 0a0a0a ul # tabContent margin: 1em 0 0; background: url (images / tabContent.png) no-repeat en haut à droite # fff; hauteur min .: 180px; largeur: 350px; float: gauche; style de liste: aucun; rembourrage: 0 25px; famille de polices: "Helvetica Neue", Arial, Helvetica, Genève, sans serif;  #tabContent> li width: 350px; style de liste: aucun; remplissage: 0 25px 20px 0;  #tabContent li ul li style de liste: aucun;  #tabContent li ul li a display: block; border-bottom: 1px solid # e7e7e7; remplissage: 10px 0;  #tabContent li ul li a: hover background: url (images / tabContentHover.png) no-repeat centre bottom;  form padding: 30px;  entrée de formulaire background: url (images / searchInputBg.png) repeat-x #ddd; bordure: solide 2px # cbc6c9; frontière droite: 0; rembourrage: 5px; marge droite: 0; couleur: #fff; police: 16px Georgia, "Times New Roman", Times, serif;  #searchSubmit border-left: 0; border-right: 2px solid # cbc6c9; marge gauche: 0; position: relative; à gauche: -3px; couleur: # 00416c;  #searchSubmit: hover background: url (images / tabContentHover.png) no-repeat center; couleur: # 003459; curseur: pointeur; 

  Si tout se passe comme prévu, cela devrait être plutôt joli, quelque chose de similaire à ceci (avec votre propre contenu bien sûr):

  

  Maintenant que nous nous sommes assurés que la page est correcte pour ceux sans JavaScript, nous pouvons passer à la restauration pour ceux qui le font!

  Étape 5 - jQuery

  Ma section préférée du tutoriel! jQuery time! Mettons en mots ce dont nous avons besoin pour arriver:

  1. Masquer tous les éléments de liste que nous ne souhaitons pas voir initialement, en affichant uniquement notre première section de contenu, la section WP_Query.
  2. Ajoutez la classe 'active' au premier onglet, car la section correspondante est ouverte.
  3. Lorsque vous cliquez sur un onglet, procédez comme suit:
     • Supprimer la classe active de l'onglet actuellement actif
     • Ajouter la classe active à l'onglet qui vient d'être cliqué
     • Obtenir le href attribut de la dans l'onglet cliqué, et en faire notre nouvelle variable 'cible'
     • Ensuite, la cible se révèle et la zone d'affichage précédente se cache avec une animation.

  Cela peut sembler une tâche difficile à réaliser, mais grâce à jQuery écris moins, fais plus attitude, j’ai réussi à réduire ce dont nous avons besoin à seulement 9 lignes de code js! Cela va dans le $ (document) .ready (fonction () );, sous le script héros et méchant.

  // Et notre petite zone de glisse animée en haut de la conception. $ ('# tabContent> li: gt (0)'). hide (); $ ('# tabsNav li: premier'). addClass ('actif'); $ ('# tabsAndContent #tabsNav li'). bind ('click', function () $ ('li.active'). removeClass ('active'); $ (this) .addClass ('active'); var target = $ ('a', this) .attr ('href'); $ (cible) .slideDown (400) .siblings (). slideUp (300); return false;);

  Une ventilation de base de notre code:

  • $ ('# tabContent> li: gt (0)'). hide (); - Comme nous le voulions dans notre version Word du script, tous les éléments de contenu sont masqués. plus grand que zéro, avec des articles à partir de 0.
  • $ ('# tabsNav li: premier'). addClass ('actif'); - Nous ajoutons la classe 'active' au premier onglet, car si seule la première zone de contenu est affichée, nous ne voulons pas que le deuxième onglet soit actif.!?
  • $ ('# tabsAndContent #tabsNav li'). bind ('click', function () - La fonction .bind! Tout ce que cela fait, c’est que lorsque le paramètre event se produit (cliquez dans notre cas) il lie la fonction suivante à l’élément. et la fonction est:
    • $ ('li.active'). removeClass ('active'); - Prenez la classe active de son titulaire actuel.
    • $ (this) .addClass ('active'); - ajouter la classe à ce, un sélecteur utile quand vous êtes dans une fonction, et est spécifique à l'élément cliqué.
    • var target = $ ('a', this) .attr ('href'); - Créer notre variable 'cible' à partir de l'enfant de l'onglet une L'attribut href de l'élément, utilisant à nouveau ce dans un sélecteur.
    • $ (cible) .slideDown (400) .siblings (). slideUp (300); - Notre animation! Maintenant que nous avons notre objectif, nous le ferons glisser en quatre dixièmes de seconde (ou 40 millisecondes) et nous glisserons tous les frères et sœurs visibles dans l'abîme en près d'un tiers de seconde (30 ms).
    • retourne faux; - C'est important! Vous ne voulez pas que l'historique des navigateurs ait un million de liens précédents simplement en cliquant sur des onglets, n'est-ce pas? Chaque fois que l'URL devient #Articles récents ou quelque chose comme ça, il ajoute une autre entrée à l'historique du navigateur. retourne faux; annule cela, donc aucun changement d'URL et aucun historique n'est ajouté.

  Voilà donc tout le jQuery, CSS, HTML et Wordpress dont nous aurons besoin. Vous devriez avoir quelque chose qui ressemble à ceci:

  

  Oui, il devrait animer, oui, le bouton actif devrait changer et, oui, vous venez de créer votre propre contenu dynamique à onglets et de le mettre en œuvre dans un thème Wordpress avec du contenu Wordpress.!

  Pour finir.

  Nous avons traversé beaucoup de choses dans ce tutoriel. Dans l'ensemble, quelques leçons importantes que nous avons apprises sont les suivantes:

  • WP_Query (); - Un outil puissant pour obtenir du contenu en dehors de la boucle principale.
  • Tags conditionnels Wordpress - fantastique pour personnaliser davantage votre thème.
  • .fonction de liaison - lier facilement une fonction à un élément spécifique avec un événement.
  • animation jQuery - Incroyablement facile à mettre en œuvre et aussi joli qu'un jardin de roses.
  
  
  Code