Share
En créant méta-boîtes est une partie cruciale de WordPress développement de thèmes / plugins. C'est un moyen d'ajouter un éditeur attrayant à l'écran de publication et d'éviter d'obliger les utilisateurs à utiliser des champs personnalisés. Si vous avez déjà créé un type de publication personnalisé dans WordPress, vous avez probablement voulu y ajouter une sorte de données supplémentaires. Bien sûr, vous pouvez utiliser des champs personnalisés, mais c'est moche. Il est facile de se familiariser avec les méta-boîtes personnalisées.!
Une boîte de méta (ou d'écriture) personnalisée est incroyablement simple en théorie. Il vous permet d’ajouter une donnée personnalisée à un message ou à une page dans WordPress..
Imaginez que vous travaillez sur un thème pour un client qui souhaite cataloguer sa vaste collection d’affiches de concerts. Vous commencez immédiatement à regarder la fonctionnalité de base de WordPress pour voir comment organiser le thème: Chaque poster représentera une affiche, ce qui est parfait pour ajouter une image, un titre et une description. Nous pouvons aussi utiliser le catégories et Mots clés système à l'intérieur de WordPress pour organiser les affiches. Mais que faire si nous voulions ajouter un nouveau type de métadonnées pour "l'artiste" de chaque affiche? Hmph. WordPress n'a-t-il rien pour cela dès la sortie de la boîte? ce qui nous amène aux boîtes à méta personnalisées.
Une boîte de méta (ou d'écriture) personnalisée est incroyablement simple en théorie. Il vous permet d’ajouter un élément de données personnalisé à un message ou à une page dans WordPress. Ce qui est mieux, c’est qu’il peut s’intégrer directement dans la plupart des pages par défaut de WP. Vous pouvez ainsi le placer facilement dans le Post-Editor pour une utilisation aisée par types non techniques. Comme je l'ai dit dans l'intro, vous pouvez ajouter ce même type de "métadonnées" à votre message en utilisant le Les champs personnalisés pour un post ou une page. Il n’ya rien de mal à cela, mais ce n’est pas très élégant ni convivial.
Au lieu de cela, vous voulez créer une méta-boîte personnalisée contenant des champs pour toutes vos données et enregistre tout cela dès la publication de la publication. C'est ce que nous couvrons ici. Ceci est divisé en trois grandes étapes:
Il convient de noter qu’une grande partie de ces informations peuvent également être utilisées dans l’API de types de publications personnalisées (nous y reviendrons plus tard!), Mais dans l’intérêt de garder le cap sur la journée, nous allons l’ajouter directement à l'éditeur de publication par défaut.
Pour les lecteurs avancés du public: Oui, les types de publication personnalisés sont la destination finale, mais il est important de commencer par définir certains principes fondamentaux. De plus, comme vous pouvez utiliser les boîtes à méta personnalisées dans toutes sortes d'endroits, il est bon que tout le monde le sache..
Tout dans ce tutoriel fonctionnera dans un thème functions.php fichier. Ce n'est pas le bon endroit pour cela, cependant. Si vous ajoutez des données à une publication, il est probable que vous la souhaitiez quelle que soit votre conception frontale. En tant que tel, vous devez placer ce code à un endroit qui ne dépend pas de votre conception: un fichier de plugin.
WordPress propose commodément une fonction permettant d’ajouter des méta-boîtes à un écran d’administrateur donné: add_meta_box.
La saisie de code est bien faite pour cette fonction, mais voici un bref aperçu. Son prototype:
$ id est l'attribut html ID de la boîte. Ceci est utile si vous chargez du code CSS ou Javascript personnalisé sur la page d'édition pour gérer les options. Sinon, cela n'a pas vraiment d'importance.
$ title est affiché en haut de la boîte méta.
$ callback est la fonction qui rend réellement la boîte méta. Nous allons décrire cela à l'étape 2.
$ page est l'endroit où vous souhaitez afficher la boîte à méta. Cela devrait être une chaîne avec 'post' ou 'page' ou 'some_custom_post_type'.
$ contexte est l'endroit où vous souhaitez afficher la boîte à méta. 'normal' le met en dessous de l'éditeur de publication. 'side' déplace la boîte à méta vers la barre latérale droite de l'écran d'édition (en fonction des catégories et des balises, etc.). 'advanced' met également la case dans la même colonne que l'éditeur de publication, mais plus bas.
$ priorité indique à wordpress où placer la méta-boîte dans le contexte. 'haut', 'défaut' ou 'bas' place la boîte plus près du haut, dans sa position normale ou vers le bas. Puisque toutes les méta-boîtes sont glissables, $ priorité n'est pas une affaire énorme.
finalement $ callback_args vous permet de transmettre des données à votre $ callback fonction sous la forme d'un tableau. Nous n'allons pas utiliser cela ici, mais cela pourrait être utile pour transmettre des données à la méta-boîte. Dis, si votre plugin avait plusieurs options qui ont influencé ce qui était affiché dans la méta-boîte. Vous pouvez transmettre ces valeurs d’options à travers le $ callback_args tableau.
Donc notre add_meta_box appel ressemblera à ceci:
Nous ne pouvons pas simplement insérer ceci dans notre fichier de plugin seul. Cela entraînerait un écran blanc de la mort et une erreur fatale en PHP: appel à une fonction non définie. Pourquoi? Parce que nous avons appelé add_meta_box fonctionner avant le chargement de WordPress. Il faut donc utiliser un hook WordPress, qui fait partie de l’API du plugin. Fondamentalement, les fonctions sont rattachées à une action WordPress ou à un filtre, puis sont activées lors du chargement de ce crochet. En encapsulant notre appel add_meta_box dans une fonction, puis en la reliant à la add_meta_boxes crochet d’action, nous évitons l’erreur fatale.
Notre code pour ajouter la méta-boîte à notre écran de publication ressemblerait à ceci:
Le code ci-dessus est suffisant pour ajouter la boîte de méta, mais nous devons maintenant restituer la chose et ajouter des champs. Ceci est juste un code de formulaire HTML mélangé avec un peu de PHP pour afficher les données sauvegardées. Nous n'avons pas besoin d'inclure les balises de formulaire, car WordPress le fait pour nous..
Rappelez-vous la chaîne que nous avons passée en tant que $ callback dans add_meta_box? Nous allons maintenant créer une fonction du même nom. Cette fonction s’occupe de tout l’affichage à l’intérieur de la boîte à méta.
Nous allons ajouter plusieurs champs à notre méta-boîte: une entrée de texte, un menu déroulant et une case à cocher. Commençons par la saisie de texte.
Mais qu'en est-il réellement l'affichage des données? Comme vous le verrez à l'étape 3, nous allons stocker ces données dans la table wp_postmeta à l'aide de la fonction update_post_meta. Cette fonction a deux fonctions sœurs appelées get_post_meta et get_post_custom, qui extraient des données de wp_postmeta.. get_post_meta saisit uniquement les données d’une clé, get_post_custom saisit tout cela. Parce que nous n'utilisons vraiment qu'un seul champ à ce stade, utilisons get_post_meta.
Notez également que le add_meta_box la fonction passe une variable à notre callback: $ post, qui est un objet post.
ID); $ text = isset ($ values ['my_meta_box_text'])? esc_attr ($ values ['my_meta_box_text'] [0]):?; $ selected = isset ($ values ['my_meta_box_select'])? esc_attr ($ values ['my_meta_box_select'] [0]):? $ check = isset ($ values ['my_meta_box_check'])? esc_attr ($ values ['my_meta_box_check'] [0]):? ?>
ID); $ text = isset ($ values ['my_meta_box_text'])? esc_attr ($ values ['my_meta_box_text'] [0]):?; $ selected = isset ($ values ['my_meta_box_select'])? esc_attr ($ values ['my_meta_box_select'] [0]):? $ check = isset ($ values ['my_meta_box_check'])? esc_attr ($ values ['my_meta_box_check'] [0]):? ?>
Avec l'ajout d'un deuxième champ, nous avons changé ou get_post_meta appeler pour get_post_custom, qui retourne un tableau associatif de toutes les clés et valeurs personnalisées de la publication. Nous accédons ensuite à nos champs via leurs noms. Les déclarations ternaires empêchent notre code de lancer des avertissements PHP (indices non définis et autres). Nous couvrirons la fonction esc_attr à la troisième étape.
Dans la liste déroulante, nous allons utiliser l’une des fonctions les plus utiles de WordPress: la sélection. Ceci compare la première valeur, les données que nous avons sauvegardées, à la seconde, la Attribut de valeur de. Si elles sont identiques, la fonction va faire écho selected = "sélectionné", ce qui rend cette valeur affichée dans le menu déroulant. Assez gentil, et cela nous évite d’écrire une série de déclarations si ou ternaires. Vous pouvez également utiliser le choisi() fonction avec boutons radio.
Accentsconagua
& lt? fonction php cd_meta_box_cb () // $ post est déjà définie et contient un objet: le post WordPress global $ post; $ values = get_post_custom ($ post-> ID); $ text = isset ($ values ['my_meta_box_text'])? $ values ['my_meta_box_text']: "; $ selected = isset ($ values ['my_meta_box_select'])? esc_attr ($ values ['my_meta_box_select']):"; $ check = isset ($ values ['my_meta_box_check'])? esc_attr ($ values ['my_meta_box_check']): "; // nous utiliserons ce champ nonce ultérieurement lors de la sauvegarde. wp_nonce_field ('my_meta_box_nonce', 'meta_box_nonce');?>
/>
Encore une fois, WordPress fournit la fonction pratique vérifiée (). Ça marche comme choisi() comparer la première valeur (nos données sauvegardées) à la seconde et faire écho vérifié = "vérifié" s'ils sont pareils.
wp_nonce_field ajoute deux champs cachés à notre méta-boîte. L'un d'eux est un nonce. Il s'agit de chaînes aléatoires de nombres valides par utilisateur et par blog pendant 24 heures. Les nonces sont un moyen de vérifier l'intention et s'assurent que WordPress ne fait rien sauf si la demande provient d'un endroit très spécifique. En d'autres termes, nous ne souhaitons pas mettre à jour accidentellement nos données en exécutant d'une manière ou d'une autre notre fonction de sauvegarde (voir l'étape 3) dans un emplacement autre que le hook save_post. Nous vérifions donc que le nonce est valide avant de faire quoi que ce soit..
La règle numéro un lorsque vous insérez quelque chose dans votre base de données ou sur votre site est ne pas faire confiance à l'utilisateur. Même si cet utilisateur est vous.
Pour sauvegarder nos données, nous allons utiliser un autre hook WordPress: save_post. Cela fonctionne comme notre crochet d’action ci-dessus:
le cd_meta_box_save La fonction recevra un argument, le post-id, et se chargera de nettoyer et de sauvegarder toutes nos données. le save_post le crochet se déclenche après que le bouton de mise à jour ou de sauvegarde du projet a été atteint. Nous avons donc accès à tous les $ _POST les données, qui incluent nos champs de boîte à méta, au sein de notre fonction de sauvegarde. Avant de pouvoir faire quoi que ce soit, cependant, nous devons faire trois choses: vérifier si la publication est automatiquement enregistrée, vérifiez la valeur de nonce créée précédemment et assurez-vous que l'utilisateur actuel peut réellement éditer la publication..
Maintenant, le truc amusant: sauvegarder nos données. La règle numéro un lorsque vous insérez quelque chose dans votre base de données ou sur votre site est ne pas faire confiance à l'utilisateur. Même si cet utilisateur est vous. À cette fin, avant de sauvegarder des données, nous voulons nous assurer qu'il n'y a rien de malicieux. Heureusement, WordPress fournit un tas de fonctions pour la validation des données.
Tu as déjà vu esc_attr () ci-dessus (étape 2). Celui-ci code "" et < > en entités HTML. Pourquoi utiliser ceci? Donc, les utilisateurs ne pouvaient pas taper una
