Comment installer jQuery Mobile sur votre site WordPress dans le bon sens

Donc, vous voulez commencer à profiter de certaines des fantastiques fonctionnalités mobiles de JQuery sur votre site WordPress, mais vous pouvez utiliser des conseils sur la meilleure façon de fonctionner rapidement. Aucun problème! Avec cette procédure pas à pas rapide, je vais vous montrer la «bonne voie» pour que WordPress charge JQuery Mobile pour vous. L'une des principales fonctionnalités que je voulais utiliser était les nouvelles popups que vous pouvez créer à l'aide de JQuery Mobile. Ceux-ci sont idéaux pour les dialogues situationnels à l'air vif et d'autres façons conviviales de communiquer avec les visiteurs du site via des invites ou des formulaires. Mais, les implémenter correctement dans WordPress peut être un peu difficile. Tout comme la sécurité et la fiabilité de WordPress signifie que nous obtenons un cadre puissant et robuste; Cela signifie également que nous devons prendre quelques étapes supplémentaires lors de la mise en œuvre de nouveaux outils.

wp_enqueue_script

D'abord et avant tout, la seule méthode recommandée pour appeler une fonction ou une instruction JavaScript dans WordPress est via la fonction WP_ENQUEUE_Script, qui est intégrée à WordPress à cet effet. Cela permet simplement à votre installation WordPress de savoir que vous avez un fichier que vous souhaitez charger, et il s'assure qu'il s'intègre sans aucun conflit ou autre problème. Dans l'ensemble, cela est merveilleux, maintient votre installation WordPress et nous fait économiser beaucoup de maux de tête potentiels. À court terme, cependant, cela peut être une douleur. Voici la ventilation de ce que vous devez faire pour faire charger le JavaScript:

1. Créer une fonction
2. Appelez le wp_enqueue_script avec les arguments appropriés
3. Utilisez la fonction add_action pour appeler correctement votre fonction qui contient wp_enqueue_script

Voici à quoi il ressemble dans le code lui-même: [SourceCode Language = ”Php”] Php fonction get_jqm () { wp_enqueue_script ( «JQM_JS», «Https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js», Array («jQuery»), «1.2.0» )); }add_action («wp_enqueue_scripts», «get_jqm»); ?> [/ SourceCode] La fonction WP_enqueue_script n'a que deux exigences: le nom unique du script que vous souhaitez appeler (donnez-lui n'importe quel nom que vous souhaitez, de préférence un Sensible, sémantique) et la source du script. Dans notre cas, nous appelons le fichier JS à partir du CDN jQuery.com. J'ai également inclus un peu d'informations supplémentaires. Plus précisément, j'ai inclus le numéro de version, qui est facultatif mais une bonne pratique néanmoins. Lorsqu'une nouvelle version sort, vous pouvez mettre à jour votre code avec les nouvelles informations et le navigateur téléchargera la dernière version de JQuery Mobile. Sinon, il le mettra en cache et enregistrera le visiteur autant de bande passante, ce qui entraîne des charges de page plus rapides et plus snappites pour votre site Web WordPress. Donc, incluez les numéros de version lorsque vous le pouvez, si vous le pouvez.

wp_register_style et wp_enqueue_style

JQuery Mobile n'est pas complet sans son CSS! Je vois cette erreur se produire un peu. Le JavaScript est en place, mais le fichier CSS personnalisé conçu spécifiquement pour travailler avec JQuery Mobile ne l'est pas. Alors, assurons-nous que cette tragédie ne vous arrive pas. Les fichiers CSS sont un peu différents et nécessitent encore plus d'étapes pour bien faire. Vous devez d'abord enregistrer le style, puis l'obtenir: [SourceCode Language = ”Php”] wp_register_style ( «JQM_CSS», «Https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css», », «1.2.0» )); wp_enqueue_style ( «JQM_CSS», «Https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css», », «1.2.0» )); [/ SourceCode] Vous remarquerez le modèle, j'en suis sûr. C'est à peu près la même technique, mais cette méthode nous donne la flexibilité pour déterminer les conditions dans lesquelles le fichier est réellement chargé dans le navigateur. Nous pouvons donc enregistrer le CSS dans WordPress, mais nous n'aurons pas besoin que l'utilisateur le télécharge jusqu'à ce qu'un événement spécifié se produise et qu'ils ont vraiment besoin du CSS. Je ne vais pas entrer dans ces contingences et dépendances dans cet article, mais il suffit de dire que cela peut être une fonctionnalité puissante dont peu de développeurs profitent pleinement.

assembler le code

