Ajouter une bannière au tableau de bord

Question

Ajouter une bannière au tableau de bord

- 2
- 1389 2012-05-23
Existe-t-il unmoyen d'ajouter unebannière autableau debord WP?Jene veuxpas dire dans un widgetpersonnalisé ou quoi que ce soit,juste une simplebannière d'image.

Is there a way to add a banner to the WP dashboard? I don't mean in a custom widget or anything, just a simple image banner.

widgets dashboard

- Vous devrez ajouter un widget,puis ajouter la chaîne htmlimg enveloppéeen tant que rappel de laméta-boîte.
  
  You'll have to add a widget and then add the img html string wrapped as meta box callback.
  - 0
  - 2012-05-23
  - kaiser

2 réponses

votes

- 0
- 2012-05-23
Vouspouvez vous connecter à l'action admin_headet inclure du CSSpersonnalisépour attacher uneimage d'arrière-plan au div avec unidentifiant de wpbody-content.

http://codex.wordpress.org/Plugin_API/Action_Reference/admin_head-% 28plugin_page% 29

You could hook into the admin_head action and include some custom CSS to attach a background image to the div with an id of wpbody-content.

http://codex.wordpress.org/Plugin_API/Action_Reference/admin_head-%28plugin_page%29

brasofilo · Accepted Answer · 2012-05-24

1

2012-05-24

Solution de contournement à l'aide de l'insertion DOMjQuery.
Notez l'utilisation de PHP Heredoc sintax pourimprimer le script.

 function wpse_53035_script_enqueuer(){
    echo <<<HTML
    <script type="text/javascript">
    jQuery(document).ready( function($) {
        $('<div style="width:100%;text-align:center;"><img src="http://cdn.sstatic.net/wordpress/img/logo.png?v=123"></div>').insertBefore('#welcome-panel');
    });     
    </script>
HTML;
}
add_action('admin_head-index.php', 'wpse_53035_script_enqueuer');

Ceciinsère lenouveau diven haut avant #welcome-panel. Si vous utilisez le div #dashboard-widgets-wrap,il s'imprime dans lamêmeposition (après <h2>Dashboard</h2>et avant les widgets).
Lepanneau debienvenueestnormalementmasqué,maisje ne suispas sûr de son comportementgénéral. Je suppose que cela dépend de vostests.

[modifier]
Enfait,inspectez simplement lapageet insérez-la où vous le souhaitez.

[modifier 2]
Jouer avec le code ...
La version suivanteeffectue unfondu d'entrée de l'enveloppe des widgets. Il ajoute également la largeuret la hauteur dans labalise d'image ,de sorte que les autres élémentsne "sautent"pas lorsque l'image se chargeenfin.

 function wpse_53035_script_enqueuer(){
    echo <<<HTML
    <style type="text/css">#dashboard-widgets-wrap {display:none;}</style>
    <script type="text/javascript">
    jQuery(document).ready( function($) {
        $('#dashboard-widgets-wrap').delay(1200).fadeTo('slow',1);
        $('<div style="width:100%;text-align:center;margin:8px 0"><img src="http://cdn.sstatic.net/wordpress/img/logo.png?v=123" width="483" height="43"></div>').insertBefore('#dashboard-widgets-wrap');
    });     
    </script>
HTML;
}
add_action('admin_head-index.php', 'wpse_53035_script_enqueuer');

Workaround using jQuery DOM insertion.
Note the use of PHP Heredoc sintax to print the script.

function wpse_53035_script_enqueuer(){
    echo <<<HTML
    <script type="text/javascript">
    jQuery(document).ready( function($) {
        $('<div style="width:100%;text-align:center;"><img src="http://cdn.sstatic.net/wordpress/img/logo.png?v=123"></div>').insertBefore('#welcome-panel');
    });     
    </script>
HTML;
}
add_action('admin_head-index.php', 'wpse_53035_script_enqueuer');

This inserts the new div at the top before #welcome-panel. If you use the div #dashboard-widgets-wrap it prints in the same position (after <h2>Dashboard</h2> and before the widgets).
The welcome panel is normally hidden, but I'm not sure of its general behavior. I guess this depends on your tests.

[edit]
As a matter of fact, just inspect the page and insert wherever you want.

[edit 2]
Playing with the code...
The following version does a fade-in of the widgets wrap. It also adds the width and height in the image tag, so other elements don't "jump" when the image finally loads.

function wpse_53035_script_enqueuer(){
    echo <<<HTML
    <style type="text/css">#dashboard-widgets-wrap {display:none;}</style>
    <script type="text/javascript">
    jQuery(document).ready( function($) {
        $('#dashboard-widgets-wrap').delay(1200).fadeTo('slow',1);
        $('<div style="width:100%;text-align:center;margin:8px 0"><img src="http://cdn.sstatic.net/wordpress/img/logo.png?v=123" width="483" height="43"></div>').insertBefore('#dashboard-widgets-wrap');
    });     
    </script>
HTML;
}
add_action('admin_head-index.php', 'wpse_53035_script_enqueuer');