Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

WordPress práctico: Creación básica de temas

Añadir un nuevo menú al footer

¡Prueba gratis durante 10 días

nuestros 1291 cursos !

Prueba gratis Mostrar modalidades de suscripción
Y para terminar el capítulo vamos a crear un nuevo menú. Pasaremos por todas las tareas para añadir ese nuevo menú: configurarlo en el customizer, vincularlo a una plantilla y, para terminar, organizar sus contenidos con CSS.

Transcripción

Otra tarea que solemos tener que hacer es la de crear menús. Vamos a ver cómo podemos crear un menú en el footer. Aquí podemos ver que el footer, en realidad, es esto de aquí abajo. Está incluso sin formatear, y no lo voy a formatear en este video, pero sí vamos a ver cómo añadir un menú en esta parte. Vamos a tener que ir por pasos, y vamos a tener varios pasos. Lo primero de todo, necesito crear un nuevo contenedor para el menú que voy a hacer. Así que voy a abrir functions.php, .y dentro de functions.php voy a buscar register nav menus. Este método se ocupa de definir menús que voy a añadir al tema. Así que voy a copiar el que ya está definido, que es menú 1, y voy a pegar ese mismo código, pero cambiándole el identificador de menú que ahora va a ser menú 2, y además le voy a poner otro nombre, le voy a poner el nombre footer. Este nombre es el que aparecerá luego en customizer, en personalizar. Lo guardo y ya he creado la posibilidad de añadir un nuevo menú. Este contenedor no está añadiendo el menú en sí mismo. De hecho, si cargo la página, veremos que en el footer no hay nada porque al footer no le he dicho que cargue nada. Tendré que irme a la plantilla que se ocupa del footer, que es footer.php, y dentro de ella, tendré que añadir ese menú nuevo. ¿Esto cómo lo voy a hacer? Puedo reutilizar código de otras partes. Yo sé que tengo en el header un menú. Me muevo hasta donde está ese header, y veré que tengo toda la función php wp nav menú, que es la que sirve, precisamente, para añadir un menú. La copio y ahora la voy a pegar en la parte de abajo del footer. Eso sí, no quiero el mismo menú, quiero el nuevo. Entonces cambio el identificador del menú que quiero cargar por el 2. De hecho, también puedo cambiar el identificador del html, o sea, el atributo id del html, lo puedo cambiar por footer-menú. Cuando vaya ahora al navegador y lo recargue, porque he hecho cambios sobre la estructura, de repente, aparece este nuevo menú. Hemos añadido el menú. El siguiente paso es personalizarlo, quiero decir, no quiero todas estas entradas, quiero solamente tres. Voy a hacer clic en personalizar, me voy al apartado menús, ubicaciones de menús, y aquí aparece ya este nuevo footer efectivamente. Lo tengo aquí abajo. Dentro de los posibles menús tengo varias opciones, lo que pasa es que no quiero ninguna de estas. Podría decir que fuesen solo las páginas, pero no, realmente lo que quiero es añadir un menú nuevo. Voy a añadir un nuevo menú, le voy a poner de nombre footer, pulso en Crear menú, y ahora tendré que añadir items. Entonces le voy a pedir que tenga página de ejemplo, página con los comentarios desactivados y por último lorem ipsum. Le he añadido ya estos menús, podría añadir entradas, categorías, etc., pero solamente quiero añadir esto. Cierro. Mi siguiente paso: asignar este menú nuevo que he creado, footer, a este menú que tengo dentro del footer. Asi que lo selecciono e inmediatamente me sustituye los contenidos de ese menú. Ya tengo el menú preparado, ahora solo me queda darle estilo. Me vuelvo al código. Aquí, lo suyo es trabajar sobre el footer, pero no tengo ningún archivo sccs que se ocupe de ese footer. No pasa nada, Igual que hice con header, lo puedo hacer con el footer. Dentro de la carpeta sight, añado una nueva carpeta que se llame footer. Dentro de esa carpeta que se llama footer, voy a añadir un nuevo sass file al que voy a llamar guion bajo para que me lo reconozca footer. Ya tengo este nuevo archivo sass. Sobre este nuevo archivo sass, puedo añadir nuevos estilos, pero antes de añadirlos, tendré que hacer que este nuevo archivo lo encuentre style ccs. En concreto, tendré que abrir sight css, copiar el código de importación del header y sustituirlo por el footer. Copiar el footer, lo pego, lo guardo. Ahora todo lo que añada a este footer inmediatamente será recuperado por sass. Voy a empezar añadiendo un m space, o sea, un ámbito. Quiero que todo lo que añada a partir de ahora, dependa exclusivamente de este footer, así que añado esa etiqueta footer. Por otro lado, voy a añadir toda una serie de estilos, que ya tengo preparados. Van a ser bastante simples, no voy a complicar nada este ejemplo. En principio, los elementos del menú, estos li, voy a hacer que no tengan puntos delante, que se coloquen unos delante de otros, o sea, horizontalmente, y que no tengan margen arriba y abajo, y que tengan margen entre ellos. Luego haré que los enlaces que tengan no tengan ningún tipo de decoración. Por otro lado, para que estos enlaces aparezcan centrados, hay varias formas de hacerlo, pero lo que haré será meter este menú, que estoy añadiendo en el footer, en un dif que tenga una clase, que sea a que me sirva para controlar lo que me va a mostrar. Voy a añadir a ese dif la clase menu footer container, y ahora voy a copiar el código que se ocupa de la carga de ese menú, y lo voy a meter dentro. De ese modo, voy a conseguir que al contenedor de ese menú se le aplique text aligne center, y, por tanto, todo ese menú aparezca centrado. Por otro lado, me tengo que asegurar que este identificador, este footer menu, coincida exactamente con el identificador que pido que se añada dentro del footer, o sea, este footer menu. Voy a guardar el código. Al moverme hasta el navegador, vemos que ya me ha añadido perfectamente ese menú en la parte inferior de la página, en el footer. Quedan aún pequeños detalles, como por ejemplo, un margen que tiene por defecto. Voy a inspeccionar. Vamos a ver que como se heredan muchas clases de muchos sitios, muchas características, puede haber pequeñas modificaciones. Aquí estamos viendo que cul está heredando un margen determinado. Si pusiese este margen como cero, aparecería centrado perfectamente. Aparte, también tendré que añadirle un paddidng cero; de esta manera, sí queda ya bien alineado. Puedo copiar este mismo código. Vale. Volver al editor, añadir este pequeño código y ahora sí, cuando vuelva al navegador, —tengo que recargarlo porque he hecho cambios en el propio navegador— ahora sí que aparece todo centrado.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.