Personalizar CSS de cada elemento de menú en WordPress

Personalizar CSS de cada elemento de menú en WordPress

Cuando desarrollamos plantillas para WordPress puede ocurrir que queramos un diseño de menú muy personalizado, en el que cada botón sea diferente del resto. Algo que, a priori, se antoja bastante complicado ya que el menú se genera automáticamente repitiendo el diseño de los elementos.

Sin embargo por fortuna, WordPress ha previsto esta situación y le facilita la tarea al diseñador web a través de las opciones de edición de menús sin tener que quebrarnos la cabeza modificando loops en nuestro archivo de funciones.

Para llevar a cabo la tarea, nos vamos al menú Apariencia > Menús de nuestro panel de control y una vez dentro, desplegamos la pestaña superior Opciones de pantalla y activamos el checkbox Clases CSS. Esto permitirá que ahora a cada botón del menú le puedas asignar un estilo de CSS individual. Los límites a la hora de personalizar los elementos y la estructura lo marcará tus conocimientos sobre hojas de estilo, claro.

Aunque sólo he hablado de usar CSS para personalizar el diseño, las clases que apliquemos nos podrían servir también como identificadores para trabajar con programación, usando JavaScript por ejemplo. Existe un amplio abanico de posibilidades.

2 respuestas a «Personalizar CSS de cada elemento de menú en WordPress»

  1. Avatar de Tipos de Toldo
    Tipos de Toldo

    Buenas tardes, podria decirme que codigo css debo poner en un menu para que aparezca en horizontal todo los submenus, en vez de vertical?
    La web en cuestion es tiposdetoldo.com
    Como vera en el menu hay un desplegable pero la direccion de los submenus es vertical y querria ponerlo horizontal ya que tiene demasiados objetos y se despliega hacia abajo demasiado poco con lo que deja submenus sin aparecer.
    Gracias de antemano.

    1. Avatar de Jesús Tovar

      Hola, si el submenú tiene muchos elementos tendrás un problema similar al ponerlo en horizontal. En tu caso lo que yo haría sería dividir el menú en varias columnas para que quede más compacto, de tal modo que no se salga ni en horizontal ni en vertical.
      Esto podrías hacerlo usando la clase sub-menu de un modo parecido a lo siguiente:

      @media (min-width:834px) {
          .sub-menu {
              width: 460px;
              column-count: 3;
          }
          .sub-menu li {
              display: inline-block;
          }
      }
      

      Si te fijas, para que estos estilos no se apliquen en la versión móvil del menú los he metido en una regla de medios y de este modo solo se aplicarían si el ancho de pantalla es superior a 834px.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *