Ep 34 | Personalizar tu theme correctamente

En el episodio 34 de WordPress semanal te enseño las mejores prácticas para personalizar tu theme o página web hecha con WordPress. Vamos allá. Hola, hola, soy Gonzalo de GonzaloNamarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin, porque ya sabes que no hay mayor satisfacción que la de crear y gestionar tu propia página web con WordPress y eso te ayudó a hacerlo con este podcast, con el blog y por supuesto con los cursos. Y hoy vamos a hablar de un tema que me apetecía mucho, ¿Por qué? Porque yo estoy en contacto con muchos de vosotros, me escribís a través del formulario de soporte de vuestra área de suscripción y veo como desde el principio que muchos de vosotros no sabíais nada, que empezasteis con el curso de WordPress básico y habéis ido pasando al curso WordPress intermedio, al deseo, algunos habéis querido hacer una tienda online haciendo el curso de WooCommerce, otro habéis tirado por otros derroteros, pero he visto como la evolución de muchos de vosotros y la verdad que es fascinante cómo en muy poco tiempo pasas de no saber siquiera cómo instalar WordPress a empezar por ejemplo a hacer cosas como lo que vamos a hablar hoy, que es toquetear un poquito el código, por ejemplo, hacer pequeños cambios visuales, como puede ser un elemento del menú que quieres que destaque, por ejemplo, imagínate que tienes en el menú principal, tienes Inicio, Blog, Contacto, etcétera, lo que sea que tengas en tu menú principal y pues te interesa, como por ejemplo yo que tengo destacado la pestaña que pone Cursos de WordPress la tengo con un recuadro rojo, pues eso es un cambio muy sencillito que veo que ese tipo de cambios pues ya os vais animando a hacerlos y tal, entonces eso al final si te pones a buscar Internet o me preguntas a mí, es relativamente sencillo de hacer, pero hay que seguir unas buenas prácticas, tienes que preparar tu web para hacer esos cambios, porque puedes encontrar el código exacto que te permite hacerlo, pero luego dónde lo pones o cuál es la forma correcta de pegarlo o dónde pegarlo. Entonces eso es importante saberlo. Una vez que ya pasas a ese nivel, una vez que ya te atreves a hacer esos pequeños retoques, al fin y al cabo este episodio del podcast responde a una necesidad que estoy viendo que tenéis muchos de vosotros, los suscriptores de los cursos en mi web. Así que vamos a hablar de eso hoy, de cómo personalizar tu theme o tu web correctamente. Pero antes recuerda que en gonzalonamarro es cursos pues tienes todos los cursos sobre WordPress, WordPress básico, intermedio, SEO, WooCommerce, email marketing, divi que se último curso que saqué, en fin, un montón de cursos, echadle un vistazo. Gonzalo Navarro es cursos Y vamos ahora con el plugin de la semana que va muy muy relacionado con el tema de hoy. Es un plugin que te permite crear pequeños plugins para tu web. Lo que te comentaba al principio de que a lo mejor estás viendo un tutorial y te dicen copia esta función para crear un nuevo widget en tu web. Ya sabéis que en apariencia widgets, pues tenemos estos widgets que puedes colocar en la sidebar y en otros lugares. Pues una de las cosas más comunes por ejemplo, es crear una nueva área de widget, es decir, una nueva zona donde tú puedes colocar widgets y pues por ahí hay tutoriales que te explican cómo hacerlo. También depende del theme, no se hace igual en todos los themes y pues te dicen a lo mejor copia este código y pégalo en el functions PHP de tu web. Te explican cómo hacerlo, tú vas, lo copias y lo pegas. ¿Vale, pues qué hace este plugin? Este plugin precisamente te permite todos esos pequeños códigos que tú vas cogiendo por ahí o que incluso si tú eres desarrollador que los escribes tú mismo, te permite copiarlos directamente en tu panel de administración de WordPress a través de este plugin. ¿Y cómo funciona? Pues tú creas mini plugins, ellos llaman snippets, Snippets son trocitos de código y entonces por ejemplo, este código que has cogido de una web para crear una nueva área de widget, pues tú le pones un nombre, nueva área de widget, pegas el código y lo guardas. Y ahí se te ha creado un pequeño plugin que es independiente del resto de código que tú crees. Después buscas por ahí otro trozo de código que te permite hacer otra cosa, pues lo creas mini plugin para hacer otra cosa y pegas ese código. Y así vas teniendo pequeños plugins, todo muy ordenado y los puedes ir activando y desactivando sin tener que ir al archivo functions PHP ni crear tu propio plugin de funciones, que veremos después lo que es, y lo tienes todo ordenado en tu panel de administración de WordPress. Incluso te permite exportar esos plugins y utilizarlos en otras webs como un plugin normal, o regalárselo a tus usuarios, o venderlo incluso. Es decir, está muy muy bien, está muy bien desarrollado, es muy popular, lo he utilizado y está muy muy bien, lo recomiendo bastante. Y esto entronca muy bien con lo que vamos a hablar hoy. Vamos a hablar de cómo personalizar tu fin correctamente. Y como ya habrás imaginado un poquito por lo que estamos hablando, básicamente hay dos tipos de cambios que podemos hacer en nuestra web. Uno son esas pequeñas modificaciones del aspecto del estilo de nuestra web, que es como el ejemplo que te he puesto del elemento del menú que quieres destacar. Eso sería cambios de estilo, es decir, cambios con código CSS. El código CSS se utiliza para los estilos, y después modificaciones en el funcionamiento o en la estructura de la web, que ahí ya entramos en PHP, es decir, utilizando funciones. Ya sabéis que WordPress está hecho con PHP, y entonces para darle órdenes de qué cosas puede hacer de más, o incluso para decirle qué estructura debe tener en según qué ocasiones, pues se utiliza PHP. Entonces, para el código CSS lo vamos a cambiar en un lugar, y el código PHP, las funciones, las vamos a añadir o cambiar en otro lugar. ¿Y qué lugar es ese? Pues a ver, cada thing trae un archivo que se llama style CSS, que ahí es donde vienen los estilos, es decir, en teoría ahí modificarías esos estilos y el aspecto de tu web cambiaría. Como por ejemplo, resaltar un elemento del menú, como ya hemos dicho, y otro archivo que se llama functions PHP, que ahí es donde pones las funciones, las órdenes. En teoría también ahí haríamos esos cambios. ¿Por qué digo en teoría tantas veces? Pues porque lo digo porque no es una muy buena práctica. De hecho es una mala práctica hacer los cambios directamente los archivos del theme, si es que estás editando un theme, o del plugin, que también se pueden editar los plugins, pero de momento vamos a dejarlo. Para dejarlo más sencillo, simplemente vamos a hablar de themes y en general de nuestra web. Entonces, por ejemplo, los estilos nunca los cambiéis directamente en el archivo style css de vuestro thing. ¿Por qué? Porque cuando ese thing se actualice, que si tenéis un buen thing se actualizará de forma más o menos regular, el archivo se va a sobreescribir y vais a perder todos los cambios que hayáis hecho, todo lo que hayáis pegado, aunque no lo hayáis hecho vosotros mismos, sino hayáis ido copiando y pegando cosas por ahí de tutoriales en Internet para hacer lo que queríais en vuestra web, pues todo eso lo vais a perder. Entonces por eso digo que hay unas muy buenas prácticas, unas mejores prácticas para hacer todo esto. Y lo mismo con el functions php, si hacéis los cambios directamente en ese archivo de vuestro thing, pues de nuevo cuando se actualice ese archivo se va a sobreescribir y vais a perder todo, vais a perder todas las funciones que habéis escrito. Entonces ¿Cómo hacemos esto correctamente? Bueno, la forma más básica y lo que siempre debéis hacer, aunque de momento no os hayáis atrevido con la edición de código, es crear un child theme. Ya tengo un tutorial en el que explico cómo hacerlo de forma manual, que por cierto lo voy a actualizar para explicar también cómo hacerlo con un plugin, aunque os voy a poner el plugin en las notas del programa, ya os he hablado de él, se llama Child Theme Configurator, bueno es uno de ellos, hay muchos y ese funciona bien. Pues esto te crea un tema hijo de tu web. ¿Y eso qué es? Pues es una copia de tu web en la que puedes hacer cambios, esa copia es la que tú tienes activa y los cambios que hagas se van a ir haciendo ahí. Cuando digo cambios me refiero a cambios en el código, por ejemplo lo que os he comentado del CSS o poner una función nueva. Entonces si nosotros fuésemos a cambiar eso, en lugar de irnos a la carpeta de nuestro theme original, nos vamos a la carpeta de nuestro theme hijo y ahí sí el style css y el functions php los podemos editar. Entonces eso sería digamos la práctica más sencilla, la más básica y lo que tenéis que hacer sí o sí, es decir, crear el child theme lo tenéis que hacer sí o sí. Ahora, lo de editar los archivos directamente en el child theme está bien, es una práctica que podéis hacer, pero también se pueden hacer otras. Por ejemplo, puedes crear un plugin específico para las funciones, es decir, en lugar de Editar el archivo Functions PHP, creas un plugin de funciones. ¿Qué te da eso? Pues te da la posibilidad de que si tú cambias de theme, que lógicamente si cambias de theme vas a cambiar de child theme, puedas mantener esas funciones. Entonces por eso se hace a través de un plugin, es muy sencillito crear este plugin, de hecho hay plugins que te lo crean en dos o tres clics y después las funciones tú las pegas ahí en un archivo que tú llamas, lo puedes llamar como quieras, yo por ejemplo tengo uno y en lugar de llamarse functions PHP se llama funciones PHP, lo tengo en español, y ahí vas poniendo las funciones de tal forma que ese plugin te lo puedes llevar a otra web y utilizar esas funciones en otra web o puedes si cambias de theme, como ya he dicho, no perderás esas funciones. Entonces, ¿Cuándo editar el archivo Functions PHP de tu child theme y cuándo usar el plugin de funciones? Pues cuando sean funciones que sólo afectan a un thing en concreto. Por ejemplo, si yo hago cambios que solo quiero que afecten al thing que estoy utilizando ahora mismo, eso lo puedo hacer en el archivo Functions PHP del child theme, pero si son funciones que yo quiero conservar siempre son funcionalidades que quiero que ocurran en mi web independientemente del theme que yo tenga, entonces voy a colocar esas funciones en el plugin que he creado o en el plugin que os He recomendado antes. ¿Que te evita esto? Te evita crear un plugin de funciones, utilizas el plugin Code Snippets y ahí eso funciona como plugin de funciones pero a lo bestia, es decir, mucho más potente porque como digo, lo tienes todo muy organizado. Entonces vamos a recapitular. Imaginad que creamos nuestro child theme, porque es una muy buena práctica y en el caso de que vayamos a hacer o ya estemos haciendo cambios en el código de nuestra web, lo tenemos que tener sí o sí. Entonces creamos nuestro child theme, después ese child theme va a tener un archivo que se llama Functions php y otro que se llama style CSS. En el Functions php podemos añadir las funciones que sean relativas a nuestro thing, es decir, cosas que yo quiera cambiar de mi thing que sean funciones de WordPress y que sólo sean para el thing, es decir, que si yo cambio de thing, esas funciones me dan igual porque me importaban solo para alterar cosas de mi thing, pero no para mi web en general, entonces ahí irían esas funciones que tengo otro tipo de funciones que quiero mantener siempre aunque cambie de theme, pues las incluyo o en el plugin Code Snippets o en un plugin de funciones que tú mismo puedes crear. Eso en cuanto a las funciones, que ya sabéis que es el funcionamiento y la estructura de tu web. Por otro lado, el CSS podemos editarlo directamente en el style css de tu child theme. Hay otras opciones, pero para mí eso es ideal en el style CSS de tu web. ¿Qué más cosas? Eso por un lado, ya con eso pues lo tendrías, no habría ningún problema, pero luego hay otros detalles, por ejemplo hay algunos themes y algunos plugins que te vienen con una opción o con una caja especial para que tú ahí incluyas cambios, por ejemplo en el css suele ser bastante común, por ejemplo Divi, del que hace poco he lanzado el curso, trae una opción en la que los cambios por CSS los puedes hacer directamente pues ahí en un panel dentro del thing, y eso no te lo guarda en el style css del thing en sí, sino que te lo guarda aparte, entonces tú eso no lo pierdes en el caso de que Divi se actualice. Lo mismo ocurre con algunos plugins, por ejemplo Jetpack te trae esta opción de que edites el css y te lo guarda aparte también, que no lo vas a perder. Genesis Extender, que es una extensión para Genesis, ya sabéis que yo todas las páginas web la hago con Genesis, pues también trae una parte para que tú pongas tu código css, tus funciones y y todo y se quede ahí guardado y no lo pierdas con actualizaciones, pero eso ya son cosas de cada theme, de cada plugin y eso ya va a depender. Entonces para siempre estar seguro de no perder nada, es lo que te he comentado, creas un child theme y si quieres también un plugin de funciones y ahí haces todos los cambios. Este es un episodio un poquito técnico, tampoco he entrado en mucho detalle, sino que quiero que tengáis una visión global de las mejores prácticas, lo que debes tener en cuenta antes de ponerte a toquetear nada de código de tu web. Os voy a dejar unos links en las notas del programa sobre cosas que he mencionado y que podéis por ejemplo, para todo esto seguramente necesitéis acceder por FTP o por el gestor de archivos de vuestro hosting, pues tendréis que acceder a los archivos de vuestro WordPress, a la carpeta WP Content para ir a ver vuestro theme y todo lo demás. Entonces os dejo un link para ver cómo manejaros por FTP, es un vídeo que tengo que es muy sencillito y vais a ver cómo hacerlo, que es muy fácil. Otro link de cómo crear un child theme y os voy a dejar todos los link que tengo, que creo que puede que os ayude. También comentaros que tengo pendiente preparar un curso sobre el CSS, digamos básico, cositas que sin haber utilizado CSS antes podemos hacer. Entonces sería un curso muy práctico en el que os iría enseñando cómo podéis editar el CSS de vuestra web sin ser un diseñador, es decir, cómo ir empezando y vais a ver cómo poder ir entendiendo todo. Os voy a enseñar herramientas que os van a facilitar mucho la vida y eso os va a dar una nueva dimensión, porque vais a ver que podéis controlar muchísimos aspectos de vuestra web que antes os parecían incontrolables. Entonces decidme, todavía esta semana cojo votaciones, decidme los cursos que queréis que haga. Sobre la mesa están este que os cuento de CSS, también empezar a hacer ya el de Genesis, que también es un curso que me habéis pedido, ya sabéis que yo trabajo con Genesis y me encanta, también está sobre la mesa, de hecho tiene bastantes votos, cómo crear una web de suscriptores, pues con una zona de usuario para el suscriptor y demás. También está sobre la mesa cómo crear una web de enseñanza en la que puedas ir poniendo tus lecciones, incluso exámenes que pueden hacer los alumnos, es decir, hay un montón de temas sobre la mesa. Simplemente contactadme, decidme qué os apetece más. Esta es la última semana que cojo votaciones y sugerencias, bueno, la última semana digo, para el próximo curso podéis seguir enviando sugerencias, pero ya entrarán para próximos cursos, no para el curso de este mes, así que contactadme con lo que os apetezca más. Si sois suscriptores, contactadme desde la pestaña de soporte, que ya sabéis que por ser suscriptores, pues lógicamente tenéis prioridad sobre el resto de usuarios de mi web. Así que nada más, como este era un programa un poquito técnico, prefiero dejarlo así más corto, que si no entrar en más detalles pues sería un poco lioso. Así que si os ha gustado el episodio y queréis ayudarme a que siga publicando, os agradecería muchísimo una valoración en iTunes. Y a los que me escucháis desde iVoox también os agradezco mucho, mucho vuestros comentarios y vuestros me gusta. He visto que en iTunes he recibido par de valoraciones más, no he tenido tiempo de verlas, pero para el próximo episodio las comentaré por aquí, os daré las gracias por aquí, de verdad que os Lo agradezco un montón, así que nos seguimos escuchando. Adiós.