Hinzufügen von Javascript-Aktionen zu Wörtern im Post-Inhalt

Ich möchte meinen Blog einige JavaScript-Code ausführen, wenn bestimmte bestimmte Wörter angeklickt werden.

Ein Ansatz wäre, “onClick” -Handler in HTML-Elemente in den Posts einzubeziehen und jegliche Filterung zu deaktivieren, die sie entfernen würde, aber das scheint ziemlich gefährlich zu sein.

Ein anderer Ansatz wäre, eine Verbindung zu erstellen, deren Adresse mit einem “#” beginnt und eine Skriptüberwachung für ein sich änderndes Adressensuffix hat, aber das scheint ziemlich heikel zu sein.

Ein dritter Ansatz wäre ein Skript, das die DOM-Struktur nach einem bestimmten Tag durchsucht und Ereignisse an alle Elemente bindet, die es enthalten. Das könnte funktionieren, obwohl es die Frage offen lässt, wie sichergestellt werden kann, dass das Wechseln des Editors zwischen HTML- und WYSIWYG-Modus keine wesentlichen Informationen aus den Anmerkungen verschlingt.

Ich vermute, der richtige Ansatz besteht darin, Shortcodes zu verwenden, aber ich beginne gerade mit WordPress und obwohl ich Javascript kann, kenne ich PHP nicht.

Ich bezweifle, dass ich die erste Person bin, die versucht hat, Aktionen an bestimmte Wörter in einem Post zu binden, also will ich das Rad nicht unnötig neu erfinden.

Wenn ich viele Wörter haben möchte, führe die gleiche Methode aus, aber weise jedem einen anderen String-Parameter zu (zB möchte ich den Parameter “bird” an “robin” und “fish” an “guppy” hängen, so dass Klicken Sie auf “Robin” würde ClickedWord("bird") und klicken Sie auf “Guppy” würde ClickedWord("fish") laufen ClickedWord("fish") was wäre der beste Ansatz, um das zu erleichtern?

Solutions Collecting From Web of "Hinzufügen von Javascript-Aktionen zu Wörtern im Post-Inhalt"

Nehmen wir an, Sie haben ein Javascript wie folgt:

 function clickedTag( tag ) { var d = new Date(); console.log( 'A word with tag ' + tag + 'has been cliked at ' + d.toDateString() ); } 

Und in deinem Beitrag hast du diesen Satz:

Der schnelle braune Fuchs springt über den faulen Hund

Und Sie möchten, dass das Javascript clickedTag( "pet" ); wird ausgeführt, wenn Benutzer auf das Wort “Hund” klicken.

Wahrscheinlich ist der richtige Ansatz auf Javascript Seite schreiben Sie eine einzelne function mit Hilfe von Datenattribute, etwas wie:

Der schnelle braune Fuchs springt über den faulen Hund

und das Javascript:

 jQuery(document).on( 'click', 'span.click-tag', function(e) { e.preventDefault(); var tag = jQuery(this).data('tag'); if ( typeof tag === 'string' && tag !== '' ) { return clickedTag( jQuery(this).data('tag') ); } }); 

Also, mit einer einzigen kleinen function können Sie Ihre Javascript-function mit jedem Wort ausführen, und das Wort selbst ist nicht mit dem Parameter verbunden, der an die function übergeben wird.

So weit, ist es gut. Allerdings hat dies nichts mit WordPress zu tun, und ja, das Hinzufügen dieses Tags zu Post-Inhalten bringt einige Probleme mit sich, die Sie in OP erklärt haben und das Hinzufügen des Span-Codes für jedes Wort, das Sie brauchen, kann schwierig sein, wenn Sie viele Posts haben Viele Wörter, die “getaggt” werden müssen.

Aber, ja, Shortcodes können eine Lösung sein.

Nehmen Sie einfach eines der Beispiele in den add_shortcode Dokumenten in Codex und ändern Sie es ein wenig:

 function my_first_shortcode( $atts, $word='' ) { $atts = shortcode_atts( array ( 'tag' => '' ), $atts ); $format = '' . esc_html( $word ) . ''; return sprintf( $format, esc_attr( $atts['tag'] ) ); } add_shortcode( 'clicktag', 'my_first_shortcode' ); 

Sobald Sie diese wenigen PHP-Zeilen in Ihrer functions.php oder in einer Plugin-Datei haben, können Sie den Shortcode ‘clicktag’ in Ihren Posts verwenden, zB können Sie schreiben

Der schnelle braune Fuchs springt über den faulen [clicktag tag = “Haustier”] Hund [/ clicktag]

und der Bereich mit dem Datenattribut wird das Wort “Hund” in Ihrem Post umbrechen.

Kombinieren Sie das mit der oben genannten jQuery-function und Sie sind fertig.

Beachten Sie, dass das von mir gepostete Javascript und auch Ihr Javascript-Code (die function clickedTag in diesem Beispiel) in die Seiten mit wp_enqueue_script . Ein praktischer Weg besteht darin, wp_enqueue_script innerhalb des Shortcode-Callbacks ( my_first_shortcode PHP-function, im obigen Beispiel) my_first_shortcode .

Schließlich möchten Sie wahrscheinlich die class “click-tag” verwenden, um den Bereich zu formatieren und den Benutzern zu verdeutlichen, dass sie anklickbar sind.

In diesem Gist finden Sie ein funktionierendes, installationsbereites Plugin (laden Sie einfach die 2 Dateien herunter und legen Sie sie in einen Ordner innerhalb Ihres Plugin-Ordners), der eine etwas modifizierte Codeversion enthält, die ich hier gepostet habe.

Das einzige, was noch zu tun ist, ist den echten JavaScript-Code für die clickedTag function zu schreiben, aber das wird hier nicht behandelt.