Rhyzz Repeatable-Felder Javascript in PHP und WordPress

Es fällt mir schwer herauszufinden, warum meine wiederholbaren Felder Javascript nicht funktioniert. Ich benutze das folgende Plugin: Rhyzz (wiederholbare Felder): http://www.rhyzz.com/repeatable-fields.html . Ich kratzte die Website und ich sehe, er lief das Skript in HTML und lief auch sein Javascript alle auf der gleichen Seite. Meine Website ist viel größer. Ich benutze WordPress und habe Folgendes getan, um das Skript in functions.php aufzurufen.

  wp_enqueue_script( 'jquery', 'https://code.jquery.com/jquery-1.11.2.min.js', array(), '20120206', true ); wp_enqueue_script( 'jquery-ui', 'https://code.jquery.com/ui/1.11.4/jquery-ui.min.js', array(), '20120206', true ); wp_enqueue_script( 'jquery-repeatable', get_template_directory_uri() . '/js/repeatable.js', array( 'jquery', 'jquery-ui' ), '20120206', true ); 

Ich habe auch noch etwa 10 Skripte. Die Dateien befinden sich alle in den richtigen Verzeichnissen. Ich habe dann eine bestimmte Seite auf meiner Seite (PHP), die die wiederholbaren Felder implementiert, aber keine der Schaltflächen funktioniert. Ich habe nirgendwo das Folgende und ich weiß nicht, ob es notwendig ist, aber auf Rhyzz’s Seite bringt er es in sein HTML:

 jQuery(function() { jQuery('.repeat').each(function() { jQuery(this).repeatable_fields(); }); }); 

Ich bin sehr frustriert und weiß nicht, was ich tun soll. Ich weiß auch nicht, ob ich das Skript richtig in Enqueue überführe, wie wenn ich jquery und jquery-ui in das Array-Feld eingeben würde. Wenn mir jemand dabei helfen kann, tu es bitte!

Hinweis: Dies ist Rhyzz’s GitHub mit einem Tutorial zur Implementierung in HTML, https://github.com/Rhyzz/repeatable-fields .

Solutions Collecting From Web of "Rhyzz Repeatable-Felder Javascript in PHP und WordPress"

Ja, das ist machbar. Hier finden Sie eine getestete Lösung, die Ihnen beim Start hilft.

Die Skripte werden in die Warteschlange gestellt

WordPress enthält bereits jQuery und jQuery UI, so dass es nicht notwendig ist (oder in der Regel empfohlen), sie von einer externen Quelle einzubeziehen. Manchmal arbeiten JavaScript-Bibliotheken mit einer deklarativen Syntax, was bedeutet, dass sie mit bestimmten IDs, classn oder Datenattributen im HTML initialisiert werden können. In anderen Fällen (und das ist meistens der Fall) müssen Sie zusätzliches JavaScript einfügen, um die JavaScript-Bibliothek zu initialisieren, die Sie verwenden möchten. Dies scheint bei diesem wiederholbaren Feldskript der Fall zu sein.

Hier ist der Code, der die Bibliothek für wiederholbare Felder und unser Initialisierungsskript in eine Warteschlange stellt. Stellen Sie sicher, dass die Pfade für Ihr spezielles Setup korrekt sind.

 add_action( 'wp_enqueue_scripts', 'wpse_repeatable_scripts' ); function wpse_repeatable_scripts() { wp_enqueue_script( 'jquery-repeatable', get_template_directory_uri() . '/js/repeatable-fields/repeatable-fields.js', array( 'jquery', 'jquery-ui-core' ), '20120206', true ); wp_enqueue_script( 'jquery-repeatable-init', get_template_directory_uri() . '/js/repeatable-init.js', array( 'jquery-repeatable' ), '20120206', true ); } 

wiederholbare-init.js

Hier ist der Inhalt von repeatable-init.js , der die Bibliothek für wiederholbare Felder initialisiert, sodass sie mit der class .repeat an Markup .repeat .

 jQuery( document ).ready( function( $ ) { $( ".repeat" ).each( function() { $( this ).repeatable_fields(); }); }); 

Schließlich ist hier der HTML-Code (über die Entwickler-Dokumentation):

 
Add
Move An Input Field Remove

