Term Meta dans WordPress 4.4 : ce qu’il faut savoir

par Julio Potier 09. décembre 2015 Guides

Parmis les nouveautés de cette version 4.4, un ticket du trac vieux de 6 ans a enfin été résolu et fermé, il s’agit de celui concernant les données meta pour les termes, ou term meta.

Cette fonctionnalité est très attendue, personnellement je me souviens quand Andrew Nacin avait tenté de créer une roadmap à son sujet, en 2013.

C’est maintenant chez vous, dans vos WordPress, en voici un tour d’horizon.

Qu’est-ce qu’un terme meta ?

J’ai déjà parlé des termes dans mon tutoriel ultime sur les taxonomies il y a quelques temps, je vous invite à le lire si ce n’est pas déjà fait ou le relire si vous avez oublié.

En résumé rapide, un terme est un objet dans une taxonomie. Par exemple le terme Guide de cet article fait parti de la taxonomie Catégorie.

On peut assigner à une taxonomie une description et un parent si elle est hiérarchique. Mais les termes eux n’ont aucune données associées.

Alors que les articles, les commentaires et les utilisateurs ont des données additionnelles liées, des meta données ou meta data, les termes eux n’en avaient pas.

Ces données peuvent être tout ce que vous voulez, si vous utilisez ACF, vous savez de quoi je parle, des champs personnalisés. Vous avez déjà utilisé les données meta même sans le savoir.

Des plugins et dépôt github ont plu afin d’ajouter leur support, ce qui devient obsolète avec cette 4.4.

Pourquoi ne pas avoir gardé sous forme de plugin tout ça au lieu de l’inclure dans le core ? Car les meta données sont une choses très importantes, c’est pour cela que les posts, users et comments en ont.

Prenons un exemple rapide avec un article, les meta données liées sont l’ID du user en train de l’éditer, un ID pour son image à la une, un autre donnée pour le nom du template de page à utiliser.

Pour un utilisateur ses données seront son nom, prénom, ses rôles, des informations personnelles, une bio, des réglages persos etc.

Pour les commentaires, les données sont la date de mise en corbeille et Akismet s’en sert pour ajouter des infos qui lui sont utiles (ou pas ?).

Bref, les utilisations sont très variées, on peut tout stocker, tout lire et ça permet aux plugins de venir ajouter des données comme je viens de le dire avec l’antispam par défaut de WordPress.

Que faire avec les term meta ?

Ok maintenant on a des termes meta, super, et j’en fais quoi ? Voici quelques exemples :

Ajouter une image ou icône
Ajouter une couleur
Attribuer un template de page d’archive
Assigner un auteur
Modifier la visibilité
Réordonner les termes
…

Libre à vous d’ajouter ce que bon vous semble. Attention toutefois à ne pas vous emballer en ajoutant des meta sur les termes alors que cela aurait dà» être fait sur l’article ou même une option.

Comment utiliser les term meta ?

Si vous êtes un développeur alors vous avez déjà utilisé les autres fonctions qui touchent aux autres meta données comme add_user_meta, add_post_meta, add_comment_meta etc. Idem avec get_, delete_ et update_ bien sà»r.

Disons que nous allons ajouter aux termes des catégories une couleur qu’on retrouvera ensuite en front.

Ajouter l’interface utilisateur

Pour ajouter des champs dans la page de création et édition des termes de taxonomy il nous faut utiliser les hooks action {$taxonomy}_add_form_fields et {$taxonomy}_edit_form_fields qui feront le travail.

Ajoutons notre champ color qui sera valable aussi bien pour la création que pour l’édition d’un terme :


add_action( 'category_add_form_fields', 'baw_new_term_color_field' );
function baw_new_term_color_field() {
	wp_nonce_field( 'add_term_meta_color', 'add_term_meta_color_nonce' );
	?>
	<div class="form-field">
		<label for="baw_term_color"><?php _e( 'Front Color', 'baw' ); ?></label>
		<input type="text" name="baw_term_color" id="baw_term_color" data-default-color="#FFFFFF" value="#FFFFFF" />
	</div>
	<?php
}

