Hosting WordPress Webempresa

Cómo editar las plantillas en WordPress

por | Sep 23, 2022 | Temas WordPress

Cómo editar un tema en WordPress

En este artículo te explico cómo editar las plantillas de WordPress.

He tomado como ejemplo el tema Twenty Twelve, pero lo puedes hacer extensible a cualquiera de las plantillas de WordPress compatibles con las versiones estables de WordPress o los nativos de este CMS.

WordPress ha evolucionado mucho en sus últimas versiones en cuanto a la personalización de temas, y en muchas ocasiones, para gran cantidad de pequeños sitios web que usan temas gratuitos o de los que incorpora WordPress.org por defecto en sus versiones mayores (6.0, 6.1, 6.2, etc.) este tipo de mejoras o añadidos al tema se pueden realizar desde el personalizador sin necesidad de recurrir a plugins específicos o a constructores visuales como Divi, Elementor u otros.

Modificar estos temas con las herramientas actuales que incorpora WordPress es una tarea mucho más sencilla que años atrás, lo que sin duda es un avance para la democratización de la creación de sitios web más profesionales sin tener que recurrir a desarrolladores o profesionales que realicen estas tareas por ti.

Los nuevos temas de WordPress, como el recién estrenado Twenty Twenty-Three, o TT3 como se le conoce coloquialmente, permite mejoras “nativas” como el cambio de estilos sin tener que modificar código ni realizar tareas avanzadas.

Variacciones en el tema Twenty Twenty-Three

Esto lo puedes realizar con WordPress Gutenberg, que es el “editor de bloques” oficial por defecto desde WordPress 6.0, aunque las personalizaciones no son complicadas en otros temas de la saga twenty u otros para WordPress.

  ¿Qué es la personalización de un Tema en WordPress?

 

La personalización de Temas en WordPress no es otra cosa que la mejora, cambio o añadido de contenidos del propio tema, no del sitio web.

En este caso se puede decir que actualizar un tema es:

  • Cambiar el comportamiento de los menús del sitio.
  • Cambiar la ubicación de los menús del sitio web.
  • Modificar el logo o marca que identifica el sitio en la cabecera.
  • Añadir o quitar iconos de redes sociales globales del sitio.
  • Cambiar colores del tema generales para todo el sitio.
  • Cambiar el layout del sitio para determinadas páginas o todas.
  • Cambiar o personalizar la tipografías del sitio.
  • Cambiar o personalizar el diseño de la cabecera, pie de página, barras laterales, etc.
  • Modificar la estructura del layout de la web (con/sin barras laterales, etc.)
  • Añadir CSS personalizado para mejorar o distinguir elementos de la página.
  • Otros…

No es actualizar un tema:

  • Añadir contenidos al Blog (Entradas -post-).
  • Añadir Páginas estáticas.
  • Subir imágenes a la biblioteca de Medios.
  • Cambiar el nombre del sitio (eso corresponde a Ajustes).
  • Determinar el comportamiento de los Comentarios en la web (Ajustes).
  • Configurar los “enlaces permanentes” (Ajustes).
  • Añadir banners en widgets del Tema.
  • Otras tareas asociadas a contenidos.

Cuando personalizas tu web lo que haces es cambiar el diseño y partes del comportamiento o visualización del Tema que utilizas (o del layout si usas algún Page Builder de WordPress como Divi…) de forma que se muestren conformes a tu proyecto o marca comercial y no como el diseñador o creador del Tema, por defecto, estableció.

Te pongo un ejemplo visual para que lo entiendas mejor.

Este Tema es Storefront, desarrollado por Automattic para WooCommerce, un tema muy conocido y utilizado para tiendas online.

Tema Storefront sin personalizar

El tema “Storefront” puede ser un poco personalizado, muy personalizado o totalmente personalizado, dependiendo de tus habilidades y/o conocimientos al respecto. Esto quiere decir que el límite a la hora de personalizar lo pones tu y no el tema que utilices, a no ser que sea pésimo y esté muy mal programado, en cuyo caso lo mejor es que cambies de Tema.

Tema Storefront personalizado

