En este tutorial aprenderás a crear un menú de botones para una intranet como el que estás viendo en pantalla.
Y lo interesante de este menú no es lo que contiene cada botón o hacia dónde nos dirige (solo haremos la parte estática) y tú luego podrás dinamizarlo, por ejemplo, utilizando el plugin Advanced Custom Fields.
Además, en el momento en que lo hagamos responsive en el tamaño de tablet el botón grande se mostrará arriba:
Y luego cuando alcance tamaño móvil se mostrarán todos en su propia fila del mismo tamaño.
Esto se logra gracias al uso de CSS Grid, concretamente gracias a lo que se llama las grid areas y es algo que estuvimos viendo en el curso de CSS Grid pero te lo quiero mostrar con un ejemplo real por si el día de mañana tienes que crear una intranet.
Cuando hablamos de intranet me refiero a esa página de bienvenida cuando te logueas a un sitio web de membresía, a una academia o a cualquier tipo de aplicación web que tenga una página dedicada al usuario logueado.
Planteo
En este caso lo voy a crear utilizando un shortcode pero tú podrías hacerlo con una plantilla de página o con lo que desees. Creo que es la forma más fácil para explicártelo y a mí personalmente me gusta bastante porque funcionaría como una especie de bloque, permitiendo que debajo le puedas asignar otro tipo de bloques.
Por otro lado, vamos a utilizar como iconos Dashicons porque son los que vienen precargados en WordPress.
Y el proceso que he utilizado para cada icono es hacer clic en Copy CSS y de ahí sacarás la propiedad content de CSS que luego usaremos.
Vamos al código
Yo trabajaré con un tema hijo del tema framework GeneratePress (tú puedes utilizar un plugin, puedes utilizar un tema nuevo o uno a medida que estés haciendo) y voy a meter todo el código en el functions.php y en el style.css.
Creamos el shortcode
En el functions.php es donde definiremos nuestro shortcode:
// Intranet buttons
add_shortcode( 'intranet-buttons', function(){
ob_start();
?>
<div class="scv-intranet-buttons">
<ul>
<li class="scv-intranet-continue"><a href="#">Sigue aprendiendo <span>Retoma la lección por donde lo dejaste la última vez</span></a></li>
<li class="scv-intranet-start"><a href="#">Empieza aquí</a></li>
<li class="scv-intranet-courses"><a href="#">Cursos</a></li>
<li class="scv-intranet-repository"><a href="#">Repositorio</a></li>
<li class="scv-intranet-telegram"><a href="#">Telegram</a></li>
</ul>
</div>
<?php
return ob_get_clean();
} );Lo logramos gracias a la función add_shortcode, donde primero pasamos el nombre del shortcode que será intranet-buttons y directamente como función de callback usamos una función anónima.
Dentro de esa función nos centramos solamente en la maquetación de forma estática con HTML, que será un listado no ordenado donde cada elemento li será un botón y le asignamos una clase concreta para luego ponerle el icono correspondiente. Finalmente dentro añadimos un enlace que será donde llevaría el botón.
Y gracias a las funciones ob_start y ob_get_clean podemos retornar todo el menú maquetado.
La ideal es que tú crees un menú conforme lo que vaya a necesitar el proyecto que estés creando con los botones que necesites.
Definimos los estilos
Ahora nos vamos a style.css y mediante el uso de CSS Grid, definimos nuestras grid areas y las nombramos usando las clases que pusimos antes, de esta forma luego podremos crear nuestra estructura.
/* Intranet */
.scv-intranet-continue {
grid-area: continue;
}
.scv-intranet-start {
grid-area: empieza;
}
.scv-intranet-courses {
grid-area: courses;
}
.scv-intranet-repository {
grid-area: repository;
}
.scv-intranet-telegram {
grid-area: telegram;
}Después le asignamos su icono y para hacer esto nos ayudamos del pseudo elemento before y le ponemos la propiedad content que nos da Dashicons.
.scv-intranet-continue::before {
content: '\f522';
}
.scv-intranet-start::before {
content: '\f348';
}
.scv-intranet-courses::before {
content: '\f126';
}
.scv-intranet-repository::before {
content: '\f203';
}
.scv-intranet-telegram::before {
content: '\f125';
}Para poder utilizar CSS Grid necesitamos un elemento que sea el wrap, el padre de todos los elementos de la rejilla. En nuestro caso será el propio listado .scv-intranet-buttons ul.
Además, como es una lista le quitamos el bullet a los elementos y todos los los posibles márgenes y paddings sobrantes.
Y definimos el gap (espacio entre elementos de la rejilla) y cuántas columnas queremos que tenga, teniendo en cuenta que será mobile-first. Por tanto, una única sola columna, donde cada botón tiene la misma altura.
.scv-intranet-buttons ul {
list-style: none;
margin: 0;
display: grid;
grid-gap: 18px;
grid-template-columns: 1fr;
grid-template-rows: 80px 80px 80px 80px 80px;
grid-template-areas:
"continue"
"empieza"
"courses"
"repository"
"telegram";
}
De momento no se están mostrando los iconos porque no le hemos dicho cuál es la tipografía que queremos que cargue y tampoco se muestran como botones porque no le hemos asignado los estilos.
Vamos a ello:
.scv-intranet-buttons ul li {
border: 1px solid #b6bfc5;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.scv-intranet-buttons ul li::before {
color: #20c789;
font-family: 'dashicons';
margin-right: 10px;
font-size: 25px;
}
.scv-intranet-buttons ul li a {
color: #32473a;
font-weight: 700;
font-size: 25px;
text-decoration: none;
}
.scv-intranet-buttons ul li a span {
font-size: 14px;
display: block;
font-weight: 400;
}Fíjate que he usado Flexbox para centrar los elementos dentro del botón y el último selector hace referencia a los estilos del primer botón, que tiene un texto secundario (dentro del span).
Hacemos el diseño responsive
Finalmente, mediante el uso de CSS Grid hacemos que el menú sea responsive y nos quede como las imágenes que te mostré más arriba.
@media (min-width: 768px) {
.scv-intranet-buttons ul {
grid-template-columns: 1fr 1fr;
grid-template-rows: 80px 80px 80px 80px;
grid-template-areas:
"continue continue"
"continue continue"
"empieza courses"
"repository telegram";
}
.scv-intranet-buttons ul .scv-intranet-continue::before {
font-size: 50px;
}
}
@media (min-width: 1024px) {
.scv-intranet-buttons ul {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 80px 80px;
grid-template-areas:
"continue continue repository courses"
"continue continue empieza telegram";
}
}Vídeo paso a paso y código completo
Si lo deseas puedes ver el tutorial en formato vídeo con mucho más detalle y explicaciones más extensas y descargarte el código completo.
Para ver este vídeo del tutorial, primero debes suscribirte.
Espero que te haya gustado y sobre todo que te resulte útil de cara a un futuro proyecto.