Maintenant que vous voyez comment les pièces se réunissent pour mettre correctement le javascript tout en enregistrant et en mettant en place le CSS, regardons le code final: [SourceCode Language = ”Php”] fonction get_jqm () { wp_enqueue_script ( «JQM_JS», «Https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js», Array («jQuery»), «1.2.0» )); wp_register_style ( «JQM_CSS», «Https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css», », «1.2.0» )); wp_enqueue_style ( «JQM_CSS», «Https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css», », «1.2.0» )); }add_action («wp_enqueue_scripts», «get_jqm»); [/ SourceCode] Vous pouvez copier et coller ce code dans le fichier Functions.PHP de votre installation WordPress ou l'utiliser pour configurer votre propre plugin . Quoi qu'il en soit, cela connectera correctement votre code à WordPress afin que vous puissiez profiter pleinement des dernières fonctions et fonctions mobiles JQuery les plus grandes pour votre site Web WordPress.

Les questions fréquemment posées sur l'installation de JQuery Mobile sur votre site WordPress

Qu'est-ce que jQuery Mobile et pourquoi dois-je l'installer sur mon site WordPress?

jQuery Mobile est un cadre Web optimisé par le toucher qui vous permet de concevoir un seul site ou une application réactive qui fonctionnera sur toutes les populations populaires Smartphone, tablette et plates-formes de bureau. Il est construit sur le dessus de la Fondation JQuery et JQuery, et propose un système d'interface utilisateur unifié basé sur HTML5 pour toutes les plates-formes de périphériques mobiles populaires. L'installation sur votre site WordPress peut améliorer l'expérience mobile de vos utilisateurs, ce qui rend votre site plus accessible et convivial.

Comment puis-je m'assurer que JQuery Mobile n'influence pas avec d'autres scripts sur mon site WordPress?

Pour éviter les conflits avec d'autres scripts, il est recommandé d'utiliser le mode jQuery Noconflict. Cela vous permet d'utiliser jQuery aux côtés d'autres bibliothèques JavaScript qui utilisent le raccourci $. Vous pouvez activer le mode Noconflict en ajoutant la ligne de code suivante après avoir inclus la bibliothèque jQuery: var jq = jQuery.NoConflict ();

Oui, JQuery Mobile peut être utilisé avec n'importe quel thème WordPress. Cependant, certains thèmes peuvent nécessiter une personnalisation supplémentaire pour assurer la compatibilité. C'est toujours une bonne idée de tester les fonctionnalités de jQuery Mobile avec le thème que vous avez choisi avant de le déployer sur un site en direct.

Comment puis-je personnaliser l'apparence de JQuery Mobile sur mon site WordPress?

jQuery Mobile est livré avec un outil de thèse qui vous permet de personnaliser l'apparence de votre site. Vous pouvez changer les couleurs, les polices et autres éléments de conception pour correspondre à votre identité de marque. Une fois que vous avez créé votre thème personnalisé, vous pouvez le télécharger et l'ajouter à votre site WordPress.

Et si je rencontre des problèmes lors de l'installation de jQuery Mobile sur mon site WordPress?

Si vous rencontrez Tout problème pendant le processus d'installation, il est recommandé de vérifier la documentation officielle de JQuery Mobile ou les forums de support WordPress pour les solutions. Vous pouvez également contacter un développeur professionnel pour obtenir de l'aide.

Puis-je utiliser JQuery Mobile sur une installation WordPress multi-sites?

Oui, JQuery Mobile peut être utilisé sur un WordPress multi-sites installation. Cependant, vous devrez vous assurer qu'il est correctement configuré pour chaque site individuel du réseau.

Comment puis-je mettre à jour JQuery Mobile sur mon site WordPress?

La mise à jour de JQuery Mobile est aussi simple que de remplacer les anciens fichiers mobiles jQuery par les nouveaux. N'oubliez pas de sauvegarder votre site avant de faire des mises à jour pour éviter toute perte de données potentielle.

JQUERY Mobile est-il compatible avec tous les navigateurs?

jQuery Mobile est conçu pour fonctionner sur tous les navigateurs modernes, y compris Chrome , Firefox, Safari et Edge. Il offre également une prise en charge limitée pour les versions anciennes d'Internet Explorer.

Puis-je utiliser JQuery Mobile avec d'autres plugins jQuery?

Oui, JQuery Mobile peut être utilisé en conjonction avec d'autres plugins jQuery. Cependant, vous devez toujours tester la compatibilité de différents plugins pour vous assurer qu'ils travaillent ensemble sans causer de conflits.

Comment puis-je optimiser les performances de JQuery Mobile sur mon site WordPress?

pour optimiser le Performances de JQuery Mobile, vous pouvez minimer vos fichiers JavaScript et CSS, utiliser un réseau de livraison de contenu (CDN) pour servir vos fichiers et activer la mise en cache sur votre site. Ces techniques peuvent aider à réduire le temps de chargement de votre site et à améliorer l'expérience utilisateur globale.

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!