WordPress Admin-Listentabellen: Erweitern Sie die Schnellbearbeitungsfunktion

Bisher haben wir uns in unserer Artikelserie zu den Admin-Tabellen in WordPress mit verschiedenen Möglichkeiten zum Anpassen des Layouts der WordPress-Admin-Tabellen befasst, einschließlich des Hinzufügens neuer Spalten. In diesem letzten Artikel der Serie werfen wir einen Blick auf eine weitere Anpassung, die Sie vielleicht in Erwägung ziehen sollten … die Erweiterung der Funktion „Schnellbearbeitung“ in den Admin-Tabellen.

Lass uns anfangen!

Erweiterung des Schnellbearbeitungsfelds

Für unser Beispiel in diesem Tutorial fügen wir ein benutzerdefiniertes Feld hinzu, das eine URL anzeigt, die als "Quelle" beschrieben wird, die wir mit einer URL füllen, die auf einige zusätzliche Informationen zu unserem Artikel verweist. Wir werden sehen, wie es im Schnellbearbeitungsbereich des Posts-Admin-Bildschirms hinzugefügt werden kann und wie an diesem Feld vorgenommene Aktualisierungen gespeichert werden.

Schritt eins: Fügen Sie das benutzerdefinierte Feld hinzu

In unserem Artikel Erste Schritte mit benutzerdefinierten WordPress-Feldern haben wir beschrieben, wie Sie das Feld „Quelle“ erstellen. Aus Gründen der Kürze werden wir diese Anweisungen hier nicht wiederholen. Sie können natürlich jedes beliebige benutzerdefinierte Feld erstellen.

Wenn Sie nicht wissen, wie wir das benutzerdefinierte Feld „Quelle“ oder ein anderes benutzerdefiniertes Feld hinzufügen, lesen Sie bitte unseren Artikel dazu. Nachdem Sie ein geeignetes benutzerdefiniertes Feld hinzugefügt haben, können Sie mit dem nächsten Schritt fortfahren.

Schritt 2: Fügen Sie die benutzerdefinierte Spalte hinzu

Wir müssen unserer Admin-Tabelle eine benutzerdefinierte Spalte hinzufügen. Wie das geht, haben wir ausführlich in unserem Artikel Anpassen von WordPress-Admin-Tabellen: Erste Schritte erklärt. Schauen Sie sich um und folgen Sie den Schritten.

Letztendlich sollten Sie am Ende einen Code in der functions.php Ihres aktiven Designs haben, der so aussieht:

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['source'] = 'Source'; return $columns; } add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'source': echo get_post_field('source', $post_id); break; } }

Jetzt sollten Sie die neue Spalte in der Posts Admin-Tabelle sehen.

Fügen Sie das benutzerdefinierte Schnellbearbeitungsfeld hinzu

Gehen wir zu unserer Beitragslistentabelle und klicken Sie unter einem unserer Beiträge auf den Link „Schnellbearbeitung“.

Was wir hier sehen werden, sind alle standardmäßig verfügbaren Optionen, die WordPress im Schnellbearbeitungsbildschirm bereitstellt. Im Moment sehen wir unser neues Feld „Quelle“ nicht.

Wir fügen dies hinzu, indem wir den quick_edit_custom_box Hook verwenden, den WordPress bereitstellt. Diese Aktion analysiert alle Standardaktionen im Modus „Schnellbearbeitung“, indem sie einmal für jede Spalte ausgeführt wird, einschließlich benutzerdefinierter Spalten.

Es ist wie folgt aufgebaut: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . Die Parameter sind der $column_name , der der Name der zu bearbeitenden Spalte ist, der $post_type , der der Beitragstyp-Slug ist, und die $taxonomy für den Taxonomienamen, falls erforderlich.

Fügen Sie in Ihrer Datei functions.php die folgenden Zeilen hinzu:

 add_action( 'quick_edit_custom_box', 'source_custom_edit_box', 10, 2 ); function source_custom_edit_box( $column_name, $post_type ) { global $post; switch ( $post_type ) { case 'post': if( $column_name === 'source' ): ?> <fieldset class="inline-edit-col-right"> <div class="inline-edit-col"> <label> <span class="title">Source</span> <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span> </label> </div> </fieldset> <?php endif; break; default: break; } }

Bitte denken Sie daran, dass wir den Feldwert 'source' im PHP-Code erhalten, indem wir $post->source; .

Wenn Sie jetzt die Seite aktualisieren und erneut auf „Schnellbearbeitung“ klicken, sollten Sie jetzt das Feld „Quelle“ mit einem korrekten Wert sehen.

Schritt drei: Speichern Sie die Inline-Bearbeitung

Um die Dateneingabe in unser benutzerdefiniertes Feld zu speichern, verwenden wir die save_post Aktion, die ausgelöst wird, wenn ein Beitrag aktualisiert wird.

In unserem Beispiel, in dem wir an Schnellbearbeitungen arbeiten, werden die Daten für den Post in $_POST gespeichert, nachdem save_post ausgeführt wurde.

Dass der dazu erforderliche Code wie folgt lautet und in die Datei functions.php eingefügt werden sollte:

 add_action( 'save_post', 'update_source_custom_edit_box' ); function update_source_custom_edit_box() { if( isset( $_POST ) && isset( $_POST['source'] ) ) { update_post_meta($_POST['post_ID'], 'source', $_POST['source']); } return; }