Hinzufügen eines getesteten Code-Beispiels zu der bereits guten Antwort von @Dave Romsey

Es ist möglich, wiederholbare Rhyzz-Felder für Meta-Boxen zu verwenden. Tatsächlich habe ich vor kurzem ein kleines Testplugin dafür gebaut! Ich wollte ein einfaches wiederholbares WYSIWYG-Feld bekommen. Da dieser Feldtyp einige Einschränkungen aufweist, wurde er durch ein normales Textarea-Element ersetzt.

Der folgende Code wurde also nicht live getestet und sollte nicht so verwendet werden wie er ist, sondern sollte funktionieren.

Zuerst müssen wir JQuery sortierbar, Rhyzz wiederholbare Felder und unsere eigene JS-Datei in Init einreihen.

 /** * Enqueue our styles and scripts */ function prfx_enqueue_scripts() { // enqueue JQuery sortable wp_enqueue_script( 'jquery-ui-sortable', array( 'jquery' ) ); // enqueue Rhyzz Repeatable-fields wp_enqueue_script( 'prfx-repeatable-fields-js', plugins_url('/inc/repeatable-fields/repeatable-fields.js', __FILE__), array( 'jquery' ) ); // enqueue init JS wp_enqueue_script( 'prfx-init-js', plugins_url('/js/scripts.js', __FILE__) ); } add_action( 'admin_enqueue_scripts', 'prfx_enqueue_scripts', 99 ); 

Jetzt erstellen wir eine neue Metabox, für ein Beispiel nur für Seitenpostentypen.

 /** * Create custom metabox */ function prfx_add_meta_boxes() { add_meta_box( 'prfx_repeatable-fields', 'prfx_Repeatable Fields', 'prfx_callback', // see callback function below 'page', // post-type 'normal', 'default' ); } add_action('admin_init', 'prfx_add_meta_boxes', 1); 

Jetzt können wir unsere callbackfunktion erstellen. In dieser function sehen Sie die Tabelle HTML der wiederholbaren Rhyzz-Feldvorlagen.

Ich konnte den Platzhalter {{row-count-placeholder}} , sodass ich am Ende PHP verwendete, um die Zeilennummer zu erhöhen.

 /** * Callback function of our fields */ function prfx_callback() { global $post; // check our fields $repeatable_fields = get_post_meta($post->ID, 'an-input-field', true); // create a nonce for the field wp_nonce_field( 'prfx_repeatable_meta_box_nonce', 'prfx_repeatable_meta_box_nonce' ); ?> 
< ?php if ($repeatable_fields) { $i = 0; foreach ($repeatable_fields as $field) { ++$i; ?> < ?php } } ?>
Add Editor


Move Remove


Move Remove

< ?php }

Und nicht zuletzt brauchen wir eine Speicherfunktion, um unsere wiederholbaren Felder zu speichern.

 /** * Save our metafields */ function prfx_repeatable_meta_box_save($post_id) { if ( ! isset( $_POST['prfx_repeatable_meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['prfx_repeatable_meta_box_nonce'], 'prfx_repeatable_meta_box_nonce' ) ) return; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; if (!current_user_can('edit_post', $post_id)) return; if ( isset( $_POST['an-input-field'] ) ) { $contents = $_POST['an-input-field']; update_post_meta( $post_id, 'an-input-field', $contents ); } } add_action('save_post', 'prfx_repeatable_meta_box_save'); 

Dies ist der PHP-Code, der benötigt wird, jetzt müssen wir nur noch unsere scripts.js Datei füllen:

 jQuery(document).ready(function($){ $('.repeat').each(function() { $(this).repeatable_fields({ wrapper: '.wrapper', container: '.container', row: '.row', add: '.add', remove: '.remove', move: '.move', template: '.template', is_sortable: true, }); }); }); 

In diesem Beispiel wird ein normales Textarea-Element verwendet.

Nur ein Hinweis, wenn Sie diese Technik mit einem WYSIWYG / Editor-Feld verwenden möchten: Dies ist komplizierter, da TinyMCE einen Iframe verwendet. Zum Beispiel müssen Sie JQuery sortierbar anhören, um den Editor beim sortierbaren Start zu entfernen, und den Editor erneut an sortierbaren Stopp hinzufügen. Und auch weitere Probleme folgen (ich war schon mal dort).