Tableaux de liste d'administration WordPress : étendre la fonction d'édition rapide

Jusqu'à présent, dans notre série d'articles sur les tableaux d'administration dans WordPress, nous avons examiné différentes façons de personnaliser la disposition des tableaux d'administration WordPress, y compris comment ajouter de nouvelles colonnes. Dans ce dernier article de la série, nous allons jeter un œil à une autre personnalisation que vous voudrez peut-être envisager… l'extension de la fonction « Modification rapide » trouvée dans les tableaux d'administration.

Commençons!

Extension du champ d'édition rapide

Pour notre exemple dans ce didacticiel, nous ajouterons un champ personnalisé qui affichera une URL qui sera décrite comme une "Source" que nous remplirons avec une URL renvoyant à des informations supplémentaires relatives à notre article. Nous verrons comment il peut être ajouté dans la zone Quick Edit de l'écran Posts Admin et comment enregistrer les mises à jour apportées à ce champ.

Première étape : ajouter le champ personnalisé

Nous avons expliqué comment créer le champ "Source" dans notre article Premiers pas avec les champs personnalisés WordPress. Par souci de brièveté, nous ne répéterons pas ces instructions ici. Vous pouvez bien sûr créer n'importe quel champ personnalisé que vous aimez.

Si vous ne savez pas comment nous ajoutons le champ personnalisé "Source" ou tout autre champ personnalisé, veuillez consulter notre article à ce sujet. Une fois que vous avez ajouté un champ personnalisé approprié, il est temps de passer à l'étape suivante.

Deuxième étape : ajouter la colonne personnalisée

Nous devons ajouter une colonne personnalisée à notre table d'administration. Nous avons expliqué comment procéder en détail dans notre article Personnalisation des tables d'administration WordPress : Premiers pas. Jetez un œil et suivez les étapes.

En fin de compte, vous devriez vous retrouver avec du code dans functions.php de votre thème actif qui ressemble à ceci :

 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; } }

Vous devriez maintenant voir la nouvelle colonne dans le tableau Posts Admin.

Ajouter la boîte d'édition rapide personnalisée

Allons à notre tableau de liste de publications et cliquez sur le lien "Modification rapide" sous l'une de nos publications.

Ce que nous verrons ici, ce sont toutes les options disponibles par défaut fournies par WordPress dans l'écran Quick Edit. Pour le moment, nous ne verrons pas notre nouveau champ "Source".

Nous ajouterons cela en utilisant le hook quick_edit_custom_box par WordPress. Cette action analyse toutes les actions par défaut en mode "Édition rapide" en s'exécutant une fois pour chaque colonne, y compris les colonnes personnalisées.

Il est structuré comme suit : do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . Les paramètres sont le $column_name qui est le nom de la colonne à éditer, le $post_type qui est le slug de type de publication et le $taxonomy pour le nom de la taxonomie si nécessaire.

Dans votre fichier functions.php , ajoutez les lignes suivantes :

 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; } }

Veuillez garder à l'esprit que nous obtenons la valeur du champ 'source' dans le code PHP en faisant écho $post->source; .

Maintenant, si vous actualisez la page et cliquez à nouveau sur "Quick Edit", vous devriez maintenant voir le champ "source" avec une valeur correcte.

Troisième étape : Enregistrer l'édition en ligne

Pour enregistrer les données saisies dans notre champ personnalisé, nous utiliserons l'action save_post qui est déclenchée lorsqu'une publication est mise à jour.

Dans notre exemple où nous travaillons sur des modifications rapides, les données de la publication sont stockées dans $_POST après l'exécution de save_post .

Que le code nécessaire pour y parvenir est le suivant et doit être inséré dans le fichier functions.php :

 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; }

Non, cela n'a pas été fait, essayons de changer la valeur d'entrée du champ en quelque chose d'autre comme "https://random.url" et appuyez sur le bouton de mise à jour en bas à droite.

Vous notez que la valeur de notre champ source est mise à jour comme prévu. Cependant, si vous cliquez à nouveau sur le bouton Édition rapide et jetez un autre coup d'œil à votre champ personnalisé (dans notre cas, "Source"), vous verrez que la valeur n'a pas changé dans la zone d'édition.

Chaque fois que vous modifiez la valeur, vous verrez toujours le changement dans la cellule de la colonne du tableau Admin, mais cette entrée ne sera pas reflétée dans le champ Modification rapide.

Pourquoi cela se produit-il donc?

N'oubliez pas que nous obtenons la valeur du champ 'source' en faisant écho $post->source; . Le contenu de l'édition rapide est rempli lorsque l'utilisateur appuie sur le bouton "Modifier", ce qui signifie qu'il est créé dynamiquement et non pré-rempli lorsque l'écran de post-administration est chargé. Nous ne pouvons pas afficher correctement nos métadonnées en les récupérant via notre code PHP car nous verrons toujours la valeur qui a été renseignée lorsque nous sommes entrés dans l'écran d'administration au lieu de la nouvelle valeur.

Au lieu de cela, nous devons collecter nos valeurs en utilisant JavaScript. Donc, avant de continuer, nous allons entrer dans notre code PHP précédent et supprimer la valeur en écho en remplaçant cette ligne…

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

…avec celui-ci:

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

Quatrième étape : Récupération des valeurs d'entrée à l'aide de JS

Premièrement, nous devrons inclure notre script JS en ajoutant ces lignes à votre fichier functions.php :

 // 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' )); }

Donc, si par exemple vous créez un fichier extend-quick-edit.js et le placez dans votre dossier de thème actif, alors dans le code ci-dessus, vous devez remplacer 'UNIQUE-SCRIPT-NAME' par quelque chose comme 'extend-quick-edit-script ' et '/PATH-TO-YOUR-JS-FILE' avec 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' )); }

Dans le array('jquery','inline-edit-post' ) nous avons ajouté jQuery puisque notre script utilise jQuery, et défini que la fonction originale inline-edit-post sera modifiée.

Dans extend-quick-edit.js , le contenu ressemblera à ceci :

 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); } } });

Décomposons un peu ce que nous avons fait ici.

Dans un premier temps, nous récupérons l'objet inlineEditPost.edit , qui est introduit dans le fichier de base WordPress /wp-admin/js/inline-edit-post.js si vous souhaitez l'approfondir. Nous avons donc maintenant une copie de l'objet dans la variable $inline_editor .

Après cela, nous modifions la fonctionnalité inlineEditPost.edit en appliquant celle existante dans $inline_editor.apply( this, arguments); et en ajoutant la fonctionnalité supplémentaire que nous voulons juste après.

Ainsi, dans les lignes suivantes de notre code JS, nous remplacerons éventuellement la valeur du champ de saisie 'Source' de la zone d'édition rapide par la valeur de la cellule de la colonne 'Source'.

Maintenant, tout devrait fonctionner comme prévu. Si vous enregistrez la valeur et rouvrez la zone d'édition rapide, l'entrée Source doit également être modifiée.

À condition qu'un champ personnalisé soit déjà enregistré avec sa colonne personnalisée, notre flux de travail ressemblerait à ceci :

Conclusion

L'ajout d'un champ personnalisé au module d'édition rapide des tables de la liste d'administration n'est pas facile. Cependant, si vous ajoutez un champ régulièrement mis à jour, cela peut évidemment faire gagner beaucoup de temps à long terme. Comme toujours, ce qui peut être réalisé dans WordPress est assez illimité. Dès sa sortie de l'emballage, il permet une personnalisation étendue, mais avec un peu de codage supplémentaire, il n'y a pas grand-chose que vous ne puissiez pas faire !