Wie fügt man Javascript korrekt zu dieser PHP Seite ‘Seite nicht gefunden’ hinzu?

Ich versuche, meiner PHP-Seite “Page Not Found” einige Javascripts hinzuzufügen, aber egal wie viele verschiedene Wege ich es versuche, es bricht etwas.

Hier ist eine Beispielseite für diesen Code: http://www.miamirealestateguy.com/miami-property-for-sale-details/9401-COLLINS-AVE-807-SURFSIDE-FL-33154/A10077417/39/

Meine aktuelle Seite verwendet den folgenden Code und alles LOOKS in einem Browser korrigiert, aber die Skripts auf der Seite brechen meine Navigation am oberen Rand der Seite, so dass das Dropdown-Menü nicht funktioniert. Wenn ich die Skripte entferne, funktioniert die Navigation wieder.

Bildbeschreibung hier eingeben

 

<?php printf( __( 'Ready to publish your first post? Get started here.', 'Serene' ), esc_url( admin_url( 'post-new.php' ) ) ); ?>

<?php _e( '

If you arrived on this page by clicking a link to a real estate listing in a search engine, the property has now been sold or is no longer available.


You can start a new search for currently available real estate listings below.

', 'Serene' ); ?>

Search by Criteria:


Search by Street Address:


Search by MLS ID:


Search by Map:

Ich habe versucht, die Skripte innerhalb dieses Tags zu verschieben, wo der grundlegende HTML-Code für den Text auf der Seite angezeigt wird. Dadurch wird jedoch die gesamte Seite aufgebrochen und es funktioniert nichts:

 <?php _e( '

If you arrived on this page by clicking a link to a real estate listing in a search engine, the property has now been sold or is no longer available.


You can start a new search for currently available real estate listings below.

', 'Serene' ); ?>

Kann mir jemand bei der korrekten Implementierung der Skripte auf dieser Seite helfen, damit meine Top-Navigation nicht beeinträchtigt wird? Ich habe alles versucht, was mir durch Versuch und Irrtum einfällt und kann es nicht herausfinden, und ich verstehe PHP überhaupt nicht!

Vielen Dank!

Solutions Collecting From Web of "Wie fügt man Javascript korrekt zu dieser PHP Seite ‘Seite nicht gefunden’ hinzu?"

Problem

Die kurze Version

Das Problem ist nicht, wie Sie diese Skripte verwenden oder wo Sie sie platzieren – so haben die Autoren dieser Skripte sie geschrieben.

Die lange Version

Ihr “Superfish” $.browser das die functionalität Ihres Navigationsmenüs steuert, wirft Fehler, weil $.browser definiert ist. Während $.browser vor mehr als 3 Jahren veraltet war, lädt WordPress standardmäßig das “jQuery Migrate Plugin”, was das Problem durch die Bereitstellung von functionalität für veralteten Code beheben sollte – es sei denn, eines der 49 zwischen jQuery Migrate und Superfish geladenen Skripte überschreibt $.browser aus irgendeinem Grund: und hier kommen wir zum Fleisch des Problems.

Die in Ihrer Antwort beschriebenen “Widget-Skripte” laden alle weiteren Skripts und Bibliotheken zusätzlich zu den 68 anderen auf der Seite, einschließlich verschiedener Versionen der jQuery- und jQuery-UI-Komponenten, die Ihre Site bereits geladen hat. Ihre Site lädt selbst jQuery v1.12.4, während die “widget scripts” v1.9.1 laden. In der JavaScript-Konsole Ihres Browsers können Sie die Version im Speicher nach dem Laden der Seite überprüfen, indem Sie jQuery.fn.jquery oder $.fn.jquery ausführen – was auf Ihrer Website 1.9.1 erzeugt.

Dies zeigt ein problematisches Problem – die “Widget-Skripte” von “idxhome” sind nicht korrekt gekapselt und laden jQuery auch nicht im Kompatibilitätsmodus. Das Ergebnis ist, dass sie die window.jQuery und window.$ Vollständig überschreiben, was das Löschen der Variablen $.browser – was den Superfish-Fehler verursacht und Ihre Navigation zerstört. Der andere massive Nebeneffekt ist, dass es unglaublich schwierig ist, zu bestimmen, welcher Code auf Ihrer Seite mit welcher Version von jQuery ausgeführt wird, die ein hohes Potenzial zur Erzeugung aller möglichen bizarren Bugs hat – besonders seit der Version, die die idx-Widgets injizieren fast 4 Jahre älter als der, den Ihre Website lädt.

Normalerweise könnten Sie die jQuery.noConflict() -function von jQuery , um die globalen Variablen jQuery und $ wiederherzustellen, bevor sie von anderen blockiert wurden (in diesem Fall die andere jQuery-Bibliothek, die von den Widgetscripts geladen wurde) – jedoch seit dem Laden jedes idx-Widgets Es ist eine eigene jQuery-Bibliothek, selbst die “Sicherungskopien” dieser Variablen zeigen auf den falschen jQuery-Code, nachdem zwei oder mehr Widgets geladen wurden.

Nebenbei bemerkt, es ist ein Kommentar wert, dass es in der Regel keinen guten Grund gibt, nicht-textbezogenen HTML-Code (andere Dinge als Elemente wie , und ) innerhalb des WordPress-Übersetzungsfunktionen wie _e() , da es meistens wünschenswert ist, dass das Markup unabhängig von der aktiven Sprache gleich bleibt.


Lösungen

Wenn Sie nicht WordPress und Webentwicklung lernen wollen, sollten Sie einen Entwickler beauftragen, um Ihre Site zu optimieren (Scripts und Stylesheets zu kombinieren, unnötige und überflüssige zu entfernen, Versionsupdates durchzuführen, wo dies nützlich ist, etc.). Es ist eine großartig aussehende Seite – aber es könnte etwas technische Liebe gebrauchen!

In jedem Fall ist eine der lohnendsten Lösungen wahrscheinlich, die Autoren der IDX-Skripte in Bezug auf dieses Problem zu kontaktieren – ich denke, sie sollten ihre Skripte aktualisieren, um höflicher zu den Umgebungen zu sein, in die sie geladen werden (zB Verbesserung der Kapselung und Verwendung) noConflict() wo nötig). Selbst wenn sie dies nicht tun, können sie eine Lösung anbieten, wenn dieses Problem häufig auftritt.

Sonst wäre eine Lösung, die ich untersuchen würde, die Widgets selbst zu implementieren (im Idealfall prüfen Sie JavaScript und HTML in den Remote-Dateien und erstellen Sie WordPress-Shortcodes, um kompatiblere Versionen zu drucken), anstatt diese “Widget-Skripte” zu laden Bibliotheken werden geladen und wie sie es tun.

Hacks

Ich glaube, dass alle einfachen Lösungen “Hacks” sind, die Klebeband auf Klebeband legen und idealerweise auf einer Produktionsstätte vermieden werden sollten . Darunter:

  • jQuery.noConflict() manuell, indem Sie die globalen jQuery-Variablen vor den idx-Widget-Skripts speichern und anschließend wiederherstellen. Wenn die von den idx-Skripten eingefügten jQuery-Bibliotheken jedoch asynchron geladen werden, besteht die Möglichkeit, dass die Wiederherstellung zu früh erfolgt und die idx jQuery-Bibliothek die Instanz der Site weiterhin überschreiben kann:

    Vor:

      

    Nach:

      
  • Da $.browser vor 3+ Jahren veraltet war, scheint es wahrscheinlich, dass Ihre Website eine veraltete Version von Superfish verwendet. Das Aktualisieren auf einen, der nicht auf $.browser sollte den Fehler entfernen (obwohl das Problem konkurrierender jQuery-Bibliotheken bestehen bleiben würde).

  • Führen Sie das Script jQuery Migrate (erneut) aus, das für die Einstellung von jQuery.browser nach den jQuery.browser zuständig ist (obwohl das Problem der konkurrierenden Bibliotheksversionen immer noch besteht – und die IDX-Skripts, die jQuery asynchron laden können,

    Nach:

      
  • Sie sollten in der Lage sein, die richtige Version von jQuery zu verwalten, indem Sie jQuery.noConflict() anwenden, wo IDX fehlgeschlagen ist. Wenn das IDX jQuery jedoch asynchron geladen wird, funktioniert dies möglicherweise nicht.

    Nach jedem IDX -Element: