Comment créer une méta-boîte WordPress personnalisée

Qu'est-ce qu'une méta-boîte WordPress personnalisée ?

Les méta-boîtes personnalisées permettent d'ajouter des informations supplémentaires aux publications, aux pages et aux types de publication personnalisés, à l'exception des méta-boîtes standard qui sont automatiquement disponibles pour une utilisation « prête à l'emploi » dans WordPress, qui sont incluses dans le noyau de WordPress.

Que vous en soyez conscient ou non, vous utilisez les méta-boîtes depuis un certain temps déjà. Des éléments tels que les widgets de tableau de bord, l'éditeur, les champs personnalisés, l'image en vedette, les catégories et les balises sont des exemples de boîtes méta.

Comment créer une méta-boîte WordPress personnalisée

Que se passe-t-il lorsque vous devez créer une méta-boîte supplémentaire, peut-être quelque chose d'un peu plus personnalisé pour votre projet ? Il existe des plugins existants qui aident à créer des méta-boîtes personnalisées, qui peuvent être d'excellentes options. Même si vous décidez que c'est la voie que vous allez emprunter, il est toujours important de comprendre les concepts de base de ce qui se passe sous le capot des méta-boîtes personnalisées.

Utilisez CSS Sprites pour rendre votre logo responsive

Vous vous souvenez des sprites CSS ? Il s'agit d'un groupe de graphiques différents combinés dans un seul fichier, et nous les utiliserons pour créer un logo réactif. C'est une technique utilisée pour optimiser les performances du navigateur car...

Nous passerons en revue les concepts à un niveau très élevé lorsque nous créerons cette méta-boîte très simple. Lorsque nous aurons terminé, nous aurons une méta-boîte personnalisée qui nous permettra d'entrer un titre de produit.

Même si nous commençons simplement, gardez à l'esprit que cette idée peut être étendue à des besoins plus complexes. De nombreuses options et fonctionnalités supplémentaires peuvent être incluses dans une méta-boîte personnalisée. Des éléments tels que les cases à cocher, le téléchargement de fichiers, etc. sont toutes des fonctionnalités possibles d'une méta-boîte personnalisée. Ce didacticiel suppose que vous êtes familiarisé avec CSS, qui est nécessaire pour styliser les champs. Nous n'entrerons pas dans les détails pour discuter du style, mais c'est quelque chose qui peut facilement être fait une fois que votre méta-boîte est opérationnelle.

Développement de la méta-boîte personnalisée

Le code personnalisé pour les méta-boîtes peut être inclus dans functions.php ou dans un plugin. Cet exemple inclura le code nécessaire sous la forme d'un plugin. Cela peut être copié étape par étape pour créer un fichier complet prêt à l'emploi.

Le Codex est votre guide

Le Codex sera votre meilleur ami, s'il ne l'est pas déjà. Différents arguments ont différentes options, et le Codex l'expliquera en détail. Il convient de mentionner que le Codex est quelque chose que vous devriez bien connaître.

Testez d'abord localement

Voici le seul et unique avis de non-responsabilité pour ce tutoriel. Veuillez d'abord essayer cela dans un environnement de développement local. Bien que nous apprécions tous une petite aventure dans nos vies, personne n'aime l'écran blanc de la mort, surtout sur un site en direct. Nous allons parcourir ce didacticiel étape par étape, et des dépendances se produisent au fur et à mesure que nous le parcourons. Pour cette raison, il y a de fortes chances qu'une sauvegarde à mi-parcours provoque une erreur.

Première étape : créer et placer l'en-tête dans le plugin

La création d'un plugin peut sembler complexe, mais tous les plugins ne doivent pas nécessairement comporter des centaines de lignes. Les plugins peuvent être très simples, et ceci en est un excellent exemple. Si vous allez dans le dossier wp-content , vous verrez un dossier plugins . Créez un nouveau dossier appelé custom-post-meta-box contenant un fichier custom-post-meta-box.php . C'est le fichier à partir duquel vous allez travailler.

Lors de la création d'un plug-in, assurez-vous que ces informations apparaissent avant tout code personnalisé :

<?php

/*

Plugin Name: Custom Meta Box

Plugin URI:  www.yourwebsite.com

Description: Creates a meta box in WordPress

Version:     1.0.0

Author:      Your Name

Author URI:  www.yourwebsite.com

License: GPL2

*/

Activer le plugin

Même si nous n'y avons pas encore mis de code, nous pouvons activer le plugin en allant dans Plugins et en recherchant Custom Meta Box et en choisissant Activer. S'il vous plaît gardez à l'esprit que rien ne changera encore tout à fait.

