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.
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 :
