¿Cómo convertir código CSS en un plugin de WordPress?

ramonjosegn · 6 Oct 2016

Hola chicos/as.

Semanas atrás me encontré este código CSS y lo implementé en mi sitio web en WordPress, pero me toca hacer malabares para insertarlo y para poder reutilizarlo.

Me preguntaba si no habría una forma sencilla de usarlo en WordPress, ya sea como si fuera un plugin o así...

El código es el siguiente (sólo es un menú con efecto de "over" algo que no encuentro para WordPress ni con plugins ni sin plugins)

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

Gracias.

Jonay Basanta · 6 Oct 2016

¿Te refieres algo así? http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

ramonjosegn · 6 Oct 2016

margarafefwe dijo:
¿Te refieres algo así? http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

Eso es lo que estoy haciendo, usando un plugin de CSS personalizado mezclado con Post Snippets donde creé 3 shortcodes para poder abrir y cerrar el shortcode... una locura...

Me gustaría tener un plugin sencillo y ya ... que haga todo el trabajo... pero ni idea cómo crear un plugin basándose en CSS (bueno básicamente ni idea de cómo crear un plugin para WordPress).

Jonay Basanta · 6 Oct 2016

Tendrás que añadir si o si php. ¿Si tendrás algún curso?

ramonjosegn · 6 Oct 2016

margarafefwe dijo:
Tendrás que añadir si o si php. ¿Si tendrás algún curso?

Ni idea... tendría que mirar... no recuerdo haber visto ninguno, sólo algunos generadores de plugins (básicos) online...

Me va a tocar contratar a alguien y que haga el trabajo sucio jajajaaa...

Jonay Basanta · 6 Oct 2016

ramonjosegn dijo:
Ni idea... tendría que mirar... no recuerdo haber visto ninguno, sólo algunos generadores de plugins (básicos) online...

Me va a tocar contratar a alguien y que haga el trabajo sucio jajajaaa...

No tendrás más remedio, si quieres tenerlo rápidamente. Si no, a aprender php. Suerte

Menorah · 6 Oct 2016

Una sola cosa: child theme. Busca en google.

Con un tema hijo (child theme) podrás modificar la plantilla a tu antojo, sin tocar el theme principal. Saludos.

ramonjosegn · 6 Oct 2016

Menorah dijo:
Una sola cosa: child theme. Busca en google.

Con un tema hijo (child theme) podrás modificar la plantilla a tu antojo, sin tocar el theme principal. Saludos.

Así es como lo tengo, pero es que si tuviera que crear otro menú... puf.... más y más shortcodes y más y más códigos CSS y además que cargan en todas las páginas... me va a tocar instalar otro plugin para que sólo cargue en las 4 páginas que lo uso... no tiene mucho sentido...

iamcholo · 6 Oct 2016

Esos iconos son de Font-awesome? Si es así, hay un plugin que reemplaza los class de los <a> a <li> parar mostrar esas imágenes.

Te lo dejo acá, y si no es así, envíame PM, y si no es mucho lío lo vemos.
https://wordpress.org/plugins/font-awesome-4-menus/

ramonjosegn · 17 Oct 2016

iamcholo dijo:
Esos iconos son de Font-awesome? Si es así, hay un plugin que reemplaza los class de los <a> a <li> parar mostrar esas imágenes.

Te lo dejo acá, y si no es así, envíame PM, y si no es mucho lío lo vemos.
https://wordpress.org/plugins/font-awesome-4-menus/

Sí, son iconos de Font-awesome pero me preocupa más el efecto de "over" que no lo tiene casi ningún plugin de WordPress sencillos... y los pocos que hay están desactualizados...

O se quiero que el fondo de mis links se iluminen (ojalá en una caja como la del CSS que estoy compartiendo de ejemplo).

ramifenili · 17 Oct 2016

¿Podrás dejar la URL de tu web? O si sabés ver el código de fuente para al menos ver cómo está armado el menú actual.

Cicklow · 17 Oct 2016

[MENTION=1576]ramonjosegn[/MENTION] a ver si entendi, tienes el menu ese del ejemplo y quieres modificarle los items del menu desde un panel en WP?
ese menu va en un widget, en el post, donde?...
elp lugin que es realmente lo que quieres que haga?

ramonjosegn · 18 Oct 2016

cicklow dijo:
[MENTION=1576]ramonjosegn[/MENTION] a ver si entendi, tienes el menu ese del ejemplo y quieres modificarle los items del menu desde un panel en WP?
ese menu va en un widget, en el post, donde?...
elp lugin que es realmente lo que quieres que haga?

