Comment ajouter des champs personnalisés aux pièces jointes

Vous devez être familiarisé avec les champs personnalisés dans WordPress. Nous les utilisons sur un message ou une page pour ajouter des données supplémentaires. Dans WordPress, les pièces jointes sont également enregistrées en tant que publications. Par conséquent, des champs personnalisés sont également disponibles..

Aujourd'hui, nous verrons comment ajouter des champs personnalisés pour que les pièces jointes puissent contenir davantage d'informations que les données par défaut..


Ce que nous ferons

Tout d’abord, nous allons créer un plugin pour gérer les champs personnalisés des pièces jointes. Vous obtiendrez un ensemble d’options, faites-les cuire afin qu’ils fassent partie du formulaire lorsque nous modifions une pièce jointe, et les sauvegardons dans la base de données..

Pour cela, nous allons utiliser deux hooks WordPress:

  • attachment_fields_to_edit gérer le formulaire de modification
  • attachment_fields_to_save enregistrer les champs personnalisés

1. Créer le plugin

Je vais passer rapidement sur cette partie car ce n'est pas l'objectif principal de ce tutoriel..

Créez un nouveau dossier dans le répertoire plugins (wp-content / plugins / media-fields / par exemple) et mettre un fichier (nommé plugin.php) à l'intérieur. Mettons également un fichier appelé custom_media_fields.php qui tiendra nos options.

C'est ce que votre plugin.php Le fichier doit ressembler au début:

 / * Nom du plug-in: Wptuts + Custom Media Fields URI du plug-in: Description: Créer des pièces jointes des champs personnalisés Version: 0.1 Auteur: Guillaume Voisin URI de l'auteur: http://wp.tutsplus.com/author/guillaumevoisin Licence: GPL2 * / require_once (plugin_dir_path ( __FILE__). '/Custom_media_fields.php'); Classe Wptuts_Custom_Media_Fields private $ media_fields = array (); function __construct ($ fields)  public function applyFilter ($ form_fields, $ post = null)  function saveFields ($ post, $ attachment)  $ cmf = new Wptuts_Custom_Media_Fields ($ attchments_options);

C'est la base que nous allons peupler dans les sections suivantes. Pour l'instant, définissons notre ensemble d'options.


2. Définir nos options

Dans l'autre fichier, ajoutons quelques options pour améliorer le formulaire de modification de pièce jointe. Nous examinerons, pour ce tutoriel, des options pour améliorer les images. Par exemple, nous allons ajouter les champs copyright, description de l'auteur, filigrane, classement et disposition de l'image..

 $ themename = "vingt-douze"; $ attchments_options = array ('image_copyright' => array ('label' => __ ('Copyright de l'image', $ nom de fichier), 'input' => 'text', 'help' => __ ('Si votre image est protégée par droits d'auteur ', $ nom_thème),' application '=>' image ',' exclusions '=> array (' audio ',' video '),' required '=> true,' error_text '=> __ (' champ Copyright required ', $ themename)),' image_author_desc '=> array (' label '=> __ (' Description de l'auteur de l'image ', $ themename),' input '=>' textarea ',' application '=>' image ', 'exclusions' => array ('audio', 'video'),), 'image_watermark' => array ('label' => __ ('Image watermark', $ themename), 'input' => 'checkbox', 'application' => 'image', 'exclusions' => array ('audio', 'video')), 'image_stars' => array ('label' => __ ('Image rating', $ themename), ' input '=>' radio ',' options '=> array (' 0 '=> 0,' 1 '=> 1,' 2 '=> 2,' 3 '=> 3,' 4 '=> 4) , 'application' => 'image', 'exclusions' => array ('audio', 'video')), 'image_disposition' => array ('label' => __ ('Image di sposition ', $ themename),' input '=>' select ',' options '=> array (' portrait '=> __ (' portrtait ', $ themename),' landscape '=> __ (' landscape ', $ nom de fichier)), 'application' => 'image', 'exclusions' => array ('audio', 'video'))));