Al final de lo que se trata es de convertir un tema que usan miles o millones de sitios web en algo diferente, más único, y adaptado a tu imagen corporativa, de marca o de tu proyecto web.

  Cómo editar las plantillas de WordPress desde el Personalizador

 

La mayoría de Temas para WordPress pueden personalizarse sin tener que recurrir a funcionalidades propias del tema, aunque si los temas están bien programados, estas mismas funciones asociadas al tema deberían estar disponible en el Personalizador, además de las que WordPress incorpora por defecto.

¿Qué funciones por defecto incluye el Personalizador de WordPress?

  • Identidad del sitio
  • Cabecera
  • Pie de página
  • Fondo
  • Tipografía
  • Botones
  • Diseño
  • Menús
  • Widgets
  • Ajustes de la página de inicio
  • CSS adicional

Estas opciones pueden extenderse si usas otros plugins adicionales para tu tema o si tienes una versión “comercial” de determinado Tema, lo que expande las posibilidades de personalizar el tema más allá de lo habitual.

Menu de funciones extendidas del Personalizador

En esta imagen, las funcionalidades que te marco con un asterisco * son añadidas por un tema desarrollado por terceros, no por WordPress.org, y que incorpora mejoras en la personalización para sacarle más partido al Tema. Si además usas el plugin de carrito de compras para WordPress WooCommerce verás uno o varios ítems relacionados con la personalización de la parte asociada a la tienda (carrito).

Para acceder a estas funciones de tu Tema tienes que ir a:

dashboard de WordPress   Apariencia   Personalizar

Se mostrará a la izquierda los menús de opciones de personalización del tema y a la derecha la página principal de tu sitio (home) para que vayas viendo los cambios en tiempo real e incluso algunos de estos cambios los podrás realizar directamente haciendo clic en elementos de la página, como Títulos, párrafos, etc.

Areas del Personalizador de Temas

Al realizar ajustes en la zona izquierda, a la derecha se muestra la previsualización de la página de WordPress en la que te encuentres (home, etc.) y podrás previsualizar de forma interactiva los ajustes que se realizan.

Estos cambios no se aplican en el frontal de tu web hasta que no hagas clic en el botón superior izquierdo de “Personalizar” llamado Publicar, pudiendo realizar pruebas de ajuste y ver como se muestra antes de guardar los cambios.

Puedes personalizar, previsualizar y cambiar los elementos cuantas veces consideres necesario.

  Conclusiones

 

Al editar una plantilla de WordPress lo que estás haciendo es imprimir tu personalidad en el mismo, o transferir el estilo de tu marca o corporativo para que quienes visiten la web distingan en la misma tu imagen, tus colores, las tipografías que caracterizan tu estilo comercial o personal. Al final estás mostrando lo que para ti refleja tu estilo y eso los visitantes lo sabrán apreciar.

Dedícale el tiempo que sea necesario a estas tareas, que suelen ocupar mucho tiempo, ciertamente, pero al final, si haces las cosas bien, de forma organizada, consigues irradiar estilo, claridad y orden en los elementos. Lo que sin duda debe estar pensado para transmitir y captar a tus visitantes, que no solo de texto viven sino de todo aquello que les entra por la retina.

Tanto si utilizas el Personalizador de WordPress, común a todos los temas, si haces uso de Gutenberg para que los bloques sean parte del desafío de diseñar tu sitio web, o si lo tuyo son los “constructores visuales” como Divi u otros, no olvides que de lo que se trata es de confeccionar un sitio con elementos que aporten contenido al lector, visitante o comprador. Huye de los adornos y elementos estáticos o dinámicos que solo adornan, consumen recursos, pero no aportan más a tu estrategia o lo que buscas conseguir por medio de tu web.

También te puede interesar:

Por cierto, si no conoces el “editor de bloques” Gutenberg y quieres llevarte bien con él y tenerlo como aliado en tus proyectos web, ¡súmate al Curso de Gutenberg básico de Webempresa! 100% GRATUITO donde aprenderás cómo funciona y qué puedes conseguir en tu sitio usándolo.

Diseñar es un arte, y eso no está en discusión, pero hacerlo mejor o peor solo depende de ti.

¿Te ha resultado útil este artículo?

Hosting Divi - Wp Fácil - Webempresa