add_action( 'category_edit_form_fields', 'baw_edit_term_color_field' );
function baw_edit_term_color_field( $term ) {

	$color = get_term_meta( $term->term_id, 'color', true );
	$color = preg_match('|^#([A-Fa-f0-9]{3}){1,2}$|', $color ) ? $color : '#FFFFFF';

	?>
	<tr class="form-field">
		<th scope="row"><label for="baw_term_color"><?php _e( 'Front Color', 'baw' ); ?></label></th>
		<td>
			<?php wp_nonce_field( 'add_term_meta_color', 'add_term_meta_color_nonce' ); ?>
			<input type="text" name="baw_term_color" id="baw_term_color" value="<?php echo esc_attr( $color ); ?>" data-default-color="#FFFFFF" />
		</td>
	</tr>
<?php
}

gistfile1.txt affichage brut

Cela nous donne :

Sympa mais pas très user friendly tout ça, ajoutons à ce champ le ColorPicker de WordPress avec ce code plutôt :

<?php
add_action( 'admin_head-edit-tags.php', 'baw_admin_enqueue_scripts' );
function baw_admin_enqueue_scripts() {

	global $taxnow;
	if ( 'category' != $taxnow ) {
		return;
	}

	wp_enqueue_style( 'wp-color-picker' );
	wp_enqueue_script( 'wp-color-picker' );

	add_action( 'admin_footer', 'baw_term_colors_print_scripts' );
}

function baw_term_colors_print_scripts() {
?>
	<script type="text/javascript">
		jQuery( document ).ready( function( $ ) {
			$( '#baw_term_color' ).wpColorPicker();
		} );
	</script>
<?php
}

gistfile1.txt affichage brut

Ce qui nous donne maintenant ceci :

Et tant qu’on est dans le user friendly, ajoutons aussi la colonne dans la liste des termes.

Il nous faut 2 autres hooks, manage_edit-category_columns et manage_category_custom_column. Notez que le mot category est celui de ma taxonomie.

Voici comment ajouter la colonne :

<?php
add_filter( 'manage_edit-category_columns', 'baw_edit_term_columns' );
function baw_edit_term_columns( $columns ) {
	$columns['color'] = __( 'Front Color', 'baw' );

	return $columns;
}

gistfile1.txt affichage brut

Et un peu de CSS pour la route :

<?php
add_action( 'admin_head-edit-tags.php', 'baw_admin_enqueue_styles' );
function baw_admin_enqueue_styles() {

	global $taxnow;
	if ( 'category' != $taxnow ) {
		return;
	}

	add_action( 'admin_head',   'baw_term_colors_print_styles' );
}

function baw_term_colors_print_styles() {
	?>
	<style type="text/css">
		.column-color { width: 50px; }
		.column-color .color-block { display: inline-block; width: 28px; height: 28px; border: 1px solid #ddd; }
	</style>
<?php
}

gistfile1.txt affichage brut

Maintenant il va nous falloir sauver cette couleur car pour le moment rien n’est cà¢blé comme on dit !


add_action( 'edit_category', 'baw_save_term_color' );
add_action( 'create_category', 'baw_save_term_color' );
function baw_save_term_color( $term_id ) {
	if ( defined( 'DOING_AJAX' ) ) {
		return;
	}
	if ( ! isset( $_POST['add_term_meta_color_nonce'] ) ||
		! isset( $_POST['baw_term_color'] ) ||
		! wp_verify_nonce( $_POST['add_term_meta_color_nonce'], 'add_term_meta_color' )
	) {
		wp_nonce_ays( '' );
	}

	$color = $_POST['baw_term_color'];
	$color = preg_match('|^#([A-Fa-f0-9]{3}){1,2}$|', $color ) ? $color : false;

	if ( $color ) {
		update_term_meta( $term_id, 'color', $color );
	} else {
		delete_term_meta( $term_id, 'color' );
	}
}

gistfile1.txt affichage brut

Quelques vérifications de sécurité et de champs envoyés correctement, puis on sauve ou supprime la couleur liée à ce terme.

Voilà , le back-end (ou back-office ou arrière-guichet si vous préférez) est terminé, maintenant nous allons récupérer ça en front-end.

Je vais modifier la couleur des titres de mes articles si je suis sur leur page single :

add_filter( 'the_title', 'baw_add_color_to_title' );
function baw_add_color_to_title( $title ) {
	global $post;
	if ( is_single() ) {
		$term = get_the_terms( 0, 'category' );
		if ( $term ) {
			$term = reset( $term );
			$color = get_term_meta( $term->term_id, 'color', true );
			$title = sprintf( '<span style="color:%s">%s</span>', esc_attr( $color ), $title );
		}
	}
	return $title;
}

gistfile1.txt affichage brut