Por defecto, WordPress tiene elparte superior de la pantallaMostrando la barra de administración, esta barra le ayuda a acceder rápidamente a las funciones del backend de WordPress. Sin embargo, algunos usuarios pueden encontrar la ubicación de la barra de admin un poco molesta y querer moverla, especialmente para cambiar su apariencia y ubicación.

En este tutorial, elWP constructor de sitios web autodidactaCubriremos cómo mover la barra de administración de WordPress al pie de página añadiendo CSS personalizado, o cómo mover la barra de administración al pie de página utilizandofunciones.php para conseguir el mismo efecto, garantizando al mismo tiempo que la visualización de la página para los usuarios que no hayan iniciado sesión no se vea afectada.

¿Por qué mover la barra de administración de WordPress?

La barra de administración de WordPress ofrece una serie de funciones de navegación como el acceso rápido al panel de control, la edición de páginas, la visualización de comentarios, la actualización de plugins, etc. Aunque es potente, se coloca por defecto en la parte superior de la página, lo que puede oscurecer el contenido o entrar en conflicto con diseños personalizados.

Desplazar la barra de administración a la parte inferior de la página mejora la experiencia visual, especialmente para los usuarios que necesitan más espacio en la pantalla para mostrar su diseño frontal. Además, mejora la estética general de la página, sobre todo si el diseño de la parte superior de la página es complejo, y desplazar la barra de administración a la parte inferior de la página evita distracciones.

preliminar

Antes de sumergirnos en el tutorial, esto es lo que necesita preparar:

1. Un tema que admita CSS personalizado y recomiende el uso de un editor de bloques (p. ej.Veintitrés(Asunto).
2. subtema(Se recomienda crear primero el tema hijo para que sus cambios no se pierdan al actualizar el tema).
3. Su versión de WordPress debería haber sido actualizada a la última versión para garantizar la compatibilidad.

Paso 1: Vaya a Personalización del tema

En primer lugar, hay que asegurarse de que el tema utilizado admite la personalización. Hay varias formas de personalizar en WordPress, la más sencilla es a través del "Apariencia > Personalización" para configurarlo.

1. Inicie sesión en el sitio de WordPress y vaya al panel de control.
2. Vaya aApariencia > Personalización, o simplemente haga clic en "personalización"Botón".

3. Una vez en la página de personalización del tema, busque "CSS adicional"Opciones.

¿Por qué crear temas hijo?

Para garantizar que las futuras actualizaciones del tema no sobrescriban las personalizaciones que haya realizado, se recomienda crear yUso de temas hijo. Los temas hijos pueden realizar cambios en el tema sin afectar a los archivos principales del tema original.

Paso 2: Añadir CSS personalizado

A continuación, repasaremos el "CSS adicional" añade un estilo personalizado a la barra de administración de WordPress para desplazarla a la parte inferior de la página.

Código CSS personalizado

entrar enCSS adicionalDespués de la página, copie y pegue el siguiente código:

cuerpo {
    margin-top: -28px;
    padding-bottom: 28px;
}
body.admin-bar #wphead {
    padding-top: 0;
}
body.admin-bar #footer {
    padding-bottom: 28px;
}
#wpadminbar {
    top: auto !important;
    abajo: 0;
}
#wpadminbar .menupop .ab-sub-wrapper {
    abajo: 32px;
}

Este fragmento de CSS desplaza la barra de administración de la parte superior a la inferior de la página y ajusta el espacio entre la parte superior e inferior de la página para acomodar la nueva posición de la barra de administración.

Función del código de interpretación

• margin-top: -28px; padding-bottom: 28px;: Reduzca el espaciado en la parte superior de la página dejando espacio en la parte inferior para que la barra de administración no se solape con el contenido de la página.
• #wpadminbar { top: auto !important; bottom: 0; }: Fuerza a la barra de administración a fijarse en la parte inferior de la página en lugar de la posición superior por defecto.
• .ab-sub-wrapper { bottom: 32px; }: Asegúrese de que el menú desplegable de la barra de administración se muestra correctamente en la parte inferior.

Paso 3: Previsualizar y guardar los cambios

Una vez que haya terminado de añadir el CSS, haga clic en "Guardar cambios" y vuelva a la página principal del sitio para ver el efecto.

Si todo va bien, guarde la configuración y publique los cambios. Su barra de administración de WordPress debería haberse desplazado de la parte superior a la inferior de la página.

Otras cuestiones y consideraciones

1. Problemas con la visualización de usuarios no registrados

Después de seguir los pasos anteriores y realizar los cambios, puede haber un problema con la visualización de la página que se eleva 28px cuando un usuario que no ha iniciado sesión visita el sitio. Para resolver este problema, puede añadir opcionalmente código condicional adicional al archivo functions.php para que sólo los usuarios que hayan iniciado sesión vean los ajustes de la barra de administración, y los usuarios que no hayan iniciado sesión no se vean afectados.

Paso 4: Añadir código a través de functions.php

Si desea que el ajuste de la barra de administración sólo tenga efecto para los usuarios que hayan iniciado sesión, puede hacerlo añadiendo código personalizado al archivo functions.php del tema. A continuación se muestra el código añadido:

function wpg_ubah_posisi_admin_bar() {
    if (is_user_logged_in()) {
        ?>
        <style>
            body {margen-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');

¿Cómo añadir código functions.php?

1. Inicie sesión en el backend de WordPress y navegue hastaApariencia > Editor de archivos de temas.

2. En la lista de archivos de la derecha, busque y haga clic en el archivofunciones.phpDocumentación.
3. Añada el código anterior al final de ese archivo y haga clic en "Documentos actualizados".

Este código garantiza que el reposicionamiento de la barra de administración sólo tenga efecto para los usuarios registrados y que los usuarios no registrados no vean ningún efecto, evitando así el problema de la página levantada.

llegar a un veredicto

Siguiendo los pasos anteriores, es fácil mover la barra de administración de WordPress de la parte superior a la inferior de la página, y no es necesario instalar plugins adicionales. Tanto si la personaliza mediante CSS como si añade código condicional al archivo functions.php, estos métodos le proporcionarán una forma más personalizada de presentar la barra de administración en su sitio.