CSS facultatif

Ceci est facultatif, mais si vous prévoyez d'ajouter du CSS personnalisé, copiez-le dans votre fichier de plugin. Assurez-vous que le fichier .css se trouve dans le dossier css de votre plugin.

function cmb_add_admin_styles() {

wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );

}

add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );

Deuxième étape : ajouter la boîte de méta

La fonction add_meta_box est utilisée pour créer des méta-boîtes personnalisées. Cette fonction est uniquement responsable de l'enregistrement et de l'affichage des méta-boîtes personnalisées.

function cmb_add_meta_box() {

add_meta_box(

'custom_post_metabox',

'Our Products',

'cmb_display_meta_box',

'post',

'normal',

'high'

);

}

add_action( 'add_meta_boxes', 'cmb_add_meta_box' );

Jetez un œil au tableau de bord, le titre "Nos produits" s'affiche, mais il n'y a pas de champ de texte pour que nous saisissions notre texte.

Troisième étape : ajouter le champ de la boîte de méta dans l'administrateur

Nous devons nous assurer qu'il y a une étiquette et un champ pour l'information. En utilisant html, c'est possible.

function cmb_display_meta_box( $post ) {

wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );

$html = '<label id=&quot;product-title&quot; for=&quot;product-title&quot;>';

$html .= 'Product Title';

$html .= '</label>';

$html .= '<input type=&quot;text&quot; id=&quot;product-title&quot; name=&quot;product-title&quot; value=&quot;' . get_post_meta( $post->ID, 'product-title', true ) . '&quot; placeholder=&quot;What is the Product Title?&quot; />';

echo $html;

}

// this echoes a single stream of html

Voyez comment les choses sont enveloppées dans le <label> ? Nous voyons le texte descriptif "Titre du produit" qui aide l'utilisateur à comprendre quel est le champ et quel type d'information doit être saisi. Notez également qu'il y a un texte d'espace réservé, qui ajoute également des informations utiles.

Votre entrée peut ne pas être aussi large. Certains CSS personnalisés ont été créés pour que tout le texte de l'espace réservé puisse être affiché ; l'étiquette a une largeur de 100 %.

Quatrième étape : enregistrer les données et l'importance d'utiliser un nonce

Vous avez peut-être saisi du texte à l'étape 3 et vous êtes rendu compte qu'il n'est pas réellement enregistré ou affiché sur la page. Cette étape est vraiment là où toute la magie opère.

function cmb_save_meta_box_data( $post_id ) {

if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {

if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {

$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );

update_post_meta( $post_id, 'product-title', $product_title );

}

}

}

add_action( 'save_post', 'cmb_save_meta_box_data' );

function cmb_display_product( $content ) {

if ( is_single () ){

$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );

$content .= $html;

}

return $content;

}

add_action('the_content', 'cmb_display_product');

function cmb_user_can_save( $post_id, $nonce ) {

$is_autosave = wp_is_post_autosave( $post_id );

$is_revision = wp_is_post_revision( $post_id );

$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );

return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;

}

Il se passe quelques choses ici. Fondamentalement, la fonction cmb_save_meta_box_data est ce dont nous avons besoin pour que toutes les sauvegardes aient lieu. Nous nous concentrerons sur la sécurité avec une valeur nonce. Il s'agit d'une mesure de sécurité qui garantit que les données à enregistrer proviennent de la bonne source. De plus, nous voulons nous assurer que le message n'est pas une sauvegarde automatique ou une révision. Ensuite, le nonce sera validé et l'utilisateur pourra sauvegarder.

Maintenant que nous pouvons enregistrer en toute sécurité, voici comment les méta-informations apparaissent sur la page. Comme vous pouvez le voir, il pourrait facilement être stylisé, mais cela fonctionne et les données sont enregistrées.

Lectures complémentaires et devoirs

Comme vous pouvez le voir, en quelques étapes seulement, vous pouvez avoir une méta-boîte personnalisée. Comme la plupart des projets de développement, il existe plusieurs façons de réaliser la même chose, vous pouvez donc trouver d'autres approches pour cette même tâche.

Nous avons examiné les méta-boîtes personnalisées à un niveau très élevé, vous voudrez peut-être approfondir ces concepts. Si vous avez un plus grand besoin de méta-boîtes personnalisées, voici quelques excellentes sources pour une découverte plus approfondie :

• Plus d'informations sur les nonces
• Plugin de méta-boîte
• Options pour la fonction add_meta_box