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

09. décembre 2015 Guides 0
Term Meta dans WordPress 4.4 : ce qu’il faut savoir

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
}

Cela nous donne :

baw_151113-022025[1]

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
}

Ce qui nous donne maintenant ceci :

baw_151113-022516[1]

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

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
}

Capture d'écran 2015-12-09 02.08.16

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

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;
}
Capture d'écran 2015-12-09 00.08.36
Avant
Capture d'écran 2015-12-09 00.12.09
Après

Voilà, vous savez déjà utiliser les termes meta ! Quelle est votre prochain développement avec ça ?

Lire la suite

Vous aimez ? Partagez !

Abonnement gratuit à 0€


Laisser un commentaire

Avant de parler, merci de lire la charte des commentaires.

Utiliser le tag [php][/php] pour ajouter du code ou utilisez un service comme pastebin.com.
Cibler un commentateur avec un "@", merci à Mention Comments Authors !