Auf WPSE tauchte die Frage auf wie man eine Metabox im Backend per Voreinstellung minimiert darstellt. WordPress bietet hierfür keine Option an, obwohl es wahrscheinlich keine schlechte Idee wäre. Denn fügt man relativ viele Metaboxen ein, wird es schnell unübersichtlich. Um eine Metabox minimiert (geschlossen) darzustellen, benötigt sie die CSS-Klasse closed.
Auch wenn man eine Metabox in Abhängigkeit eines bestimmten Wertes besonders hervorheben möchte, z.B. weil eine Aktion beim Speichern fehlgeschlagen ist, bietet WordPress von Haus aus keine Option für zusätzliche CSS-Klassen an. Wer seine Metaboxen anders gestalten möchte, würde also wahrscheinlich auf JavaScript zurück greifen.
Die einfachste Lösung ist wie so oft ein Filter, der allerdings etwas versteckt ist. Die Funktion add_meta_box() selber hat keinerlei Filter oder Actions in die man sich einhängen könnte.
Dafür aber die Funktion die dafür zuständig ist die Titleleiste der Metabox darzustellen. Damit es etwas klarer ist um welchen Teil des HTMLs es hier geht, auszugsweise das HTML der Excerpt-Metabox:
<div id="postexcerpt" class="postbox">
<div class="handlediv" title="Zum umschalten klicken">
<h3 class="hndle">
<span>Auszug</span>
</h3>
<div class="inside">
[...]
</div> <!-- Ende div .inside -->
</div> <!-- Ende div .handlediv -->
</div> <!-- Ende div #postexcerpt -->
Der Filter kann CSS-Klassen zum äußersten Div-Container, hier im Beispiel mit der ID postexcerpt, hinzufügen. Somit ist es dann auch möglich im Stylesheet die nachfolgenden HTML-Elemente zu stylen.
add_action( 'add_meta_boxes', 'add_my_metabox' );
function add_my_metabox() {
$id = 'my-metabox';
$title = 'My Metabox';
$callback = 'my_metabox_content';
$page = 'post';
add_meta_box( $id, $title, $callback, $page );
add_filter( "postbox_classes_{$page}_{$id}", 'minify_my_metabox' );
}
function my_metabox_content() { ... }
/**
* Add extra css-classes to a meta-box
*
* @param array $classes Array with css-classes
*/
function minify_my_metabox( $classes ) {
array_push( $classes, 'closed' );
return $classes;
}
In der Funktion add_my_metabox() wird zunächst einmal ganz normal eine Metabox erzeugt. Anschließend wird jedoch noch ein Filter gesetzt der als Callback die Funktion minify_my_metabox() aufruft. Der Hook für den Filter muss man um die ID der Metabox und den Post-Type ergänzen. An dieser Stelle wird es ein wenig kompliziert. Im Codex wird der Begriff “Post Type” verwendet, da der Filter und die zugehörige Funktion jedoch undokumentiert sind, muss man im Quellcode nachschauen. Und dort wird “page” als Variablenname verwendet.
Ich persönlich finde den Begriff “page” sinnvoller, da man mit der gleichen Methode auch z.B. die Widgets im Dashboard beeinflussen kann (siehe Beispiel unten). Als “page” müsste man dazu lediglich dashboard angeben und kann dann eigenen oder bereits vorhandenen Widgets, weitere CSS-Klassen hinzufügen. Im Codex findet man bei remove_meta_box() noch ein paar weitere mögliche Werte für page. Hier wird übrigens wieder von page gesprochen, im Gegensatz zu post type bei add_meta_box().
function register_dash_widget(){
$id = 'debugoutput';
$page = 'dashboard';
wp_add_dashboard_widget(
$id,
'Debug Output',
function () { echo 'Hello World!'; }
);
add_filter(
"postbox_classes_{$page}_{$id}",
function ( $classes ) {
array_push( $classes, 'closed' );
return $classes;
}
);
}
add_action( 'wp_dashboard_setup', 'register_dash_widget' );
Die Callback-Funktion minify_my_metabox() ist dann wieder recht unspektakulär. Sie erwartet als einzigen Parameter ein Array mit den CSS-Klassen. Fügt man z.B. die Klasse closed hinzu und gibt das Array zurück, so wird die Metabox (oder das Widget) minimiert anstatt geöffnet dargestellt. Denkbar wäre es natürlich auch eine CSS-Klasse alert hinzuzufügen um eine Metabox (oder Widget) farblich hervorzuheben.
), hinterlasst die Ticket-Nummer bitte in den Kommentaren. Ich werde mich dann den Tickets aktiv anschließen.
Keine Kommentare | Schreibe einen Kommentar