176 | ¿Se puede convertir una plantilla html en un theme de WordPress?

En el episodio 176 de WordPress semanal te hablo de si es posible convertir una web hecha con HTML y CSS en un theme de WordPress. Vamos allá. ¿Hola, hola, soy Gonzalo de Gonzalonobarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin, porque? Porque ya lo sabes, no hay mejor inversión que la de crear y gestionar tu propia web con WordPress. Y hoy vamos a hablar de si es posible convertir una plantilla de HTML en un thing de WordPress, o sea que es algo digamos muy relacionado con la gestión y la creación de páginas web con WordPress. Y este es un tema interesante, no sólo por el hecho de si es posible o no hacerlo, sino porque que bueno, ya te adelanto que sí es posible y en ese proceso de hacerlo, de pasar de una plantilla HTML a un thing de WordPress nos puede aportar mucho, ya sea desde el punto de vista de que lo necesitemos en este momento, que tengamos una web hecha desde hace mucho tiempo directamente con HTML, CSS y demás y queramos poder gestionarla, poder convertirla en una web con WordPress o ya sea desde un punto de vista en el que quieres aprender a desarrollar y este es un muy buen punto de partida, o directamente que a lo mejor te quieres dedicar a esto profesionalmente y es un muy buen nicho de mercado, es decir, dedicarte a esto, que la gente que tenga webs hechas con HTML y quieran pasarse a WordPress, pues tú hacérselo como un profesional y como tu trabajo. Entonces, vamos a hablar de todo esto a lo largo del episodio, pero antes, como siempre, vamos a hablar de las novedades ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues bien, tenemos dos novedades principales, Una que como cada semana, ya sabéis que todos los martes publico un vídeo nuevo de la zona código. La zona código es ese lugar donde os enseño a modificar vuestra web, modificar pues el aspecto, el funcionamiento, pero todo ello sin utilizar plugins y. Y en este vídeo, que es el vídeo, voy a echarle un vistacito que lo tengo por aquí, es el vídeo 127 ya de la zona código, os enseño a mostrar post en las páginas de categoría y es súper interesante porque te enseño a crear una especie de blog para cada categoría de producto que tú tengas dentro de WooCommerce. Y básicamente lo que vas a poder conseguir es vincular las entradas de tu web, con los productos de tu web. ¿Cómo lo haces? Pues asignando las mismas categorías a los dos y esto va a permitir que si tú estés en una página de categorías, imagínate que vendes, pues no lo sé, camisetas y tu visitante se va a la página de camisetas, pues que además de ver los productos que tengan que ver con las camisetas debajo pueda ver las entradas del blog que también tengan que ver con camisetas. Y esto es muy interesante desde un punto de vista de la intención del visitante. Si el visitante llega a tu web porque tiene claro que quiere comprar, pues está bien que le muestre los productos, pero imagínate que acaba ahí pero. Pero todavía no tiene muy claro qué comprar, dónde comprar, a lo mejor en el caso de las camisetas, qué materiales comprar, pues si tú en ese momento con la intención que tiene ese visitante en concreto le ofreces contenido específico para él, que más que un producto que en ese momento todavía no lo tiene muy claro, le estás ofreciendo una entrada, un artículo donde le explicas justo lo que él quiere, pues imagínate esto, lo que te puede suponer y lo que puedes conseguir para después pasar a la siguiente parte de la intención de ese visitante que ya será seguramente comprar una vez se ha informado bien y sabe lo que quiere. Bueno, esto es un ejemplo para que lo veas, pero lo que te enseño básicamente en este vídeo es hacer esto técnicamente y sin plugins ni nada, ya es el vídeo, recuerda 127 de la zona código, si eres suscriptor tienes acceso completo a todos los vídeos a los que publico cada semana y a los cursos que precisamente como estamos a final de mes, pues tenemos curso nuevo y es el curso precisamente de cómo pasar de HTML a WordPress y. Y este curso es fantástico por las tres cosas que te decía, por si tienes una web en HTML y quieres pasarla WordPress, por si quieres aprender a desarrollar, es un punto de partida fantástico porque nos metemos en cosas como por ejemplo el Loop de WordPress, por supuesto crear áreas de widget, áreas de menú, que eso ya lo hemos visto en el curso de WordPress avanzado, pero aquí lo vemos aplicado a un caso real, es decir, pasamos una web que existe en HTML con sus archivos CSS, JavaScript, la pasamos y la convertimos en un thing de WordPress totalmente funcional. Y bueno, luego como te comentaba, si quieres dedicarte a hacer esto de forma profesional, pues también este curso es fantástico para ti, lo tienes aquí en la parte de enlaces, en las notas del programa. Fantástico. Pues una vez visto eso, vamos con el plugin de la semana, que en este caso es para añadir shortcodes en los menús. El plugin se llama Shortcode in Menus, el nombre está muy bien elegido y te permite pues eso, directamente pegar con cualquier shortcode en los elementos de menú para que se pueda ver el contenido correspondiente. Por ejemplo, muchas veces tenemos un plugin para poner iconos para compartir en redes sociales y lo ponemos donde queramos en nuestro theme a través de un shortcode. Pues este shortcode tú vas a poder ponerlo en a lo mejor un elemento de menú o en un menú concreto, ya sea en el footer, en el menú de navegación superior, donde lo tengas en tu web y eso va a hacer que se muestre los iconos de redes sociales. ¿Y por qué es interesante este plugin? Pues porque esto por defecto no se puede hacer, tú no puedes, si pegas un shortcode en la parte de menú no te funciona, necesitas un plugin que lo habilite y este plugin te lo habilita, pero básicamente te permite directamente poner el shortcode. El uso es muy sencillo, de nuevo se llama Shortcode in Menus, los que queráis echarle un vistazo tenéis el enlace en las notas del programa y recordad que este es el episodio 176 de WordPress semanal. Bien, una vez vistas las novedades y el plugin de la semana, ahora ya sí saltamos al tema central. ¿Se puede pasar una web de HTML o hecha con HTML a WordPress? Pues bueno, lo primero que vamos a hablar es si es posible, y ya te digo que la respuesta corta es sí. Los que veáis las notas del programa en el esquema que dejo vais a ver que simplemente pongo sí, ni siquiera lo desarrollo más. Ya os digo que es posible y ya está, ahí no hay mucho más en lo que entrar. Pero vamos con lo importante, ¿Por qué querríamos pasar de HTML a WordPress? Bueno, lo más importante es que WordPress es un gestor de contenidos y eso te va a permitir precisamente que puedas gestionar lo que tú tengas en tu web. Si tienes una web simplemente a lo mejor para mostrar un servicio, pues la página inicio es nosotros nos dedicamos a. Pues no lo sé, vender lo que sea, o nos dedicamos al servicio X, aquí nos puedes contactar y aquí es nuestra dirección. Si tu web va a ser simplemente eso, pues quizás ni te merezca pasar la WordPress, porque si ya la tienes en HTML y estás mostrando esa información, que es una información que nunca vas a cambiar, pues te da igual. Ahora, si tienes contenidos, si vas a querer modificar esos contenidos de la página principal de un blog que puedas tener y vas a publicar contenido periódico o de cualquier otra página, necesitas una gestión fácil de esa web y que puedas cambiar los contenidos de forma sencilla y no tanto por la parte externa, que al final se va a ver igual, sino porque por dentro, tú que tengas un panel de administración, puedas editar todo eso de forma, como te digo, fácil, que puedas publicar contenidos al momento y además de forma visual con el editor de WordPress normal o si ya añadimos plugins para diseñar y esos como Elementor, pues también, pero sobre todo que puedas cambiar textos, imágenes, menús de navegación, partes concretas de una página principal. Todo eso si lo haces con WordPress lo puedes hacer de forma muy sencilla, mientras que si lo haces con una web al uso de HTML, CSS y JavaScript, pues tienes que meterte en el index HTML o en las páginas concretas HTML y modificarlo a través de código. ¿De acuerdo? Pues básicamente facilitarte la vida es lo que vas a conseguir cuando pasas de HTML a WordPress. Bien, y ahora ¿En qué consiste este proceso por dentro? ¿Cuando nos ponemos a hacerlo? ¿Qué requiere que hagamos, ¿Qué tenemos que hacer cuando queremos pasar una web que funciona simplemente con HTML, CSS y JavaScript, por ejemplo, a pasarla a que sea por ejemplo un theme de WordPress? Bueno, lo primero es que estamos pasando de un lenguaje más básico como es el HTML a un lenguaje más complejo ya de programación como es PHP. Aunque siempre vamos a usar HTML, el HTML siempre va a estar mezclado, es la base, el HTML y el CSS son la base de las páginas web, pero luego usamos lenguajes de programación para hacer cosas más avanzadas. Y esto es lo que hacemos precisamente cuando pasamos de HTML a WordPress. Convertimos los archivos de la web original en un thing de WordPress y para eso tenemos que cambiar a php muchas cosas. ¿Qué más cosas hacemos o en qué consiste para hacer pasar de HTML a WordPress? Pues consiste en automatizar todo lo que se pueda para que este cambio que estamos haciendo tenga sentido. ¿Por ejemplo, cuando nosotros ponemos un logo en una web con HTML, lo que hacemos que es? Entramos al archivo, ponemos un enlace, ponemos la imagen de nuestro logo y ya está. Y el enlace pues seguramente haremos que lleve a la página de inicio. ¿Qué pasa si quieres cambiar el logo? Te tienes que entrar al archivo de código de tu web, cambiar esa imagen por otra y. ¿Y en WordPress cómo lo hacemos? En WordPress nos vamos al menú Personalizar identidad del sitio, Subir logo y lo tenemos. Para conseguir hacer esto, por supuesto tendremos que hacer cambios de los archivos para que esto sea posible. Eso es un ejemplo de automatizar todo lo que se pueda. Y luego por supuesto este cambio también consiste en que todos los textos y los contenidos se puedan gestionar desde WordPress. Y para esto también tendremos que hacer modificaciones al código, porque si por ejemplo tenemos una parte donde mostramos nuestros archivos o nuestras publicaciones del blog, que las mostramos su imagen, otra imagen, otra imagen y cada una con su contenido, si nosotros queremos modificar esas entradas del blog, tendremos de nuevo que acceder a los archivos y modificarlas por el código. Mientras que si ponemos el código correspondiente vamos a conseguir que siempre se busque a ver qué hay dentro de WordPress, del panel de administración y directamente se muestre. Ese tipo de cambios enfocados con hacer todo fácil y automatizar son los que vamos a tener que hacer por código a esos archivos HTML y demás para convertirlos de verdad en un thing de WordPress y sacar verdadero partido a lo que supone tener una web dentro de WordPress. Fantástico. Vamos al siguiente punto que es cómo se pasa. Ya hemos dicho qué vamos a hacer, cómo va a ser el proceso y demás. Ahora, ¿Cómo lo hago técnicamente? ¿Qué pasos tengo que seguir? Bueno, el primer paso es convertir los archivos originales en un theme. Esto es por ejemplo el index HTML que tendríamos en cualquier web hecha con HTML, que básicamente nos muestra la página de inicio, pues pasarlo a PHP y el primer paso es renombrar ese archivo por index PHP. Otros pasos para convertir esos archivos en un thing es crear un style CSS, que es un requisito indispensable para tener un theme dentro de WordPress. Después esa web original de HTML, CSS y JavaScript vincula estos archivos que dan los estilos y la funcionalidad como el CSS y el JavaScript se vinculan de una determinada forma cuando tenemos una web hecha con HTML, sin embargo cuando la tenemos con WordPress hay que vincularlo de otra forma, se llama de otra manera, que es básicamente ponerlo en cola, tú lo pones en cola y ya en esa cola WordPress o el servidor, el sistema lo coge cuando lo necesita, eso hay que tenerlo en cuenta porque en WordPress es diferente a cómo se hace con con una web, al uso de HTML y demás. El siguiente paso es crear lo necesario y vamos a crear por ejemplo áreas de widgets, que si estás familiarizado con WordPress pues ya las conocerás para que casen o para que sustituyan la forma normal en la que pondrías contenido y se haga así mucho más fácil. Imagínate que tienes por ejemplo una página de inicio en la que tienes varios bloques, en una parte tienes una parte que pones sobre mí, en otra parte tienes una llamada a la acción con un botón de contáctame o contrátame o haz lo que quieras y en otra parte abajo del todo tienes un formulario de contacto o lo que sea. Pues de nuevo, si esto lo editamos con HTML tenemos que entrar en el código, cambiar todo y demás, mientras que si convertimos por ejemplo esas zonas en áreas de widget, yo voy a poder desde el panel de administración de WordPress poner un widget de texto y escribir el texto de forma normal con el editor de WordPress de forma sencilla, poner negrita, centrar no sé qué, no sé cuánto y todo desde el panel de administración. Entonces este paso es muy importante, es hacer que todas esas partes que habría que hacer a mano sean accesibles desde WordPress y una forma fantástica de hacerlo es con áreas de widgets. Siguiente paso, tenemos que crear áreas de menú, porque todas las webs tienen un menú, menú de navegación arriba, alguno puede tener abajo o en otro lado, depende de la web. Pues claro, si lo hacemos por código, esos menús hay que cambiarlos por códigos, cuando cambia un enlace o queremos poner un elemento de menú nuevo, imagínate el el rollazo de tener que entrar en los archivos y cambiarlo por código, Pues bueno, hay una forma en la que lo que hacemos es sustituir todo eso para que entre en contacto con la forma de WordPress de llevar los menús y que después cada vez que nosotros añadamos un elemento de menú nuevo a nuestra área de menú, pues que nos aparezca directamente. Lógicamente si no lo habilitamos, si no lo especificamos, no va a funcionar. Pues esto es algo que haremos cuando estamos pasando una web de HTML a un thing de WordPress. Siguiente paso, seguramente si vas a publicar contenidos como un blog o como a lo mejor tu portfolio o lo que sea, vas a necesitar que conforme tú escribas o crees esos contenidos se muestren en la parte frontal de la web. Y esto se hace con el Loop de WordPress, que es un concepto bastante complejo pero que se puede llegar a hacer de forma relativamente sencilla. Es complejo porque se puede hacer muchísimas cosas, se puede utilizar el loop de WordPress normal o se puede utilizar un custom loop, que es lo que sería un loop personalizado y básicamente te permite comprobar si hay contenido en tu web y mostrarlo en función de lo que tú le digas, por ejemplo, muéstrame todas hasta 8 entradas que sean de las categorías esta, esta y esta, esto tú puedes decidirlo con el loop, pues eso es algo que tendrás que tener en cuenta si quieres publicar contenido digamos periódico, más allá del contenido estático que pueda ser una página sobre mí, una página de contacto o lo que sea, me refiero a contenido, lo que serían las entradas de WordPress. Siguiente paso, o bueno, no necesariamente por orden, pero también vas a necesitar dar soporte a funcionalidades típicas de WordPress, como por ejemplo la posibilidad de añadir imágenes destacadas. Esto es algo que tú le tienes que dar soporte, lo tienes que registrar dentro de WordPress y se hace con una línea de código, es súper sencillo, en el archivo functions php o otro de los archivos súper súper esenciales dentro de WordPress, además del style CSS por supuesto. Otra opción o digamos otra cosa a la que le puedes dar soporte como te comentaba antes, es por ejemplo esto que te digo de subir el logo. Si tú por defecto intentas irte a la parte de identidad del sitio, donde normalmente ponemos el título de nuestra web, la descripción, lo del logo no aparece, es algo a lo que hay que darle soporte. Hoy en día la mayoría de sims ya lo traen, ¿Por qué? Pues porque tienen esa pequeña línea de código que dicen doy soporte para que se pueda subir el logo, pues esto es algo que se debe hacer y luego ya en función de cómo sea esa web HTML que estás pasando a WordPress, pues tendrás que pulir esos detalles, seguramente también por CSS, a lo mejor algo de JavaScript, pero en general este es el proceso por el que pasaríamos cuando queremos pasar una web HTML a un theme de WordPress. A grandes rasgos siempre nos vamos a encontrar con detalles, con complicaciones, pero esto es básicamente lo que tienes que tener en mente a lo que te vas a enfrentar. Si quieres pasar una web, como digo, de HTML a WordPress y luego para que puedas hacer técnicamente todo esto sin problemas y siguiéndolo paso a paso, pues para eso tienes el curso recién salido, como te digo, de cómo pasar una plantilla de HTML totalmente funcional. Cogemos una plantilla de una página, la típica que le vas dando a los elementos del menú y te va pasando por las distintas secciones, ¿De acuerdo? Y la convertimos en un theme de WordPress 100 % funcional, un thing que podrías coger y dárselo a un cliente para que lo use o utilizarlo para ti mismo. Va a funcionar a la perfección y todo, absolutamente todo, se va a poder gestionar desde el panel de administración, no va a haber que hacer absolutamente nada desde el código. Una vez terminemos por supuesto el proceso de convertir ese theme que viene con sus archivos CSS, sus archivos JavaScript, a convertirlo como digo en un theme de WordPress y te va a servir de práctica para adentrarte en el desarrollo de WordPress si es que quieres ir más allá, porque por supuesto que este tema puede llegar a ser mucho más complejo. Esto es un punto de partida que de verdad te va a venir muy bien porque te vas a encontrar con conceptos súper útiles y te va a permitir crecer. Y después ¿Qué puedes hacer? Coger otro theme que sea, o perdón, otra plantilla que sea de HTML y que tenga sus archivos también CSS y JavaScript, que hay un montón de páginas que los ofrecen de forma gratuita, el que yo uso en el curso de hecho es uno de esos que puedes encontrar en páginas como freecss. Com y otras páginas que ofrecen plantillas así de forma gratuita, pues después te puedes animar, coger otra e intentar lo mismo, lo mismo que ya has hecho siguiendo el curso con los archivos que nosotros utilizamos, pues una vez ahí te puedes ir animando, animando, animando y de verdad es una gran forma de crecer si es que quieres hacerlo. Y nada más, en el curso vemos todo paso a paso, como te digo, vas a tener los archivos disponible para descarga, ya sabes que si eres suscriptor pues tienes acceso a este y al resto de cursos y si no te invito a que lo pruebes porque además tienes 15 días sin compromiso alguno, es garantía 100%, entras, estás los 15 días, pruebas los cursos, pruebas los vídeos de la zona código, me contactas por el soporte que también va incluido y te respondo de forma personalizada. Pruebas todo y si después de los 15 días o durante esos 15 días decides pues que no te gusta o que no es lo tuyo o lo que sea, me contactas. Oye Gonzalo, que no quiero seguir sin preguntas ni nada, te hago la devolución y listo. Esto lo hago para que lo pruebes porque yo te puedo decir que es muy bueno, que está muy bien, que tienes este curso, que tienes el otro, pero. Pero al final lo interesante es que lo pruebes. Así que como digo, sin compromiso alguno, accedes, si quieres seguir pues nada y si no me contactas y como digo te hago la devolución. Los que aún no lo sepáis ya Sabéis que son 10 euros al mes, como digo, sin permanencia, con garantía de devolución, un nuevo curso al mes, soporte conmigo, descargas de lo que podamos utilizar a lo largo de los cursos y un vídeo semanal para que aprendas a personalizar tu web a través de de código. Sí, recordad que tenéis un montón de recursos en la parte de los enlaces con todo lo que he comentado en este episodio. La forma más sencilla de acceder a los enlaces es ir a la web, vais a Gonzalo es podcast, buscáis este episodio que es el 176 y ahí pues tenéis todos los enlaces. Y nada más, si te ha gustado el episodio de hoy ya sabes que siempre te pido un favor con el que me puedes echar una mano y es dejar una valoración en iTunes, es muy fácil, vas a tu aplicación de Apple Podcast, buscas WordPress semanal, te vas a la parte de reseñas y dejas la reseña que consideres. Los que estáis escuchando desde otro lugar o si me estáis viendo en algún sitio, un comentario, un me gusta en Ivoox o en cualquier plataforma de vídeo a lo mejor si lo estáis viendo, lo que sea que podáis hacer, os lo agradezco muchísimo. Así que nada más por este episodio, nos seguimos escuchando. Adiós.