¿Cómo agregar clases a elementos declarados en mi shortcode de WordPress?

ramonjosegn · 4 May 2016

Hola, chicos, estoy viendo si puedo armar un pequeño shortcode para añadir un menú en mi sitio web desarrollador en WordPress.

Pero tengo una duda, cuando hay varios elementos declarados, ¿cómo hago para añadirles una clase?

O mejor dicho, tengo este código

https://codepen.io/tatarkursad/pen/WrpZay

¿Cómo hago para cambiar el código sin afectar otros elementos HTML de mi sitio web?

Gracias. [MENTION=121168]SnakeNet[/MENTION] si me puedes echar un cable...

elii01 · 4 May 2016

[MENTION=1576]ramonjosegn[/MENTION] te refieres a que en el css todo el codigo es para los divs?

De ser así en el html coloca <div class="menu"> y en el css cada vez que salga la palabra "div" sustituyela por .menu
Espero que esa sea tu duda, avisame cualquier cosa 🙂

ramonjosegn · 4 May 2016

Gracias [MENTION=130977]elii01[/MENTION] ¿y los ol, ul, li no se verán afectados en el resto del sitio web (otros plugins y demás, theme y demás me refiero)? Puf estoy flojo con el CSS, hace rato que no lo toco a ese nivel de clases...

lombervid · 4 May 2016

Si lo que quieres es cambiar todo lo que está dentro del div, pon le una clase al div y ya haces el estilo sobre los elementos dentro de esta clase. Si lo que quieres es cambiar el estilo de un li, ponle la clase al li y sobre escribes el estilo que tiene usando la clase que le pusiste y así todos los otros li conservarán el estilo actual.

Saludos.

elii01 · 4 May 2016

ramonjosegn dijo:
Gracias [MENTION=130977]elii01[/MENTION] ¿y los ol, ul, li no se verán afectados en el resto del sitio web (otros plugins y demás, theme y demás me refiero)? Puf estoy flojo con el CSS, hace rato que no lo toco a ese nivel de clases...

No, porque ahora solo se afectarán los ol, ul y li que estén dentro de un .menu
Si estuviera solamente algo como ol{...} ahí si afectaría a todo y tendrías que agregarle un class o id en algún lado si no quieres que afecte a todos.

ramonjosegn · 4 May 2016

Muchas gracias [MENTION=130977]elii01[/MENTION]

Esa sí no la recordaba... después de ¿cuándo nació el CSS como hace 20 años? sin repasar se le pasan a uno esas cosas... Genial.

Ya me estoy peleando con el shortcode, creo que tendré que dividirlo en 2 (uno para el bloque del div y otro para cada ítem y poder personalizarlo...)

Se ve genial (aunque no sé si ese menú será responsive...)

elii01 · 4 May 2016

ramonjosegn dijo:
Muchas gracias [MENTION=130977]elii01[/MENTION]

Esa sí no la recordaba... después de ¿cuándo nació el CSS como hace 20 años? sin repasar se le pasan a uno esas cosas... Genial.

Ya me estoy peleando con el shortcode, creo que tendré que dividirlo en 2 (uno para el bloque del div y otro para cada ítem y poder personalizarlo...)

Se ve genial (aunque no sé si ese menú será responsive...)

No es responsive porque fijate que el width y el height estan en pixeles, aunque por ser tan angosto.

Y para personalizar cada item, en cada li agregas un class nuevo, <li class="rocket"> por ejemplo.

ramonjosegn · 4 May 2016

elii01 dijo:
No es responsive porque fijate que el width y el height estan en pixeles, aunque por ser tan angosto.

Y para personalizar cada item, en cada li agregas un class nuevo, <li class="rocket"> por ejemplo.

Le he cambiado el ancho con %, no sé si así funcione, no creo que sea lo más mejor, pero ... eso del responsive ya me supera...

Con el shortcode el problema es que el plugin que estaba tratando (shortcoder) me estaba cerrando automáticamente los tags... entonces me cerraba con el shortcode de inicio y con el final, ya lo corregí usando mi plugin favorito para eso (PostSnippets)

elii01 · 4 May 2016

ramonjosegn dijo:
Le he cambiado el ancho con witdh , no sé si así funcione, no creo que sea lo más mejor, pero ... eso del responsive ya me supera...

Con el shortcode el problema es que el plugin que estaba tratando (shortcoder) me estaba cerrando automáticamente los tags... entonces me cerraba con el shortcode de inicio y con el final, ya lo corregí usando mi plugin favorito para eso (PostSnippets)

Con el shortcode ahí si no entendí ni papa. Si tu plantilla es responsive, entonces colocándole los width en porcentajes bastanteria para convertir este menu en responsive 🙂

ramonjosegn · 4 May 2016

elii01 dijo:
Con el shortcode ahí si no entendí ni papa. Si tu plantilla es responsive, entonces colocándole los width en porcentajes bastanteria para convertir este menu en responsive 🙂

No te preocupes. La plantilla es responsive (tengo que ver en el celular con % cómo se comporta).

Los shortcodes sólo son "fragmentos" de código repetidos. Como lo que se repite es el div / ul y luego el ítem y luego el fin-div / fin-ul pues me tocó un shortcode para cada parte, uno para el inicio, otro para los ítems, y otro para el final.

Pero el pugin Shortcoder cuando los pasas a modo visual te convierte <div> en <div></div> (chistoso el plugin).

elii01 · 4 May 2016

ramonjosegn dijo:
No te preocupes. La plantilla es responsive (tengo que ver en el celular con % cómo se comporta).

Los shortcodes sólo son "fragmentos" de código repetidos. Como lo que se repite es el div / ul y luego el ítem y luego el fin-div / fin-ul pues me tocó un shortcode para cada parte, uno para el inicio, otro para los ítems, y otro para el final.

Pero el pugin Shortcoder cuando los pasas a modo visual te convierte <div> en <div></div> (chistoso el plugin).

Cosas de wordpress que jamas me han pasado xq no he trabajado con esa plataforma. Para ver si funciona solo achica el ancho del navegador de tu pc. Si funciona el responsive debería ir adaptandose al nuevo tamaño sin que aparezca la barra de desplazamiento inferior.

ramonjosegn · 4 May 2016

elii01 dijo:
Cosas de wordpress que jamas me han pasado xq no he trabajado con esa plataforma. Para ver si funciona solo achica el ancho del navegador de tu pc. Si funciona el responsive debería ir adaptandose al nuevo tamaño sin que aparezca la barra de desplazamiento inferior.

Me ha tocado cambiar la altura a % también porque no desplazaba el resto de la plantilla... Pero ahí vamos

Ahora sólo terminar de rellenar con las cuatropocientas rutas y sus links y revisar que funcione en Windows Phone... ya que muchas personas que me colaboran usan esa platforma... lo cual me tiene aburrido tener que andar verificando todo... pero todo sea por la buena onda.

Te agradezco mucho

¿Cómo agregar clases a elementos declarados en mi shortcode de WordPress?

ramonjosegn

elii01

ramonjosegn

lombervid

elii01

ramonjosegn

elii01

ramonjosegn

elii01

ramonjosegn

elii01

ramonjosegn

Temas similares