Comment puis-je utiliser les onglets jQuery UI dans une page WordPress WordPress développement Stack Exchange

Précédent ◈ Suivant

Je veux utiliser les onglets jQuery UI dans mes WordPress 3.1.4 pages. J'écris des tutoriels de programmation pour un public VB .NET mais comme pour fournir la source C # ainsi, et je veux utiliser les onglets pour laisser les lecteurs basculer entre les deux. Je pourrais probablement faire mon propre temps donné, mais ce qui était censé être un projet « apprendre des choses sur jQuery ». Il est en passe de plus d'un projet « WTF WordPress ». Je suis à peine fonctionnelle JS et d'essayer de corriger cela. Je ne suis pas gourou WP, et ne se soucient pas d'en apprendre plus que ce que je dois savoir encore.

J'ai une page qui est rien d'autre qu'un copier / coller de l'interface utilisateur jQuery onglets démo. Il ne fonctionne pas; la liste et tous les divs sont visibles et il n'y a pas de réels onglets. Je sais que c'est parce que j'ai besoin de CSS, mais c'est là où je suis épuisé. Je ne suis pas sûr d'avoir le CSS fera fonctionner plus, et je ne sais même pas comment dire si c'est le CSS, mes JS, ou mon WP qui est le problème. Jusqu'à ce que je commencé ce projet mon blog « juste travaillé » et voilà comment j'aime mes choses sans travail.

J'ai ajouté l'appel prêt () parce que je suis curieux de savoir si peut-être le code de la démo ne fonctionnait pas. J'ai aussi essayé cette variante du code sans joie:

Qu'est-ce que je manque?

En tant que test rapide, je viens juste appliqué le thème « Base » à votre code ici. (Avis sur la barre latérale, sous Gérer les ressources, il y a un lien vers un fichier Google hébergé jqueryui.css).

JQuery UI a beaucoup de thèmes prédéfinis que vous pouvez utiliser. (Voir l'onglet « Galerie »). Ou vous pouvez rouler votre propre! Assez flexible.

Pour allonger ma réponse un peu. Je recommande d'utiliser CDN de Google au lieu des fichiers jQuery intégrés pour deux raisons.

  1. Vous obtiendrez des versions plus récentes
  2. Ce sera plus rapide

Mais votre recherche est correcte. Vous ne voulez pas inclure simplement la référence CDN jQuery dans votre tête car alors WordPress ne sait pas que vous avez déjà inclus le! (Et vous obtiendrez des conflits avec d'autres plug-ins qui nécessitent jQuery). Une solution simple est d'ajouter l'extrait de code suivant dans votre fichier functions.php:

Ce code indique essentiellement WordPress d'ignorer sa propre version de jQuery, utilisez la référence que vous avez ici, puis la file d'attente vers le haut! (Maintenant, si un autre plug-in « demandes » jQuery via l'API WordPress, il va savoir qu'il est déjà chargé et prêt à partir).

Personnellement, je ne vous inquiétez pas de faire cela avec jQuery UI. Je n'ai pas encore utiliser un plug-in qui veut spécifiquement faire la queue vers le haut lui-même. Donc, dans mon header.php je viens moi-même il inclus, avec un thème qui me plaît:

Bonne chance pour votre projet!

Oui! Ça y est ...! La seule chose qui a pris une minute pour obtenir le droit est-je devais assurer la et