261 | El personalizador de temas de WordPress [A fondo]

En el episodio 261 de WordPress semanal te cuento qué es el personalizador de temas de WordPress, cómo usarlo, por qué varía tanto de un zim a otro y algunos trucos poco conocidos. Vamos allá. Hola, hola, Soy Gonzalo, de GonzaloNavarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mejor inversión que la de aprender a crear y gestionar tus propias webs con WordPress. Y en este episodio te voy a hablar de un tema que puede sonar muy básico, porque de hecho dedico una clase entera en mi curso gratuito de WordPress básico a este tema del que vamos a hablar, a este aspecto dentro de WordPress, Pero es uno de esos conceptos o una de esas áreas dentro de lo que hay que dominar de la parte básica de WordPress en la que veo que hay algunas dudas fundamentales. Entonces, vamos a empezar por el principio, por lo básico, que es esto del personalizador de temas. Después vamos a explicar a grandes rasgos cómo se utiliza, cómo puedes utilizarlo en tu web. Haré un repaso también por los menús o las opciones más habituales que te vas a encontrar en el personalizador de temas de tu web. Luego veremos cómo también, dependiendo de tu web, puedes tener opciones extra y también mencionaré las más comunes. Y por último te explicaré algunos trucos, entre ellos, por ejemplo, dónde se guardan los cambios, estos que haces en el personalizador de temas. Todo esto en un momentito. Pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues como cada semana tenéis un nuevo vídeo de la zona código, en este caso es el vídeo 211, y en él te enseño a crear listas numeradas inversas. Esto quiere decir, bueno, que cuando vas a crear una lista, ya sabes, una lista numerada, pues es una lista normal, lo que pasa que hay numeritos, igual que podemos poner listas simplemente con puntitos, pues las puedes poner numeradas. Bien, pues te voy a enseñar a través de HTML a hacer que esta lista sea inversa. Por ejemplo, tienes cinco elementos, tienes primero un párrafo y luego quieres listar cinco elementos en el editor de WordPress normal, en una entrada o en una página, pues que en lugar de aparecer 1, 2, 3, 4, así hasta 5, que aparezcan 54.321. Así que tienes disponible ese vídeo. Ya sabéis, la zona código está incluida en la suscripción, ya sabéis, yo tengo un único modelo de suscripción, te suscribes 10 euros al mes sin permanencia y tienes acceso a todos los vídeos publicados de la zona código, ya van más de 210, a todos los cursos ya van más de 54. Y luego pues cada semana saco vídeos nuevos y cada mes saco cursos nuevos. Luego por supuesto el soporte, en fin, que todo va incluido, así que simplemente para ver cualquiera de los contenidos solo tenéis que estar suscritos. Así que nada, espero que este vídeo os guste. Y después en cuanto a los cursos, el curso más reciente publicado es el de mailpoet, ya sabéis, es este plugin que te permite llevar el email marketing directamente desde tu web con WordPress, no tener que irte a un programa aparte como pueda ser mailchimp o alguno similar, sino que si eres de los que te gusta controlarlo desde la parte de administración y además no requieres automatizaciones muy avanzadas como las que sí puedas llevar a cabo con otros programas como Active Campaign, del que también tenéis un curso, pues entonces en mailpoint seguro que os encaja y además puedes empezar de forma gratuita con todas las funcionalidades. Ya sabéis que además de este, Pues imaginad, hay 54 cursos, pues tenéis los de WordPress básico, intermedio, avanzado, cursos más enfocados al marketing como este de Mailpoint, tenéis otro sobre email marketing, tenéis también sobre SEO, todo enfocado a WordPress o a la gestión de webs con WordPress, pero en definitiva, necesitamos muchas cosas cuando creamos webs, ya sea para nosotros o para otros, así que tenéis todo lo necesario para crear y gestionar webs de forma profesional. Ya sabéis que tenéis toda la información en Gonzalo Navarro, es precios, cómo apuntaros, todo lo que incluye y demás. Y todo esto que he comentado, los enlaces al vídeo de la zona código, el enlace al curso, al último curso publicado y demás, lo tenéis en las notas de este episodio. Así que si vais a Gonzalo es 261, es decir, 261, pues vais a poder ver no solo un resumen de lo que te voy a comentar hoy, sino también todos los enlaces que vaya comentando, como por ejemplo el enlace al plugin de la semana, que es de lo que te voy a hablar ahora y que se llama Edit Flow. Este plugin te permite colaborar con tu equipo editorial directamente desde WordPress. Incluye por ejemplo un calendario, incluye la opción de que cambies los estados de los contenidos en función de lo que tú establezcas con tu grupo de redactores o lo que sea. Puedes hacer comentarios a nivel interno, también agregar como metadatos cosas específicas de cada tipo de contenido que publiques. Puedes crear avisos para las distintas personas que se van a encargar de la creación de los contenidos en tu web. Puedes ver un historial, puedes crear grupos dentro del equipo. En fin, un poco todo lo que necesitarías para llevar, como te decía al principio, un equipo editorial. Este plugin se lo recomendé a un suscriptor que me preguntó hace ya bastante tiempo y si existía algo por el estilo, y este es el que encontré que parecía que daba más fiabilidad y que tenía mejor pinta, mejores valoraciones, estaba activo en más webs que otros plugins que hacen cosas similares. Así que de nuevo, se llama Edit Flow, pero recordad que tenéis el enlace directamente en las notas del episodio. Gonzalo es 261 y ahora ya sí, vamos con el tema central del episodio, el personalizador de temas de WordPress a fondo. Y vamos a empezar por definirlo. ¿Qué es el personalizador de temas? Bueno, básicamente es un menú dentro de tu web con WordPress al que accedes desde la parte de administración, por supuesto, y que te lleva a un panel con opciones de personalización, sobre todo del diseño del tema que tengas en ese momento activo, tema de WordPress, el Thing. Ya sabéis que en WordPress trabajamos con temas, tenemos que tener un tema instalado para poder usarlo y cada tema trae sus opciones de personalización. Y la gracia del personalizador es que los cambios que tú vayas haciendo en ese apartado los vas viendo reflejados en directo en la parte frontal de la web. Y bueno, pues puedes cambiar cosas como desde los colores de tu tema hasta modificar incluso la estructura del mismo. Y la clave aquí, como te decía, es que dependiendo del tema que tengas activo, pues vas a tener a tu disposición unas opciones de personalización u otras. Así que es básicamente eso, un lugar donde personalizas el diseño, incluso algunas funcionalidades de tu tema de WordPress del que tengas activo en ese momento. Pero, ¿Cómo se usa? ¿Cómo se usa este personalizador de temas? Bueno, ya te he dicho que para llegar a él, si estás en el menú de administración de tu web, es decir, tienes que estar conectado como administrador, pues te vas a un menú que se llama Personalizar y dentro del menú Personalizar te vas al menú Apariencia o al submenú apariencia y ahí ya apareces, como te decía yo, en la parte frontal de tu web, pero con un panel a la izquierda con esas opciones de personalización que te decía y luego a la derecha quedaría lo que es tu web, tu página web web en la parte frontal para poder ver esos cambios que vas aplicando en el panel de la izquierda y para hacer algún cambio puedes simplemente navegar en esos paneles que te digo yo que aparece la izquierda, en esas opciones de la izquierda o incluso te va a aparecer como una especie de lapicito en la parte de tu web, la parte donde se ven pues los elementos, la cabecera y todos los contenidos que hayan. Si hay una parte que es personalizable desde ahí, desde ese panel, te va a salir un lapicito y si tú haces clic en ese lapicito en el panel de la izquierda te va a ir justo a la opción que controla esa parte en la que tú has hecho clic. Verás que hay zonas donde no aparece ese lapicito, eso es porque directamente no se puede controlar desde el personalizador, a lo mejor no se pueden controlar o a lo mejor se accede desde otro lugar. Y otra característica muy interesante de esto es que puedes previsualizar los cambios para ver cómo se ven en móvil y cómo se ven en tablet antes de darle a guardar, porque todos los cambios que tú vayas haciendo los vas viendo, se van quedando ahí como en la memoria, pero hasta que no le des a publicar no van a aparecer de verdad a todos tus visitantes, sino que simplemente tú estás viendo los cambios, va viendo cómo va todo, pero se quedan como en borrador, realmente no están publicados y una vez tú estés contento con todos los cambios, incluso como te digo, con la previsualización para móvil y con la previsualización para tablet y también para pantalla grande por supuesto, pues ya puedes publicar y los cambios se hacen efectivos. Incluso tienes la opción de guardar esos cambios para seguir más adelante, que esto es algo que poca gente conoce y que vemos en el curso porque está medio escondido, hay que hacer un pequeño desplegable y lo vemos en el curso de WordPress básico, en la lección, en la clase que dedico al personalizador, que le dedico una clase entera. Pues ahí lo vemos, al igual que el resto, prácticamente todos los detalles que comenté aquí, salvo algún truquito que te voy a comentar al final, lo vemos en esa clase del curso en vídeo paso a paso, como todos mis contenidos, que ya sabéis que es gratuito el curso de WordPress básico, y que te voy a dejar el enlace en las notas del episodio para que lo veas. ¿Sí? Bien. Vale, así es como se utiliza. Tenemos nuestro panel de izquierda, vamos modificando las opciones que nos van apareciendo y en la derecha lo vamos viendo y cuando estemos contentos publicamos. Vale, pero ¿Qué opciones tengo, ¿Qué menús o qué opciones de personalización son las habituales? Bueno, como te decía, esto varía en función del tema, pero las más habituales, las que aparecen sobre todo en los temas más básicos y que seguramente aparezcan en cualquier tema, son las más estructurales. Luego puede haber algunas extra, pero estas que te voy a comentar aparecen en casi todos los temas de WordPress. Pues por un lado tenemos el menú o la opción identidad del sitio. Ahí puedes definir el título del sitio, que normalmente es el que se va a ver en la parte frontal de la web. La descripción del sitio, por si quieres ponerle lo que en inglés se llama un tagline, como una pequeña descripción o un acompañamiento al título. Por ejemplo, imagínate que estamos haciendo la web de Nike y que el título es el logo, el logo de Nike o Nike, depende de cómo tú lo digas. Y pues antiguamente al menos su eslogan es Just do it. Pues imagínate que eso lo quieres añadir y que queda bien, pues al lado del logo, debajo del logo. Pues normalmente ese tipo de cosas se ponen en la descripción del sitio, ¿De acuerdo? Y. Y luego en esta misma parte, identidad del sitio, casi siempre vas a tener una opción de mostrar o no tanto el título como la descripción, porque hay veces que simplemente quieres subir un logo y no quieres que se vea ni el título ni la descripción, o quieres que solo se vea el título, o si has subido el logo, que sólo se ve la descripción, entonces normalmente tienes la opción de elegir si se muestra o no se muestra. Y por último, un icono del sitio, o también se suele llamar favicon, o favicon, como lo solemos decir en español, que básicamente es el iconito que sale en los navegadores, en la pestaña suele salir un icono, pues lo puedes personalizar en lugar de que salga el que viene por defecto con WordPress o con el tema que tengas instalado, como Genesis que trae uno por defecto y otros temas, pues que salga el tuyo, un iconito pequeño tuyo que tú subes. Bueno, esa sería la opción de identidad del sitio. Después sueles tener una opción para colores, aquí dependiendo del tema, en los colores, pues puedes tener para el color de fondo de la web, a veces para el color de la tipografía, aunque esto no suele venir por defecto, a veces para el color de fondo del contenido en sí, imagínate dónde viene contenido, una entrada del blog y luego también el fondo de de la página web en general, es decir, de todo el body, de todo el cuerpo de la página, incluso a veces el color de fondo de la cabecera de tu web, del footer, depende del tema vas a tener más opciones o menos de colores. Después otra de las características u otra de las opciones que suele venir en el personalizador de temas, independientemente del que tengas instalado, es la opción de elegir una imagen de cabecera. La imagen de cabecera habitualmente se utiliza para poner de fondo de toda la parte de la cabecera. La cabecera suele estar compuesta por el menú de navegación y el logo o el título de la web. Lo que pasa que muchos temas utilizan la parte de la imagen de la cabecera para permitirte ponerle el logo en lugar de aparecerte como te he dicho antes en identidad del sitio. Algunos temas te dan la opción en imagen de cabecera o se hace a modo un poco de parche. Si no tiene la opción de logo, pues lo subes en la imagen de la cabecera, pero por el tamaño se coloca como ahí ya depende del tema. Después tienes la opción de imagen de fondo, que esto normalmente es para poner de imagen de fondo de la web, del cuerpo de toda la web. Habréis visto algunas webs que en lugar de tener un color de fondo tienen como una imagen, pues así se podría hacer en tu tema de WordPress desde este apartado. Después también verás las opciones de menús, que esto se refiere a los menús de navegación de tu web, porque no solo se pueden acceder desde la parte de administración y controlar desde allí, sino que también lo puedes controlar desde la parte visual. De esa forma puedes ver cómo va quedando tu menú de navegación, ya sea que lo pongas, pues no lo sé, depende de cada tema, ya sabéis que tiene distintas áreas de menú, pueden tener una, dos, tres, varias. Y entonces tú puedes ir viendo cómo queda un menú que tú has creado. Imagínate el menú con inicio, contáctame y sobre mí, pues puedes ver cómo va quedando en las distintas zonas donde tu tema te permite poner esos menús de navegación. Después tienes widgets que es similar, widgets ya sabes que son pequeños trozos de contenido que puedes poner en zonas habilitadas para ello. También tu tema al igual que trae áreas de menú, trae áreas de widget y tú puedes ir añadiendo widgets para que se vean. Y si lo controlas desde esta parte frontal, como te digo con el personalizador de temas, pues puedes ver en vivo y en directo, bueno en directo no porque tus visitantes no lo van a ver, pero tú sí, cómo van quedando esos widgets que tú vas poniendo. Imagínate el footer por ejemplo, suele estar compuesto de áreas de widget y muchas veces traen como tres áreas de widget, lo que te permite poner elementos como en tres columnas en la parte del footer, en la parte del pie de página, pues así puedes verlo antes de publicarlo, puedes ver cómo queda. Otra de las opciones que también puedes encontrar en la parte de administración, pero que tienes disponible en la parte del personalizador es el ajuste de la página de inicio. Esto te permite elegir una página para que por defecto sea la de inicio y una página para que por defecto sea la del blog, la de las entradas de tu web. La página de archivo donde van apareciendo las publicaciones nuevas, las entradas que va publicando van apareciendo en una página de archivo que puedes definir. Ya sabes que esto tiene que ser una página que lo normal es que esté en blanco porque se va a sustituir, aunque tenga contenido no se va a mostrar, se va a sustituir o se va a convertir en una página de archivo que simplemente va a ir mostrando una relación de publicaciones. Y por último, el otro elemento habitual, la otra opción habitual que sale es el CSS adicional. ¿Aquí qué puedes hacer? Pues puedes pegar o escribir CSS que se va a aplicar al tema que tienes activo en ese momento y así no tienes que editar los archivos de tu web ni nada y lo puedes hacer directamente ahí. El CSS ya sabéis que es un lenguaje que te permite controlar el diseño de tu web. Tenéis un curso de CSS básico y uno de HTML básico que yo recomiendo a todos los que queráis tener esa base y queráis llevar y gestionar vuestra propia web porque es relativamente sencillo de aprender y os da mucho desde el punto de vista de lo que podéis llegar a hacer y lo que podéis llegar a modificar en una página web. Estos son los menús o las opciones de personalización más habituales, las que os vais a encontrar seguramente en cualquier tema de WordPress que tengáis activo. Pero luego tenéis opciones de personalización menos habituales o más específicas, más que ya quedan al gusto o a la elección de otros temas. Normalmente los temas premium, los temas de pago o temas simplemente más complejos, pues traen más opciones de personalización. Por ejemplo de los populares GeneratePress, Astra, Genesis, Framework, Storefront. Todos estos como traen más funcionalidades o a lo mejor tienen un enfoque diferente de cómo se implementa, de cómo se diseña en ese tema, pues traen también más opciones de personalización. Por ejemplo la elección de la tipografía y del color de la tipografía, la posibilidad de elegir estructuralmente el diseño, por ejemplo si las páginas van a aparecer con barra lateral o sin barra lateral, lo mismo con las páginas de archivo, la página de blog, la página de categoría, cómo se van a mostrar, si se van a mostrar, no lo sé, diez entradas antes de darle a siguiente, si se van a mostrar solo 5, si se va a mostrar en columnas. Todo esto dependiendo del tema puedes llegar a tenerlo como opción de personalización. También la opción de mostrar o no las migas de pan, por ejemplo esto, los temas de Genesis traen esa opción, la opción de modificar el pie de página, ya sabéis que en el pie de página abajo del todo muchas veces sale tema creado por la empresa, tal, tal, tal, y te ponen incluso su enlace, pues muchos temas te traen la opción de modificar eso para que tú pongas tu propio copyright o para que tú hagas lo que tú quieras. Otra opción que también traen algunos temas y que es interesante es la de poner scripts, ya sea en el encabezado o en el pie de página. Los scripts básicamente son, por ejemplo, cuando quieres añadir el código de seguimiento de Google Analytics, pues es un script, pues lo copias y lo pegas. Algunos temas como te digo, en el propio personalizador te traen la opción de pegar ese código de seguimiento, así que en algunos casos no es muy buena idea hacerlo en el personalizador de temas, por lo que te voy a comentar en el siguiente punto, que es donde se guardan los cambios que se hacen en el personalizador de temas, bueno cada tema realmente si yo imagínate que tengo activo el tema Twenty Twenty One, que es el que vendría ahora mismo cuando estoy grabando este episodio directamente con WordPress, cuando haces una instalación nueva, pues todo lo que yo vaya haciendo en el personalizador de temas, en el menú Apariencia Personaliz se guarda para ese tema, es una configuración única para el tema que yo estoy usando en ese momento. Si yo cambio de tema y activo por ejemplo GeneratePress, activo Genesis Framework, activo cualquier otro, esos ajustes de personalización que yo había hecho no van a estar ahí porque no tiene sentido la parte del personalizador de temas, es personalizar para ese tema, entonces si lo cambio y activo otro no voy a ver ninguna personalización que yo haya hecho ahí, más allá de quizás si coincide que el área de menú de navegación es la misma, si coincide que las áreas de widgets son la misma, pues sí se va a recoger, pero el resto de cosas no, y salvo que borres tu base de datos, porque ahora te daré más detalles, o borres parte de tu base de datos, cuando vuelvas a activar el tema que tenías antes vas a recuperar esas personalizaciones que habías hecho porque están guardadas para ese tema, incluso la parte de CSS adicional, por eso muchas veces digo que cuando me preguntáis dónde pego el CSS, por ejemplo el que ves en mi web, pues si es algo que es único para el tema que estás usando lo puedes pegar en la parte de CSS adicional, sin embargo si es algo de CSS que quieres que se mantenga independientemente del tema que tengas activo, pues seguramente lo tengas que pegar mejor en la hoja de estilos de tu tema hijo. Y luego a modo de curiosidad y porque recuerdo que esto me lo preguntaron a través del soporte y era que donde se guarda todos estos cambios a nivel interno, a nivel de archivos y demás, me preguntó un suscriptor hace tiempo, que creo que de hecho en un episodio de preguntas y respuestas creo que lo incluí y me preguntó que donde se guardaban, preguntaba en qué archivo se guardan las modificaciones o el CSS adicional que se pone en el personalizador de temas, y la pregunta realmente es errónea desde el punto de vista en el que no se guarda en un archivo, sino que se guarda en la base de datos, concretamente en la tabla de WP Options, entonces ahí si tú vas haciendo Imagínate que activas distintos temas, haces varios cambios, todo eso se va guardando y luego WordPress ya detecta que si tú estás usando el tema en cuestión que te aplique los cambios que estén o las opciones que estén guardadas en esa base de datos. Puede sonar un poco técnico, pero bueno, para que sepas así a grandes rasgos cómo y dónde se guarda. Pero lo que sí que tienes la posibilidad es de exportar esos cambios si quieres, esas personalizaciones, por si te lo vas a llevar a otra web. Porque claro, si tú instalas, imagínate que siempre usas el mismo tema y casi siempre haces las mismas modificaciones en el personalizador, podría estar muy interesante poder exportar todos esos cambios para no tener que hacerlos cada vez que creas una web nueva. Pues se puede, hay un plugin para ello que además es hiperpopular, está activo en más de 200.000 webs. Os voy a dejar un enlace, pero vamos, se llama Customizer Export Import, el personalizador en inglés se llama Customizer, vamos, en español se llama así porque en inglés se llama así. Y bueno, recordad, GonzaloNavarro es 261, os lo dejo en el quinto punto que os he hablado de dónde se guardan los cambios hechos en el personalizador. Ahí al final os pongo el enlace al Play. Y por supuesto recordad que en la parte del contenido recomendado, donde suelo dejar enlaces también de los que voy hablando, pues tenéis la clase del curso de WordPress básico, donde cubro paso a paso cómo funciona el personalizador de temas de WordPress. Sin nada más, recuerda que si quieres formarte para crear y gestionar tu propia web o la de otros de forma profesional, Gonzalo Navarro es tienes cursos, vídeos avanzados y soporte conmigo, además de regalitos que te voy haciendo y alguna que otra sorpresa. Nada más por este episodio, nos seguimos escuchando. Adiós.