So installieren Sie JQuery Mobile auf Ihrer WordPress -Site richtig

Sie möchten also einige der fantastischen neuen jQuery -Mobilfunktionen auf Ihrer WordPress -Site ausnutzen. Kein Problem! Mit dieser schnellen Walkthrough zeige ich Ihnen den "richtigen Weg", um WordPress dazu zu bringen, JQuery Mobile für Sie zu laden. Eine der Hauptfunktionen, die ich verwenden wollte, waren die neuen Popups, die Sie mit JQuery Mobile erstellen können. Diese eignen sich hervorragend für scharf aussehende Situationsdialoge und andere benutzerfreundliche Möglichkeiten, über Eingabeaufforderungen oder Formulare mit Besuchern von Site zu kommunizieren. Die richtige Implementierung in WordPress kann jedoch ein wenig herausfordernd sein. So wie die Sicherheit und Zuverlässigkeit von WordPress bedeutet, dass wir einen leistungsstarken, robusten Rahmen erhalten; Dies bedeutet auch, dass wir beim Implementieren neuer Tools ein paar zusätzliche Schritte unternehmen müssen.

wp_enqueue_script

In erster Linie ist die einzig empfohlene Methode zum Aufrufen einer JavaScript -Funktion oder -anweisung in WordPress über die Funktion WP_ENQUEUE_Script, die für den Zweck in WordPress integriert ist. Auf diese Weise informiert Ihre WordPress -Installation einfach, dass Sie eine Datei haben, die Sie geladen haben möchten, und stellt sicher, dass sie ohne Konflikte oder andere Probleme integriert wird. Im großen Bild ist dies wunderbar, hält Ihre WordPress -Installation organisiert und spart uns viele potenzielle Kopfschmerzen. Kurzfristig kann es jedoch ein Schmerz sein. Hier ist die Aufschlüsselung dessen, was Sie tun müssen, um das JavaScript geladen zu lassen:

1. Erstellen Sie eine Funktion
2. rufen Sie das wp_enqueue_script mit den richtigen Argumenten auf
3. Verwenden Sie die Funktion add_action, um Ihre Funktion ordnungsgemäß aufzurufen, die wp_enqueue_script
enthält

So sieht es im Code selbst aus: [SourceCode Language = ”PHP”] Php Funktion 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] Die Funktion wp_enqueue_script hat nur zwei Anforderungen: den eindeutigen Namen des Skripts, das Sie aufrufen möchten (geben Sie ihm einen gewünschten Namen, vorzugsweise einen vernünftigen, semantischen) und die Quelle des Skripts. In unserem Fall rufen wir die JS -Datei von der jquery.com CDN an. Ich habe auch ein paar zusätzliche Informationen aufgenommen. Insbesondere habe ich die Versionsnummer eingeschlossen, die optional, aber dennoch eine gute Praxis ist. Wenn eine neue Version erscheint, können Sie Ihren Code mit den neuen Informationen aktualisieren und der Browser wird die neueste Version von Jquery Mobile herunterladen. Andernfalls wird es zwischengespeichert und dem Besucher so viel Bandbreite speichert, was zu einer schnelleren, schnellen Ladevorgänge für Ihre WordPress -Website führt. Fügen Sie also Versionsnummern hinzu, wenn Sie können, wenn Sie können.

wp_register_style und wp_enqueue_style

JQuery Mobile ist ohne CSS nicht vollständig! Ich sehe, dass dieser Fehler ziemlich viel passiert. Das JavaScript ist vorhanden, aber die angepasste CSS -Datei, die speziell mit JQuery Mobile zusammenarbeitet, ist dies nicht der Fall. Stellen wir also sicher, dass Ihnen diese Tragödie nicht passiert. CSS -Dateien sind etwas anders und erfordern noch mehr Schritte, um richtig zu werden. Sie müssen zuerst den Stil registrieren und dann aufnehmen: [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] Ich bin sicher, Sie werden das Muster bemerken. Es ist so ziemlich die gleiche Technik, aber diese Methode gibt uns die Flexibilität, die Bedingungen zu bestimmen, unter denen die Datei tatsächlich im Browser geladen wird. Daher können wir die CSS in WordPress registrieren, aber wir müssen den Benutzer nicht herunterladen, wenn ein bestimmtes Ereignis auftritt und er das CSS wirklich benötigt. Ich werde in diesem Artikel nicht in diese Eventualitäten und Abhängigkeiten eingehen, aber es genügt zu sagen, dass dies ein leistungsstarkes Merkmal sein kann, das nur wenige Entwickler voll ausnutzen.

