Casi todos los temas de WordPress tienen un menú de navegación estándar. Algunos temas incluso tienen varios menús para una mejor navegación. A veces, los usuarios desean agregar un nuevo menú de navegación a su sitio web existente.

Como todos sabemos, WordPress es una plataforma de código abierto y cualquiera puede editar su código para agregar funcionalidad adicional. Quieres agregue un nuevo menú de navegación a su tema de WordPress?

Si es así, este tutorial paso a paso es para ti. Antes de comenzar, es importante comprender que editar un sitio web de WordPress existente puede ser riesgoso. Debe hacer una copia de seguridad del sitio web de WordPress y su base de datos utilizando cPanel o un complemento como UpdraftPlus.

Su tema controla el diseño de un sitio web de WordPress. Entonces tienes que editar un archivo especial del tema de tu sitio. Para eso hay diferentes posibilidades.

Puede crear y editar un tema hijo, pero si desea cambiar el sitio web en vivo, puede descargar el tema de WordPress en su computadora y usar XAMPP para el desarrollo.

En este tutorial, lo guiaré a través de un proceso fácil de seguir que le enseñará cómo agregar un nuevo menú de navegación usando cPanel.

¿Cómo y qué archivo tienes que editar?

Mencioné un archivo de tema específico que necesitas editar, pero ¿cuál? Como ya sabrás Features.php es uno de los archivos esenciales para un sitio web de WordPress; Debe agregar una función con el Codex del menú de navegación de WordPress para registrar un nuevo menú.

Para hacer esto, necesita saber dónde encontrar dicho archivo.

Déjame guiarte a través de:

Paso 1

Inicie sesión en su cuenta de hosting web y abra esa Administrador de archivos porque todos los datos de su sitio web están disponibles allí.

paso 2

Abrir en la barra lateral izquierda public_html.

Nota: Si está editando un subdominio o la instalación de WordPress para su sitio está en una carpeta diferente, deberá abrirla. De lo contrario, verá todas las carpetas y archivos de su dominio raíz en public_html.

paso 3

Encuentra el contenido de wp Carpeta y haga clic para abrir. Todo el contenido de un sitio web de WordPress está en esta carpeta.

Paso 4

Ahora puede ver complementos, temas, cargas, etc. Como se mencionó anteriormente, debe editar un tema. Así que abre el “asignaturas“Portafolio.

Paso 5

Puede ver todos los temas de WordPress activos e inactivos que tiene. Abra su carpeta de temas actual. Por ejemplo, abro “veintisiete“.

Paso 6

Si se desplaza hacia abajo, puede encontrar fácilmente esos Features.php Archivo – Botón derecho del ratón escoger Para editar.

Paso 7

Aparecerá una ventana emergente, solo elija Para editar y puede ver una nueva pestaña para editar el código de functions.php. Aquí debe agregar una nueva función.

function new_nav_menu() {
register_nav_menu('my-new-menu',__( 'Primary Menu' ));
}
add_action( 'init', 'new_nav_menu' );

ahorrar el archivo y abra su panel de administración. Ir Apariencia >> Menúsy puedes ver “menú principal“. Esto significa que lo ha registrado correctamente.

¿Cómo visualizo el menú de navegación?

Para verlo, deberá agregar otro código al archivo en el que desea ver el menú.

Por ejemplo, si desea agregar un nuevo menú de navegación en el encabezado debajo de un menú existente, debe pegar el código en este archivo.

A muchas personas también les gusta agregar varios menús al pie de página.

Dependiendo de su selección, abra el archivo. Abierto al área de la cabeza header.phppara el pie de página footer.php y busque el lugar donde desea mostrar su nuevo menú de navegación.

Déjame mostrarte el código.

<?php
wp_nav_menu( array(
'theme_location' => 'my-new-menu'
'container_class' => 'new-menu-class' ) )
?>

Guarde el archivo en la esquina superior derecha y podrá ver su nuevo menú.

Puede que no se vea como usted quiere porque tiene que enmarcarlo para que se vea mejor. Puede utilizar la clase de contenedor como “nueva clase de menú” a.

Déjame mostrarte un ejemplo de CSS.

div.new-menu-class ul {
list-style-type: none;
list-style: none;
}
div.new-menu-class li {
padding: 20px 25px;
display: inline;
}

Puedes personalizar el CSS a tu gusto.

¿Cómo fusiono varios menús de navegación?

Algunos de ustedes también pueden tener una pregunta sobre cómo agregar varios menús con la misma función. Puede usar la misma función que agregar un solo menú de navegación.

Suponga que desea agregar dos menús de navegación. El código es el siguiente:

function new_nav_menu() {
register_nav_menus(
array(
'my-new-menu' => __( 'Primary Menu' ),
'another-new-menu' => __( 'Secondary Menu' )
)
);
}
add_action( 'init', 'new_nav_menu' );

Como puede ver, utilicé una matriz en este código donde puede ver los nombres de dos menús. Si guarda el archivo y va a. caminar Apariencia >> Menús, verá dos nuevos menús de navegación.

De manera similar, puede usar un código específico para mostrarlo, tal como lo haría para el menú individual. En el código para el segundo menú necesitas el ‘ubicación_temaPosibilidad. Déjame enseñarte como:

<?php
wp_nav_menu( array(
'theme_location' => 'another-new-menu',
'container_class' => 'second-new-menu-class' ) );
?>

Como puede ver, también cambié la clase de contenedor para usar un CSS diferente para el segundo menú. Es tu decisión. Puede usar cualquier clase que desee. Se trata de conveniencia.

Nota: No olvide que debe agregar un código para registrar un menú en functions.php y para mostrar un menú debe seleccionar el archivo usted mismo.

Puede utilizar la clase CSS para diseñar menús.

¿No es fácil agregar un nuevo menú de navegación?

Si es un novato, le recomendamos que realice dichos experimentos en su servidor local. Puede usar XAMPP, WAMP o MAMP para esto.

Editar un archivo de codificación en un sitio web activo es peligroso. Un pequeño error puede destruir el diseño de todo su sitio web. Por lo tanto, también se recomienda habilitar el modo de mantenimiento para que sus lectores no vean nada si algo sale mal.

Estoy seguro de que el paso a paso es fácil de seguir y puede agregar un nuevo menú de navegación a su tema de WordPress en poco tiempo. Es importante conocer la clase Container porque la necesitará para diseñar sus menús.

Se requiere un poco de conocimiento de CSS. Mencioné un ejemplo que te ayudará, pero no se aplica a todos. Quería darte una idea.

Cada desarrollador tiene un estilo de programación diferente. Puede utilizar una clase diferente o incluso una nueva ubicación de tema.

Si aún tiene problemas, no dude en contactarnos en cualquier momento.