En realidad ya lo tengo funcionando en mi sitio web, pero con snippets (no soy programador no sé cómo armar un plugin), el problema es que me toca 40 snippets para generar los diferentes colores, los shortcodes de inicio, los shortcodes finales... si tuviera que volver a crear un menú, la verdad es que creo que ni me acordaría. En este enlace se puede ver que ya lo tengo funcional pero la verdad nada práctico para insertarlo. Sería genial tener un plugin para usarlo. Lo estoy usando en páginas simplemente.

iamcholo · 18 Oct 2016

Yo estoy viendo varios menus en la página, pero la pregunta es: ¿Cómo estás generando los menus en la página (de rutas) ?
1. A través de Menus, y le agregas el contenido al post usando

HTML:

[do_widget "nombre del menu"]

2. Creas el HTML a mano, y lo agregas al contenido del post.

ramonjosegn · 18 Oct 2016

Hola [MENTION=150432]iamcholo[/MENTION]

Puf, es una pregunta un poco larga de responder...

Los menús los generé así en su día (no me preguntes si podría volver a hacerlo porque creo que no):

En el plugin Custom CSS añadí el CSS personalizado para el menú, añadiendo además nuevos colores

En el plugin Post Snippets añado 3 shortcodes (creo) cada uno para crear el shortcode de inicio, el contenido y el de fin.

Post Snippets permite variables así que en esas variables va el contenido...

No creo que sea la mejor forma de hacerlo (es más tener tantos shortcodes ya me está liando, no recuerdo cuál es mío, cuál es de algún plugin, etc).

Si quieres comparto el código pero no creo que tenga mucho sentido...

iamcholo · 18 Oct 2016

Pienso que el problema pasa más por los plugins cargando distintas versiones de Font-Awesome (FA).
Si te he entendido bien, el problema es que no se muestra el hover en el icono. ¿no?
Si es así, tu código es el correcto https://codepen.io/anon/pen/NROYjw siempre y cuando se cargue la versión 4.6.1 de FA.

El detalle es que en tu sitio, usas tanto la versión 4.6.1 de FA que carga el plugin rescue-shortcodes; y otra versión (4.0.3) desde el plugin olevmedia-shortcodes.

Si no deseas tocar los menús o el código que se genera con los shortcodes, pues, tu solución es sólo cargar la versión correcta de FA.

ramonjosegn · 18 Oct 2016

Hola [MENTION=150432]iamcholo[/MENTION]

En realidad el problema es que no quiero tener 200 códigos para esa bobada... lo que me gustaría es tener un plugin sencillo en WordPress para poder hacerlo, y estaba preguntando si había alguna posibilidad de genera un plugin que maneje CSS, ya que el sistema no tiene mucho más...

Esa era mi duda... he visto algunos sitios web para crear plugins pero ni idea cómo funcionan (no soy programador), y he visto incluso plugins para crear plugins...

Pero el caso es que necesito simplificar ese sistema... No puedo tener 20 shortcodes para esa bobada... la carga de mi web está en 3 megas por página, es evidente que necesito rebajar esa carga de forma urgente, más teniendo en cuenta que el número de visitas desde móviles se ha disparado (un 50% ingresan desde móvil aprox.)

(La otra opción sería tener un plugin de menús... pero no he conocido ninguno...)

Cicklow · 18 Oct 2016

ramonjosegn dijo:
...

que necesitas que haga el plugin, ejemplo que coloques en el post:
MENU_BONITO["item 1"=>"http://url","item 2"=>"http:url"]...etc y que salga?

ramonjosegn · 18 Oct 2016

cicklow dijo:
que necesitas que haga el plugin, ejemplo que coloques en el post:
MENU_BONITO["item 1"=>"http://url","item 2"=>"http:url"]...etc y que salga?

Pues, sí, esa sería la idea... poder insertar el texto del link y el link y poder tener colores diferentes en el hover para cada sección (tengo una azul, una naranja, una negra...)

iamcholo · 19 Oct 2016

Acabo de hacer un plugin sencillo para que puedas generar los menús para las rutas (según el diseño) usando el gestor de menús de WordPress.
¿El problema? Es que deberás migrar todos los menús que ya tienes a menús nativos de WordPress.
(Sí, manualmente, a menos q lo revise y vea una forma de cómo migrarlo)

La idea es crear un nuevo menú (Ejemplo: RUTAS 0-99), añadir enlaces. Luego, usar en siguiente shortcode junto con el nombre del menú:

HTML:

[menu name="RUTAS 0-99" class="orange"]

Aquí tienes una idea de cómo es el flujo, en imágenes y el código del plugin.

¿Cómo convertir código CSS en un plugin de WordPress?

ramonjosegn

Jonay Basanta

ramonjosegn

Jonay Basanta

ramonjosegn

Jonay Basanta

Menorah

ramonjosegn

iamcholo

ramonjosegn

ramifenili

Cicklow

ramonjosegn

iamcholo

ramonjosegn

iamcholo

ramonjosegn

Cicklow

ramonjosegn

iamcholo

Temas similares