Par défaut, WordPress dispose de l'optionhaut de l'écranPrésentant la barre d'administration, cette barre vous permet d'accéder rapidement aux fonctions du backend de WordPress. Cependant, certains utilisateurs peuvent trouver l'emplacement de la barre d'administration un peu gênant et vouloir la déplacer, notamment pour modifier son apparence et son emplacement.

Dans ce tutoriel, leConstructeur de site web autodidacte WPNous verrons comment déplacer la barre d'administration de WordPress vers le pied de page en ajoutant un CSS personnalisé, ou comment déplacer la barre d'administration vers le pied de page en utilisant la commandefonctions.php pour obtenir le même effet, tout en veillant à ce que l'affichage de la page pour les utilisateurs non connectés ne soit pas affecté.

Pourquoi déplacer la barre d'administration de WordPress ?

La barre d'administration de WordPress offre une série de fonctions de navigation telles que l'accès rapide au tableau de bord, la modification des pages, l'affichage des commentaires, la mise à jour des plugins, etc. Bien qu'elle soit puissante, elle est placée par défaut en haut de la page, ce qui peut masquer le contenu ou entrer en conflit avec des conceptions personnalisées.

Le déplacement de la barre d'administration vers le bas de la page améliore l'expérience visuelle, en particulier pour les utilisateurs qui ont besoin de plus d'espace pour afficher leur conception frontale. En outre, l'esthétique générale de la page s'en trouve améliorée, surtout si la conception du haut de la page est complexe et que le déplacement de la barre d'administration vers le bas de la page permet d'éviter les distractions.

préliminaire

Avant de plonger dans le tutoriel, voici ce que vous devez préparer :

1. Un thème qui prend en charge le CSS personnalisé et recommande l'utilisation d'un éditeur de blocs (par ex.Vingt vingt-trois(Sujet).
2. sous-thème(Il est recommandé de créer d'abord le thème enfant afin que vos modifications ne soient pas perdues lors de la mise à jour du thème).
3. Votre version de WordPress doit avoir été mise à jour pour assurer la compatibilité.

Étape 1 : Allez dans la section Personnalisation du thème

Tout d'abord, il faut s'assurer que le thème utilisé supporte la personnalisation. Il y a plusieurs façons de personnaliser WordPress, la plus simple étant d'utiliser la fonction "Apparence > Personnalisation"pour le configurer.

1. Connectez-vous au site WordPress et accédez au tableau de bord.
2. Naviguez jusqu'àApparence > Personnalisationou cliquez simplement sur "personnalisation"Bouton.

3. Une fois que vous êtes sur la page de personnalisation du thème, cherchez "CSS supplémentaire"Options.

Pourquoi créer des thèmes enfants ?

Pour garantir que les futures mises à jour du thème n'écrasent pas les personnalisations que vous avez effectuées, il est recommandé de créer et de mettre à jour le site web de l'entreprise.Utilisation de thèmes enfants. Les thèmes enfants peuvent apporter des modifications au thème sans affecter les fichiers principaux du thème original.

Étape 2 : Ajouter une feuille de style CSS personnalisée

Ensuite, nous passerons en revue la rubrique "CSS supplémentaireL'option " ajoute un style personnalisé à la barre d'administration de WordPress pour la déplacer vers le bas de la page.

Code CSS personnalisé

entrer dansCSS supplémentaireAprès la page, copiez et collez le code suivant :

corps {
    margin-top : -28px ;
    padding-bottom : 28px ;
}
body.admin-bar #wphead {
    haut de la page : 0 ;
}
body.admin-bar #footer {
    padding-bottom : 28px ;
}
#wpadminbar {
    top : auto !important ;
    en bas : 0 ;
}
#wpadminbar .menupop .ab-sub-wrapper {
    bas : 32px ;
}

Ce snippet CSS déplace la barre d'administration du haut vers le bas de la page et ajuste l'espacement entre le haut et le bas de la page pour tenir compte de la nouvelle position de la barre d'administration.

Code d'interprétation fonction

• margin-top : -28px ; padding-bottom : 28px ;Réduire l'espacement en haut de la page tout en laissant de la place en bas pour que la barre d'administration n'empiète pas sur le contenu de la page.
• #wpadminbar { top : auto !important ; bottom : 0 ; }: Force la barre d'administration à être fixée au bas de la page au lieu de la position par défaut en haut de la page.
• .ab-sub-wrapper { bottom : 32px ; }Pour plus d'informations, veuillez consulter le site web de la Commission européenne : Assurez-vous que le menu déroulant de la barre d'administration s'affiche correctement en bas de page.

Étape 3 : Prévisualisation et enregistrement des modifications

Une fois que vous avez fini d'ajouter le CSS, cliquez sur "Enregistrer les modifications"et revenez à la page d'accueil du site pour voir l'effet.

Si tout va bien, enregistrez les paramètres et publiez les modifications. Votre barre d'administration WordPress devrait être déplacée du haut vers le bas de la page.

Autres questions et considérations

1. problèmes d'affichage des utilisateurs non enregistrés

Après avoir suivi les étapes ci-dessus, il se peut que l'affichage de la page soit augmenté de 28px lorsqu'un utilisateur non connecté visite le site. Pour résoudre ce problème, vous pouvez éventuellement ajouter un code conditionnel supplémentaire au fichier functions.php afin que seuls les utilisateurs connectés voient les ajustements de la barre d'administration, et que les utilisateurs non connectés ne soient pas affectés.

Étape 4 : Ajouter le code via functions.php

Si vous souhaitez que l'ajustement de la barre d'administration ne prenne effet que pour les utilisateurs connectés, vous pouvez le faire en ajoutant un code personnalisé au fichier functions.php du thème. Vous trouverez ci-dessous le code ajouté :

function wpg_ubah_posisi_admin_bar() {
    if (is_user_logged_in()) {
        ?>
        <style>
            body {margin-top : -28px ; padding-bottom : 28px;}
            body.admin-bar #wphead {padding-top : 0;}
            body.admin-bar #footer {padding-bottom : 28px;}
            #wpadminbar { top : auto !important ; bottom : 0;}
            #wpadminbar .menupop .ab-sub-wrapper { bottom : 32px ; }
        </style>
        <?php
    }
}

add_action('wp_head', 'wpg_ubah_posisi_admin_bar') ;

Comment ajouter le code functions.php ?

1. Connectez-vous au backend de WordPress et naviguez versApparence > Editeur de fichier de thème.

2. Dans la liste des fichiers à droite, recherchez et cliquez sur le fichierfunctions.phpDocumentation.
3. Ajoutez le code ci-dessus à la fin de ce fichier et cliquez sur "Documents mis à jour".

Ce code garantit que le repositionnement de la barre d'administration ne prend effet que pour les utilisateurs connectés et que les utilisateurs non connectés ne voient aucun effet, évitant ainsi le problème de la page qui se lève.

rendre un verdict

En suivant les étapes ci-dessus, il est facile de déplacer la barre d'administration de WordPress du haut vers le bas de la page, et il n'est pas nécessaire d'installer des plugins supplémentaires. Que vous la personnalisiez via CSS ou que vous ajoutiez un code conditionnel au fichier functions.php, ces méthodes vous permettront de présenter la barre d'administration de manière plus personnalisée sur votre site.