C'est fondamentalement un tableau associatif qui contient ces paramètres:

  • étiquette - le nom du champ qui sera affiché
  • contribution - le type d'entrée (par exemple, texte, sélection, radio,…)
  • aide - informations pour aider l'utilisateur à remplir le champ
  • application - quel type de mime attchment à appliquer
  • les exclusions - quel type de mime attchment à exclure
  • Champs obligatoires - Le champ est-il obligatoire? (défaut faux)
  • error_text - champ facultatif décrivant l'erreur (si nécessaire, défini sur vrai)
  • options - champ facultatif pour radio et types sélectionnés
  • show_in_modal - afficher le champ en mode modal ou non (par défaut vrai)
  • show_in_edit - afficher ou non le champ en mode édition classique (par défaut vrai)
  • extra_rows - des lignes supplémentaires pour afficher le contenu (dans le même "tr"tag"
  • tr - lignes supplémentaires ("tr"tag"

Les options en surbrillance représentent les options que nous allons traiter manuellement, tandis que les autres sont celles par défaut que WordPress traitera automatiquement..

Comme nous avons affaire à des images, nous définissons la application paramètre à "image". Il s’appliquera à toutes sortes d’images dont le type mime commence par"image" tel que image / jpeg, image / png etc. Vous pouvez exclure le gif type mime en le mettant dans le champ exclusions par exemple.

Maintenant que nos options sont définies, creusons dans les crochets.


3. Les crochets

Comme mentionné précédemment, nous allons traiter deux crochets.

Nous lions nos deux fonctions à ces hooks dans la méthode constructeur.

 function __construct ($ fields) $ this-> media_fields = $ fields; add_filter ('attachment_fields_to_edit', tableau ($ this, 'applyFilter'), 11, 2); add_filter ('attachment_fields_to_save', array ($ this, 'saveFields'), 11, 2); 

Voyons maintenant ces crochets en détail.

attachment_fields_to_edit

Il a deux paramètres:

  1. $ form_fields - Un tableau de champs contenus dans le formulaire d'édition de pièce jointe
  2. $ post - Objet qui représente l'attachement lui-même

Nous allons utiliser le $ form_fields paramètre pour fusionner nos propres champs et vérifier chacun d'eux par rapport aux exigences en matière de pièces jointes (type mime par exemple).

 fonction publique applyFilter ($ form_fields, $ post = null) // Si notre tableau de champs n'est pas vide if (! empty ($ this-> media_fields)) Nous parcourons notre ensemble d'options poureach ($ this-> media_fields as $ field => $ values) // Si le champ correspond au type mime de pièce jointe actuel // et ne fait pas partie des exclusions if (preg_match ("/". $ values ​​['application']. 4. " post-> post_mime_type) &&! in_array ($ post-> post_mime_type, $ values ​​['exclusions'))) // Nous obtenons la méta valeur du champ déjà enregistré $ meta = get_post_meta ($ post-> ID, '_'. $ field, true); // Définit le type d'entrée sur 'texte' par défaut $ values ​​['input'] = 'text'; // Et le mettre dans le champ avant de le construire $ values ​​['value'] = $ meta; // Nous ajoutons notre champ dans le tableau $ form_fields $ form_fields [$ field] = $ values;  // Nous renvoyons le tableau $ form_fields complété return $ form_fields; 

À cette étape, votre formulaire de modification de pièce jointe devrait être amélioré avec les nouveaux champs que nous avons ajoutés. Mais ils ressembleront à des entrées de texte. Nous devons maintenant considérer différents types d’entrées (radio, case à cocher, etc.).

Modifions donc notre fonction pour gérer cela. Remplace le $ values ​​['input'] = 'text'; avec le code suivant:

 switch ($ values ​​['input']) défaut: case 'text': $ values ​​['input'] = 'text'; Pause; case 'textarea': $ values ​​['input'] = 'textarea'; Pause; case 'select': // Le type sélectionné n'existe pas, nous allons donc créer le code HTML manuellement // Pour cela, nous devons définir le type d'entrée sur 'html' $ values ​​['input'] = 'html'; // Crée l'élément select avec le bon nom (correspond à celui créé par wordpress pour les champs personnalisés) $ html = ''; // Définit le contenu html $ values ​​['html'] = $ html; Pause; case 'checkbox': // Le type de case à cocher n'existe pas non plus $ values ​​['input'] = 'html'; // Activez ou non la case à cocher si ($ meta == 'on') $ stratifié = 'vérifié = "coché"'; else $ vérifié = "; $ html = ''; $ values ​​['html'] = $ html; break; case 'radio': // le type de radio n'existe pas non plus $ values ​​['input'] = 'html'; $ html =" ; if (! empty ($ values ​​['options']))) $ i = 0; foreach ($ values ​​['options'] en tant que $ k => $ v) if ($ méta == $ k) $ vérifié = 'vérifié = "vérifié"'; else $ vérifié = "; $ html. = ' 
'; $ i ++; $ values ​​['html'] = $ html; Pause;

Nous pouvons maintenant construire des éléments HTML communs. Voyons notre formulaire de modification de pièce jointe. Cela devrait ressembler à ceci:


Formulaire de modification de pièce jointe avec des champs personnalisés

Les champs personnalisés, selon que vous définissez leurs options modales sur true ou non, apparaissent également dans le formulaire modal multimédia lorsque vous modifiez un message..

Champs personnalisés en modal

Maintenant que nos champs sont affichés dans notre formulaire de modification des pièces jointes, nous devons les enregistrer dans la base de données. Pour cela, nous allons utiliser le deuxième crochet.

attachment_fields_to_save

Ce hook a aussi deux paramètres:

  1. $ post - tableau qui représente l'entité d'attachement
  2. pièce jointe - contient tous les champs attachés à la pièce jointe

Maintenant, remplissons la fonction saveFields nous sommes partis dans la section précédente.

 function saveFields ($ post, $ attachment) // Si notre tableau de champs n'est pas vide if (! empty ($ this-> media_fields)) Navigateur ces champs poureach ($ this-> media_fields as $ field => $ valeurs) // Si ce champ a été soumis (est présent dans la variable $ pièce jointe) if (isset ($ pièce jointe [$ champ])) // Si le champ soumis est vide // Nous ajoutons des erreurs à l'objet de publication avec le paramètre "error_text" que nous avons défini dans les options if (strlen (trim ($ attachment [$ field]))) == 0) $ post ['errors'] [$ field] ['errors'] [] = __ ($ valeurs ['error_text']); // Sinon, nous mettons à jour le champ personnalisé sinon update_post_meta ($ post ['ID'], '_'. Champ $, $ pièce jointe [$ champ]);  // Sinon, nous le supprimons s'il existait déjà autre delete_post_meta ($ post ['ID'], champ $);  return $ post; 

Ok, maintenant nos champs personnalisés sont sauvegardés dans la base de données et seront disponibles pour le front-end.

  • S'il vous plaît soyez prudent lorsque vous manipulez le paramètre post dans les deux crochets. C'est un objet dans le premier et un tableau dans le second.
  • Pointe: la update_post_meta créera la méta si elle n'existe pas.
  • Pointe: Nous préfixons la clé de champ personnalisée avec un trait de soulignement "_"afin qu'ils ne soient pas listés dans les métaboxes des champs personnalisés sur les pages de post-édition.

Considérations d'erreur

Depuis la version 3.5, il semble que les erreurs n'apparaissent toujours pas sur les formulaires de modification des pièces jointes. J'ai essayé d'enquêter sur le code principal, et malgré le fait qu'il aurait dû être corrigé (http://core.trac.wordpress.org/ticket/13810), il semble que ce ne soit pas le cas..

Pour le processus de sauvegarde ajax, il est certain que cela n’a pas encore été fait comme indiqué dans ajax-actions.php fichier:

 $ errors = $ post ['errors']; // @todo me renvoie et affiche-moi!

Donc, pour le moment, les erreurs ne fonctionneront pas correctement, mais le code est conçu pour que, une fois ces bogues corrigés, tout fonctionne..


L'extrémité avant

Pour utiliser ces champs personnalisés dans vos modèles, il vous suffit de récupérer les métas de publication de la même manière que pour les publications classiques. N'oubliez pas d'ajouter le "_"préfixe aux clés des champs personnalisés.

Par exemple, vous pourriez faire comme si:

 écho "
    "; écho "
  • droits d'auteur: ". get_post_meta (get_the_ID (), '_image_copyright', true)."
  • "; écho "
  • Évaluation: ". get_post_meta (get_the_ID (), '_image_stars', true)."
  • "; écho "
  • Description de l'auteur: ". get_post_meta (get_the_ID (), '_image_author_desc', true)."
  • "; écho "
  • Disposition de l'image: ". get_post_meta (get_the_ID (), '_image_disposition', true)."
  • "; écho "
  • Filigrane? ". (get_post_meta (get_the_ID (), '_image_watermark', true) ==" sur "?" oui ":" non ")."
  • "; écho "
";
Afficher les champs personnalisés sur le front-end

Aller plus loin

Plusieurs améliorations sont possibles en fonction de vos besoins:

  • Vous pourriez avoir vos paramètres dans la base de données afin qu'il devienne plus flexible d'ajouter, de les modifier et de les supprimer
  • Vous pouvez définir une valeur par défaut pour toutes les nouvelles pièces jointes lorsqu'une valeur n'est pas définie.
  • Vous devez définir un style pour le formulaire modal afin qu'il affiche les champs personnalisés correctement

Conclusion

N'hésitez pas à nous faire part de vos idées sur la façon d'améliorer ce plugin et sur ce que vous attendriez d'une telle fonctionnalité..