Comment masquer la barre d'administration WordPress

La barre d'administration pour les utilisateurs connectés à WordPress offre un moyen pratique d'accéder rapidement aux fonctions courantes, telles que la modification de publications ou la suppression du cache du site. Cependant, une chose que j'ai toujours détestée dans la barre d'administration, surtout lors du développement d'un nouveau site Web : elle est trop visible et rend difficile la concentration sur la conception et le contenu. Bien sûr, il existe la possibilité de le masquer entièrement, mais j'ai parfois besoin d'un accès rapide à certaines fonctionnalités de base, comme passer à l'édition de page.

Si vous souhaitez désactiver complètement la barre d'administration, voici une capture d'écran montrant comment l'activer :

Je n'aime pas cette solution parce que j'aime la commodité d'un changement facile, mais en même temps, je veux aussi quelque chose de plus élégant. Je suis tombé sur cette méthode de réglage il y a quelques années. Je l'ai donc affiné davantage et l'ai intégré dans un plugin avec quelques ajustements. Comparez simplement la barre d'administration d'origine et la mienne :

La barre d'administration par défaut est toujours visible

La barre d'administration ajustée est cachée sous le cercle rouge

Passez votre souris sur le cercle et la barre d'administration verticale apparaîtra

Comme vous pouvez le constater, il n’y a pas de barres noires. A sa place se trouve un petit cercle rouge (la couleur et l'icône peuvent être modifiées). Passez votre souris sur l'icône et une barre verticale apparaîtra. Par conséquent, tous les liens essentiels restent accessibles mais sont masqués jusqu'à ce que vous en ayez besoin. Soyez concis et clair.

Ma solution n'est pas parfaite. Le plus gros inconvénient est probablement qu’il peut ne pas fonctionner correctement avec les longs en-têtes de menu de divers plugins. Cela n'a pas d'importance pour moi puisque je garde mon nombre de plugins faible. Par exemple, ce site Web n'utilise qu'environ 7 plugins.

En plus de repositionner la barre d'administration, ma solution modifie également le titre du site Web en adresse URL. Ceci est très pratique lorsque vous travaillez sur des sites Web avec des titres très longs. Les noms de domaine sont généralement plus courts.

Méthode d'installation

Première méthode consiste à utiliser un seul plugin de fichier, à le télécharger dans le dossier /wp-content/plugins et à l'activer dans la section "Plugins". Vous pouvez télécharger le plug-in dans mon article original : https://www.php.cn/link/bca314ed6a27eb1a7ce8434de54e3453

Méthode 2 consiste à ajouter le code au fichier functions.php du thème :

<code class="language-php">// 在管理栏中显示域名而不是网站标题
add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );
function customize_my_wp_admin_bar( $wp_admin_bar ) {
    $node = $wp_admin_bar->get_node('site-name');
    $new_site_name = preg_replace("(^https?://)", "", get_home_url() );
    $node->title = $new_site_name;
    $wp_admin_bar->add_node($node);
}

final class Kama_Collapse_Toolbar {

    public static function init(){
        add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] );
    }

    public static function hooks(){

        // remove html margin bumps
        remove_action( 'wp_head', '_admin_bar_bump_cb' );

        add_action( 'wp_head', [ __CLASS__, 'collapse_styles' ] );
    }

    public static function collapse_styles(){

        // do nothing for admin-panel.
        // Remove this if you want to collapse admin-bar in admin-panel too.
        if( is_admin() ){
            return;
        }

        ob_start();
        ?>

        <style>
            #wpadminbar {
                position: fixed !important;
                top: -32px !important;
                transition: top 0.3s ease;
            }
            #wpadminbar.expanded {
                top: 0 !important;
            }
            #wpadminbar #wp-admin-bar-site-name {
                display: none;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded {
                display: block;
            }
            #wpadminbar #wp-admin-bar-site-name .ab-item:before {
                content: "\f321"; /* Dashicons icon */
                font-family: 'dashicons';
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                color: red; /* Icon color */
                margin-right: 0.3em;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded .ab-item:before {
                display: none;
            }
        </style>

        <?php
        echo ob_get_clean();
    }
}

Kama_Collapse_Toolbar::init();</code>

Comme je le réutilise sur de nombreux sites internet, je trouve plus pratique d'utiliser la première méthode. Cela rend également mes functions.php fichiers plus légers, ce qui est un bonus pour moi.

Quelques notes

Comment changer d'icône

Pour changer l'icône, vous devez modifier l'élément `wpadminbar #wp-admin-bar-site-name>.ab-item:before`. Sélectionnez n'importe quelle icône parmi les dashicons et modifiez la propriété `content` en CSS.

Comment changer la couleur de l'icône

Entrez à nouveau le code, recherchez et modifiez la couleur de l'élément `wpadminbar #wp-admin-bar-site-name>.ab-item:before`. Pour moi, le rouge fonctionne bien en raison du contraste.

Comment conserver le titre du site Web dans la barre d'administration

Supprimez ce code du fichier du plugin ou de votre fichier `functions.php` :
`add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );`
`fonction personnaliser_my_wp_admin_bar( $wp_admin_bar ) {`
` $node = $wp_admin_bar->get_node('nom-site');`
` $new_site_name = preg_replace("(^https?://)", "", get_home_url() );`
` $node->title = $new_site_name;`
`$wp_admin_bar->add_node($node);`
`} ```

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!