Ajouter des metabox sous le titre du post

Ajouter des metabox sous le titre du post

J’ai souvent eu l’envie de forcer l’emplacement des metaboxs  sous le titre des dans l’édition des articles et des « custom post type ». Pour des raisons d’ergonomie (pas forcément que c’est plus beau, mais plutôt que c’est dans le flux de rédaction et que cela permet de ne pas oublier ces champs). J’ai donc pris le temps qu’il fallait, j’ai enfin réussis a faire quelque chose de propre.

post-new

Donc oui, il n’y aucune zone définie entre le titre et l’éditeur pour déplacer les metaboxs.

Création de la zone

Nous allons donc installer une zone pour pouvoir placer 3 metaboxs les unes à côté des autres.

Le hook a utilisé est edit_form_after_title , afin de placer du code entre ces deux éléments.

<?php
/**
* Ajoute 3 emplacements pour les metaboxs
*/
function add_metabox_under_title() {
global $post;
?>
	<ul class="flex-container">
		<li class="flex-item"><?php do_meta_boxes(get_current_screen(), 'under-1', $post);?></li>
		<li class="flex-item"><?php do_meta_boxes(get_current_screen(), 'under-2', $post);?></li>
		<li class="flex-item"><?php do_meta_boxes(get_current_screen(), 'under-3', $post);?></li>
	</ul>
<?php
}
add_action('edit_form_after_title', 'add_metabox_under_title');
Emplacement pour metaboxs

Style

On ajoute un peu de style flexbox :

<?php
/**
* Ajoute style pour la grille flexbox sous le titre dans l'édition d'un post
*/
function style_under_title() {
	global $pagenow;

	if( ($pagenow == 'post-new.php' || $pagenow == 'post.php')
	  	&& in_array( get_post_type(), array('post', 'tribe_events') ) ): /* Mettez les 'post_type' voulu dans le tableau */
?>
<style>
	.flex-container{
		flex-wrap:wrap;
		padding: 0;
		margin: 0;
		list-style: none;
		flex-direction: row
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		justify-content: space-between;
		align-items:flex-start;
		align-content:center;
		clear:right;
	}
	.flex-item {
		max-width: 350px;
	}
	</style>
	<?php
	endif;
}
add_action( 'admin_head', 'style_under_title' );
Style pour metabox sous titre

En passant, voici une petite doc pratique sur flexbox (nouveauté qui nous sauve la vie) : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Affectation Metabox

Le souci, c’est que l’emplacement des metabox est enregistré en base de données et si l’on veut en placer à ces emplacement il faut l’affecter manuellement par du code. (C’est aujourd’hui la seule manière que j’ai trouvé pour faire cela correctement).

A savoir donc : Que nous affectons les emplacements, il ne sera pas possible de les modifier les emplacement outre que par le code.

Stockage des infos

Chaque emplacement de metabox est enregistré dans une variable dans la table wp_usermeta sous la valeur meta-box-order_{post_type} ou {post_type} est l’identifiant du type de post.

Modification de la variable

Nous récupérons donc cette variable pour nous la modifions par un choix prédéfini :

<?php
/**
* On récupérer et on affiche la variable
*/
var_dump( get_user_option( 'meta-box-order_post' ) );

/**
* On copie la variable et nous modifions l'affectation
*/
$o = array(
	'under-1' => 'categorydiv',
	'under-2' => 'tagsdiv-post_tag,postimagediv,',
	'side' => 'submitdiv,formatdiv',
	'normal' => 'postexcerpt,trackbacksdiv,postcustom,commentstatusdiv,slugdiv,authordiv',
	'advanced' => '');

/**
* On enregistre ensuite
*/
update_user_option( get_current_user_id(), 'meta-box-order_post', $o );
Script pour modifier l'emplacement des metabox

Vous remarquerez les clés under-1 et under-2 qui correspondent au contexte renseigné dans le premier script.

Script complet

Voici le script complet avec la gestion de deux type de post, post et tribe_events (The Event Calendar)

<?php
/**
* Ajoute 3 emplacements pour les metaboxs
* Corrige l'emplacement des metabox en BD et les affiches sous le champ Title
*/
function add_metabox_under_title() {
	global $post, $wp_meta_boxes;

	switch( get_current_screen()->id ){
		case 'tribe_events' :
			$o = array(
				'under-1' => 'categorydiv',
				'under-2' => 'tribe_events_catdiv',
				'under-3' => 'tagsdiv-post_tag,postimagediv,',
				'side' => 'submitdiv,tribe_events_event_options',
				'normal' => 'tribe_events_event_details,postexcerpt,postcustom,commentstatusdiv,slugdiv,authordiv',
				'advanced' => ''
			);
			update_user_option( get_current_user_id(), 'meta-box-order_tribe_events', $o );
		break;

		case 'post' :
			$o = array(
				'under-1' => 'categorydiv',
				'under-3' => 'tagsdiv-post_tag,postimagediv,',
				'side' => 'submitdiv,formatdiv',
				'normal' => 'postexcerpt,trackbacksdiv,postcustom,commentstatusdiv,slugdiv,authordiv',
				'advanced' => ''
			);
			update_user_option( get_current_user_id(), 'meta-box-order_post', $o );
			break;
	}
?>
	<ul class="flex-container">
		<li class="flex-item"><?php do_meta_boxes(get_current_screen(), 'under-1', $post);?></li>
		<li class="flex-item"><?php do_meta_boxes(get_current_screen(), 'under-2', $post);?></li>
		<li class="flex-item"><?php do_meta_boxes(get_current_screen(), 'under-3', $post);?></li>
	</ul>
	<?php
}
add_action('edit_form_after_title', 'add_metabox_under_title');

/**
* Ajoute style pour la grille flexbox sous le titre dans l'édition d'un post
*/
function style_under_title() { 
	global $pagenow;
	if( ($pagenow == 'post-new.php' || $pagenow == 'post.php') 
		&& in_array( get_post_type(), array('post', 'tribe_events') ) ):
	?>
	<style>
		.flex-container{
			flex-wrap:wrap;
			padding: 0;
			margin: 0;
			list-style: none;
			flex-direction: row
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-flex-flow: row wrap;
			justify-content: space-between;
			align-items:flex-start;
			align-content:center;
			clear:right;
		}
		.flex-item {
			max-width: 350px;
		}
	</style>
	<?php
	endif;
}
add_action( 'admin_head', 'style_under_title' );
Script complet pour placer les metabox de

Et un exemple avec une taille d’écran plus petite :

under-title-2


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *