web-dev-qa-db-fra.com

Comment ajouter des bulles de notification au menu ou à la barre d'administration?

Que recommanderiez-vous d’utiliser jusqu’à manipuler le admin bar go? Je pensais simplement ajouter un nouveau nœud de barre d’administration et, avec CSS, définir une image d’arrière-plan pour l’icône. Ensuite, dans le nœud, indiquez simplement le nombre.

enter image description here

Je ne sais pas comment ajouter des notifications de bulles dans les menus ou sous-menus de l'administrateur. Aucun conseil?

cssadminhtmladmin-menuadmin-bar
3
Michael Ecklund

Vous créez simplement la bulle (cercle) avec CSS, et vous avez un site texte au-dessus.

Exemple CSS

span.mbe-update-bubble{
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    -webkit-border-radius: 10px !important;
    -khtml-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    border-radius: 10px !important;
    background: #ccc !important;
    color: #464646 !important;
    width: 10px !important;
    height: 10px !important;
    padding: 3px !important;
    font-size: 11px !important;
    line-height: 10px !important;
    display: inline-block !important;
    text-align: center !important;
    text-shadow: none !important;
    font-weight: bold !important;
}
span.mbe-ab-text{
    position: relative !important;
    margin: 0px -6px !important;
    font-weight: normal !important;
}
span.mbe-ab-text-active{
    position: relative !important;
    margin-left: 14px !important;
    color: #91b1c6 !important;
    font-weight: bold !important;
    text-shadow: 0px 0px 1px #000 !important;
}

Ajouter une fonction de messages en attente:

function admin_tool_bar($wp_admin_bar){
    global $wp_admin_bar;
    $post_type = 'testimonial';
    $count = wp_count_posts($post_type);
    $args = array(
        'id' => 'mbe_testimonials_pending',
        'href' => admin_url('/edit.php?post_status=pending&post_type='.$post_type, 'http'),
        'parent' => 'top-secondary'
    );
    if($count->pending == 1){
        $title = ' Testimonial Awaiting Moderation';
    } else{
        $title = ' Testimonials Awaiting Moderation';
    }
    $args['meta']['title'] = $title;
    if($count->pending == 0){
        $display = '<span class="mbe-ab-text">'.$count->pending.' '.$title.'</span>';
    } else{
        $display = '<span class="mbe-update-bubble">'.$count->pending.'</span><span class="mbe-ab-text-active">'.$title.'</span>';
    }
    $args['title'] = $display;
    $wp_admin_bar->add_node($args);
}

Et pour que l'élément de barre d'administration soit ajouté, déclenchez le crochet: add_action('wp_before_admin_bar_render', 'admin_tool_bar', 999);

Exemple de capture d'écran:

enter image description here

3
Michael Ecklund