Zusammenstellen des Codes

Nachdem Sie nun sehen, wie die Teile zusammenkommen, um das JavaScript ordnungsgemäß zu unterteilen und gleichzeitig die CSS zu registrieren und zu erlangen, schauen wir uns den endgültigen Code an: [SourceCode Language = ”PHP”] Funktion 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] Sie können diesen Code kopieren und in die Funktionen Ihrer WordPress -Installation einfügen. . In beiden Fällen verbindet dies Ihren Code richtig mit WordPress, damit Sie die neuesten, größten mobilen Funktionen und Funktionen für Ihre WordPress -Website in vollem Umfang nutzen können.

Häufig gestellte Fragen zur Installation von Jquery Mobile auf Ihrer WordPress -Site

Was ist JQuery Mobile und warum sollte ich es auf meiner WordPress-Site installieren? Smartphone-, Tablet- und Desktop -Plattformen. Es basiert auf der JQuery- und JQuery UI Foundation und bietet ein einheitliches HTML5-basiertes User Interface-System für alle beliebten Plattformen für mobile Geräte. Wenn Sie es auf Ihrer WordPress-Site installieren, können Sie die mobile Erfahrung Ihrer Benutzer verbessern und Ihre Website zugänglicher und benutzerfreundlicher machen.

Um Konflikte mit anderen Skripten zu vermeiden, wird empfohlen, den Jquery Noconflict -Modus zu verwenden. Auf diese Weise können Sie JQuery neben anderen JavaScript -Bibliotheken verwenden, die die $ Shortcut verwenden. Sie können den Noconflict -Modus aktivieren, indem Sie nach Einbeziehung der jQuery -Bibliothek die folgende Codezeile hinzufügen: var jq = jQuery.noconflict ();

Kann ich JQuery Mobile mit einem WordPress -Thema verwenden? Ja, JQuery Mobile kann mit jedem WordPress -Thema verwendet werden. Einige Themen erfordern jedoch möglicherweise eine zusätzliche Anpassung, um die Kompatibilität sicherzustellen. Es ist immer eine gute Idee, die Funktionalität von JQuery Mobile mit Ihrem ausgewählten Thema zu testen, bevor ich es auf einer Live -Site bereitstellt. 🎜> JQuery Mobile verfügt über ein Themenoller -Tool, mit dem Sie das Erscheinungsbild Ihrer Website anpassen können. Sie können Farben, Schriftarten und andere Designelemente ändern, die Ihrer Markenidentität entsprechen. Sobald Sie Ihr benutzerdefiniertes Thema erstellt haben, können Sie es herunterladen und zu Ihrer WordPress -Site hinzufügen. Alle Probleme während des Installationsprozesses werden empfohlen, die offizielle jQuery -Dokumentation oder die WordPress -Support -Foren auf Lösungen zu überprüfen. Sie können sich auch an einen professionellen Entwickler wenden, um Unterstützung zu erhalten. Installation. Sie müssen jedoch sicherstellen, dass es für jede einzelne Website im Netzwerk ordnungsgemäß konfiguriert ist.

Wie kann ich JQuery Mobile auf meiner WordPress -Site aktualisieren? Denken Sie immer daran, Ihre Website zu sichern, bevor Sie Updates erstellen, um potenzielle Datenverlust zu vermeiden.

Ist Jquery Mobile mit allen Browsern kompatibel? , Firefox, Safari und Edge. Es bietet auch begrenzte Unterstützung für ältere Versionen von Internet Explorer.

Kann ich JQuery Mobile mit anderen Jquery -Plugins verwenden? Sie sollten jedoch immer die Kompatibilität verschiedener Plugins testen, um sicherzustellen, dass sie zusammenarbeiten, ohne Konflikte zu verursachen. Durch die Leistung von JQuery Mobile können Sie Ihre JavaScript- und CSS -Dateien minifieren, ein Content Delivery Network (CDN) verwenden, um Ihre Dateien zu bedienen und das Caching auf Ihrer Website zu aktivieren. Diese Techniken können dazu beitragen, die Ladezeit Ihrer Website zu verkürzen und die allgemeine Benutzererfahrung zu verbessern.

Das obige ist der detaillierte Inhalt vonSo installieren Sie JQuery Mobile auf Ihrer WordPress -Site richtig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!