Nein, dies wurde getan. Versuchen wir, den Eingabewert des Felds in etwas anderes wie „https://random.url“ zu ändern, und klicken Sie auf die Schaltfläche „Aktualisieren“ unten rechts.

Sie stellen fest, dass der Wert in unserem Quellfeld wie erwartet aktualisiert wird. Wenn Sie jedoch erneut auf die Schaltfläche "Schnellbearbeitung" klicken und sich Ihr benutzerdefiniertes Feld (in unserem Fall "Quelle") erneut ansehen, werden Sie feststellen, dass sich der Wert im Bearbeitungsfeld nicht geändert hat.

So oft Sie den Wert ändern, sehen Sie die Änderung immer in der Spalte der Admin-Tabelle, aber diese Eingabe wird nicht im Schnellbearbeitungsfeld widergespiegelt.

Also, warum passiert das?

Denken Sie daran, dass wir den Feldwert 'source' erhalten, indem wir $post->source; . Der Schnellbearbeitungsinhalt wird ausgefüllt, wenn der Benutzer auf die Schaltfläche „Bearbeiten“ klickt, was bedeutet, dass er dynamisch erstellt und nicht vorab ausgefüllt wird, wenn der Post-Admin-Bildschirm geladen wird. Wir können unsere Metadaten nicht korrekt anzeigen, indem wir sie über unseren PHP-Code abrufen, da wir immer den Wert sehen, der ausgefüllt wurde, als wir den Admin-Bildschirm aufgerufen haben, anstelle des neuen Werts.

Stattdessen müssen wir unsere Werte mithilfe von JavaScript erfassen. Bevor wir also fortfahren, gehen wir zu unserem vorherigen PHP-Code und entfernen den Echowert, indem wir diese Zeile ersetzen …

 <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span>

…mit diesem:

 <span class="input-text-wrap"><input type="text" name="source" value=""></span>

Schritt 4: Abrufen von Eingabewerten mit JS

Zuerst müssen wir unser JS-Skript einbinden, indem wir diese Zeilen zu Ihrer Datei functions.php hinzufügen:

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('UNIQUE-SCRIPT-NAME', '/PATH-TO-YOUR-JS-FILE', array('jquery','inline-edit-post' )); }

Wenn Sie also beispielsweise eine Datei „ extend-quick-edit.js erstellen und in Ihrem aktiven Themenordner ablegen, sollten Sie im obigen Code „UNIQUE-SCRIPT-NAME“ durch etwas wie „extend-quick-edit-script“ ersetzen ' und '/PATH-TO-YOUR-JS-FILE' mit get_template_directory_uri() . '/extend-quick-edit.js' get_template_directory_uri() . '/extend-quick-edit.js'

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('extend-quick-edit-script', get_template_directory_uri() . '/extend-quick-edit.js', array('jquery','inline-edit-post' )); }

Im array('jquery','inline-edit-post' ) haben wir jQuery hinzugefügt, da unser Skript jQuery verwendet, und definiert, dass die ursprüngliche inline-edit-post Funktion geändert wird.

In der extend-quick-edit.js der Inhalt so aus:

 jQuery(document).ready(function($){ var $inline_editor = inlineEditPost.edit; inlineEditPost.edit = function(id){ $inline_editor.apply( this, arguments); var post_id = 0; if( typeof(id) == 'object'){ post_id = parseInt(this.getId(id)); } if(post_id != 0){ $post_modified_col_value = $('#post-' + post_id).find('.source').text(); $('#edit-' + post_id + ' input[name=source]').val($post_modified_col_value); } } });

Lassen Sie uns ein wenig aufschlüsseln, was wir hier gemacht haben.

Zuerst greifen wir das inlineEditPost.edit Objekt, das in der WordPress-Kerndatei /wp-admin/js/inline-edit-post.js eingeführt wird, wenn Sie sich näher damit befassen möchten. Wir haben jetzt also eine Kopie des Objekts in der Variablen $inline_editor .

Danach ändern wir die inlineEditPost.edit Funktionalität, indem wir die vorhandene in $inline_editor.apply( this, arguments); und die zusätzliche Funktionalität hinzufügen, die wir gleich danach wollen.

In den nächsten Zeilen unseres JS-Codes werden wir also schließlich den Wert des Eingabefelds „Quelle“ des Schnellbearbeitungsbereichs durch den Wert der Spalte „Quelle“ ersetzen.

Jetzt sollte alles wie erwartet funktionieren. Wenn Sie den Wert speichern und den Schnellbearbeitungsbereich erneut öffnen, sollte die Eingabe Quelle ebenfalls geändert werden.

Vorausgesetzt, dass ein benutzerdefiniertes Feld bereits zusammen mit seiner benutzerdefinierten Spalte registriert ist, würde unser Workflow wie folgt aussehen:

Fazit

Das Hinzufügen eines benutzerdefinierten Felds zum Schnellbearbeitungsmodul der Admin-Listentabellen ist nicht einfach. Wenn Sie jedoch ein Feld hinzufügen, das regelmäßig aktualisiert wird, kann dies auf lange Sicht natürlich viel Zeit sparen. Wie immer ist das, was in WordPress erreicht werden kann, ziemlich grenzenlos. Sofort einsatzbereit ermöglicht es umfangreiche Anpassungen, aber mit etwas zusätzlicher Codierung gibt es nicht viel, was Sie nicht tun können!