Implémentation du contenu des onglets à l'aide de jQuery et WP_Query

Wordpress fournit une multitude d'informations sur votre blog et son contenu. L'affichage d'une grande quantité de ces informations peut prendre de la place. Une excellente solution est le contenu par onglets !

Dans ce tutoriel, nous prendrons la mise en page du journal WordPress que nous avons utilisée précédemment et l'étendrons avec des onglets.

Avant-propos

Oui ! Nous utiliserons une combinaison intéressante et puissante d'animations jQuery et de la fonction .bind, parfaitement mélangée avec le polyvalent WP_Query() de Wordpress et le balisage conditionnel unique de Wordpress. Si vous êtes comme moi, vous aimez voir le produit fini avant de faire quoi que ce soit :

Ce tutoriel nécessite la dernière version de jQuery si vous souhaitez uniquementsuivre ce tutoriel. Téléchargez-le ici. Sinon, il devrait déjà être inclus dans mon thème préparé, que vous pouvez télécharger ici : monThème.

Nous supposons que vous disposez déjà d’une installation WordPress en direct, locale ou hébergée. Il existe un didacticiel sur l'exécution native de Wordpress sous Windows ici et un didacticiel sur OS X ici. L'activation du thème que j'ai préparé plus tôt - myTheme - sera d'une grande aide. Nous allons développer cela, alors ouvrez index.php et commencez à éditer !

Étape 1 - Nouveau HTML structurel.

Évidemment, nous avons besoin d'un nouveau code HTML. C'est très simple. Nous avons juste besoin de quelques divs supplémentaires pour envelopper tout ce que nous utilisons. Placez le code suivant uniquement ci-dessus

 :

<div id="container">
	<div id="header">
		<h1>iBlog - Wordpress and jQuery together in <em>Harmony.</em></h1>
	</div>
		

Et il faut ajouter le dernier

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!