Cómo personalizar los temas de WordPress

La personalización del tema de WordPress te ayuda a presentar tu marca de forma única y diferenciar tu negocio de la competencia.

Muchos propietarios de sitios recurren a servicios de desarrollo profesional para la personalización de su WordPress. Aún así, con una buena estrategia y algo de diligencia, puedes aprender a editar temas en WordPress tú mismo. Esta habilidad siempre es beneficiosa ya que te permite controlar la apariencia visual y la funcionalidad de tu sitio web.

En este tutorial, veremos por qué deberías personalizar tu tema de WordPress. Además, te mostraremos cómo modificar los temas de WordPress según tus preferencias usando diferentes opciones de personalización, así que sigue leyendo.

¿Por qué debería personalizar mi tema de WordPress?

Independientemente del tema que elijas, anulará la apariencia de tu sitio web con su diseño preestablecido. Al personalizar el tema, podrás darle a tu sitio web un aspecto único, distinguiéndolo de otros sitios web que usan el mismo tema.

Al ser fácilmente reconocible y memorable, tu sitio web se destacará del resto. Esto, a su vez, aumentará la reputación y el reconocimiento de tu marca.

WordPress viene con un tema preestablecido que puedes cambiar más adelante. Hay una gran cantidad de temas gratuitos o Premium entre los que puedes elegir dependiendo de la idea o negocio de tu sitio. Puedes encontrar un tema directamente en el Directorio de temas de WordPress o en un marketplace de confianza.

A continuación, puedes ver todos los beneficios de personalizar el tema elegido.

• Diferenciar tu sitio web de tus competidores

Si has revisado temas anteriormente, probablemente hayas notado que algunos de ellos están diseñados para promover nichos específicos. Sin embargo, incluso estos temas nicho tienden a enmarcarse de manera más general. Por lo tanto, necesitarás editar el tuyo para que tu sitio web de WordPress se destaque del resto.

• Apelar a tu audiencia

Es posible que el tema elegido no coincida exactamente con tus requisitos o expectativas con respecto al color, otros elementos y funcionalidades. Los colores y el diseño correctos pueden influir significativamente en la forma en que tus visitantes perciben la singularidad de tu marca. Muchas marcas incluso registran los colores que usan para inculcar un impacto duradero en la percepción visual de su audiencia.

• Proporcionar estructura y eficacia

Los sitios web mejor valorados están bien organizados y proporcionan un diseño intuitivo. Con eso en mente, debes esforzarte por mejorar la efectividad de la apariencia de tu sitio web y generar una experiencia de usuario positiva.

• Añadir funcionalidad

Recuerda que la personalización del tema de WordPress es crucial para establecer la apariencia y el estilo general de tu sitio web. Sin embargo, si deseas agregar más funcionalidad a tu sitio web, puedes instalar varios plugins de WordPress.

El repositorio de plugins de WordPress contiene numerosos plugins gratuitos y de pago, que proporcionan funcionalidades básicas o más complejas como abordar la optimización de WordPress y funciones de seguridad. Por ejemplo, con la ayuda de un plugin como WooCommerce, puedes convertir tu blog en un sitio de comercio electrónico.

La conclusión es que al modificar tu tema de WordPress, tienes la oportunidad de expresar el punto de vista de tu marca y hacer una declaración. Tu sitio web es posiblemente uno de los activos de marca más importantes; considéralo el rostro de tu marca. Por lo tanto, debes personalizar tu tema en WordPress para obtener lo mejor de él con el objetivo de atraer y mantener a tu audiencia.

Cómo personalizar los temas de WordPress – 3 formas fáciles y 2 avanzadas

En esta sección, profundizaremos en los pasos prácticos de cómo personalizar tu sitio de WordPress. Aquí, te guiaremos a través de varios enfoques diferentes en WordPress para editar un tema, así que sigue leyendo.

Edita tu tema de WordPress con el editor de sitio completo (versión beta) (Fácil)

La edición completa del sitio (FSE) es parte del proyecto Gutenberg, que extiende la función de edición de bloques más allá de las páginas y publicaciones. Puedes usar este editor de sitio basado en bloques dependiendo del tema que elijas y la versión de WordPress en la que se ejecuta tu sitio. Necesitas al menos WordPress 5.9 (o una versión superior) y un tema compatible con bloques para aprovecharlo.

Por el bien de este tutorial, usaremos el tema predeterminado Twenty-Two ya que está basado en bloques, complementando el lanzamiento de la versión beta de FSE.

Para acceder al Editor del sitio completo, inicia sesión en tu panel de WordPress y navega a Apariencia > Editor.

Una vez cargada, la pantalla de FSE te permite personalizar el diseño de tus páginas de WordPress en bloques. En resumen, todas las partes de la página se separan en elementos de bloque, y puedes crear bloques reutilizables para la coherencia del diseño.

Varios conceptos clave están cubiertos en el Editor del sitio completo, y los abordaremos brevemente a continuación.

• Puedes añadir varios bloques desde el botón de signo “+” en la parte superior izquierda de la pantalla para formatear el contenido de texto, el logotipo del sitio y el título, añadir multimedia u otros widgets. Puedes arrastrar y soltar bloques para lograr el aspecto deseado para tu sitio web.
• Desde la pestaña Bloques Patrones, puedes seleccionar diseños de bloques únicos para tus páginas.

• Carga el menú Estilos haciendo clic en el círculo en blanco y negro en la esquina superior derecha para personalizar aún más los colores, el diseño y la tipografía.

• Crea, edita, previsualiza y elimina plantillas desde el Editor del sitio pulsando el botón del logotipo de WordPress en la esquina superior derecha. Por defecto, carga la plantilla de la página de inicio de tu sitio web.

Ten en cuenta que puedes crear una página con una sola plantilla o combinar partes de la plantilla y patrones de bloques.

• Puedes acceder a la interfaz de edición de Plantilla desde la barra lateral izquierda, donde puedes crear y editar plantillas de páginas y publicaciones. Por ejemplo, hay una plantilla estándar para las páginas 404 Error que puedes modificar para alinearlas con tu diseño. También puede crear una página de contacto personalizada y configurar un formulario de contacto para tu sitio en vivo, y más.

• Para crear bloques estructurales reutilizables que se puedan usar dentro de las plantillas, navega al editor Elementos de la plantilla . Desde esa sección, puedes personalizar las partes del encabezado y pie de página de tu sitio de WordPress.

Dado que el editor del sitio completo está basado en bloques, el personalizador de temas y los widgets están ocultos por defecto. Aparecen en Apariencia solo cuando tu sitio tiene un plugin que requiere estas características.

En general, el editor de bloques es una innovación en la personalización de temas de WordPress, ya que permite a los principiantes crear sitios web hermosos sin codificación. Aunque los temas basados en bloques no son muy comunes todavía, los desarrolladores de temas eventualmente se pondrán al día.

Usa el personalizador de temas para editar tu tema de WordPress (Fácil)

Para personalizar temas clásicos como Astra, que aún no son compatibles con el editor completo del sitio, puedes usar el Personalizador de temas de WordPress. Esta herramienta heredada te permite modificar temas de WordPress en tiempo real. Dependiendo del tema que estés usando para tu sitio de WordPress, hay diferentes conjuntos de cambios que puedes hacer en tu sitio desde tu panel de administración.

Puedes acceder desde Apariencia > Personalizar o desde el botón Apariencia > Temas > Personalizar en la miniatura del tema activo.

Esto carga la página Personalizar desde la cual puedes aplicar cambios a tu tema de WordPress y ver el resultado inmediatamente. Puedes elegir entre varias opciones de personalización disponibles en la barra lateral izquierda.

Desde esa barra lateral, puedes acceder y modificar todas las características incluidas en tu tema. Las más comunes entre los temas clásicos de WordPress son la configuración de la página de inicio, los esquemas de color y los fondos.

Cómo modificar el título y el eslogan de WordPress

La página de personalización del tema te permite modificar el título y el eslogan de tu sitio y ver cómo se verá en tu sitio inmediatamente. Expande el grupo de ajustes Identidad del sitio y modifica el texto para hacer esto.

Verás que el nuevo texto aparece en la vista previa en el lado derecho a medida que escribes. Una vez que estés satisfecho con el resultado, haz clic en Publicar y se implementarán los cambios.

Personalizaciones adicionales de temas de WordPress

Dependiendo de tu tema, puede haber opciones adicionales en esa página. Por ejemplo, Astra incluye constructores de encabezado y pie de página. Con estos constructores, puedes añadir ciertos elementos al encabezado y pie de página de tu sitio y crear diseños únicos.

También puedes codificar personalizaciones de CSS adicionales o comprobar cómo se ven tus cambios en diferentes tamaños de pantalla.

Además, puedes crear menús de navegación y añadir widgets a través del personalizador de temas. También hay otras características de personalización para mejorar el rendimiento general de tu tema de WordPress.

Por ejemplo, el tema Astra te permite habilitar la carga de fuentes locales de Google. Las fuentes cargadas localmente pueden reducir significativamente el número de solicitudes externas que genera tu sitio para mostrar el formato de tu contenido. Como resultado, esto mejora el rendimiento general de tu sitio web de WordPress al acelerarlo.

Personalizar los temas de WordPress con un Page Builder/Framework (Fácil)

WordPress es un potente CMS que te permite personalizar tu tema usando un plugin de creación de páginas. Un plugin de creación de páginas popular y fácil de usar es el plugin Elementor, que es un editor visual de arrastrar y soltar. Con su diseño intuitivo, cualquiera puede crear sitios web de aspecto profesional y píxeles perfectos sin una sola línea de código.

Elementor te da un control completo sobre cada elemento del sitio web e incluye más de 40 widgets y funciones. Puedes acelerar el proceso de creación de tu sitio aún más aprovechando los kits y plantillas creados por el diseñador.

La versión Pro de Elementor te permite editar elementos de tus temas de WordPress como Encabezado, Pie de página, Entrada única y Página de archivo.

El plugin está listo para Gutenberg, es totalmente receptivo y ofrece herramientas y mejoras para ayudarte a crear un sitio web impresionante.

Otro framework popular para la construcción de sitios web es Divi by Elegant themes. En esencia, ese es un tema de WordPress que incorpora una amplia gama de características para crear sitios web. Divi tiene una opción de editor visual, más de 800 diseños predefinidos y una función de prueba dividida.

Este tema Premium incluye un constructor tipo “Lo que ves es lo que obtienes” (WYSIWYG) que te ayuda a crear sitios web con un diseño único. También puedes editar cada elemento de tu sitio directamente en la pantalla, viendo los cambios inmediatamente.

Con Divi, puedes crear tus propios diseños y guardarlos o exportarlos/importarlos en otros sitios Divi. Otra característica de Divi es el Administrador de color, que sugiere paletas basadas en tus selecciones anteriores. Eso te ayuda a mantener la coherencia del diseño en la apariencia de tu sitio web. La plataforma flexible e intuitiva de Divi te permite crear hermosos diseños interactivos para convencer a tu público objetivo.

Editar un tema de WordPress desde el Editor de archivos de tema (Avanzado)

Los archivos de tema de WordPress se almacenan en el espacio de tu cuenta de hosting web. Puedes acceder y editarlos usando el Gestor de archivos en tu proveedor de hosting o directamente desde tu panel de WordPress > Apariencia > Editor de archivos de tema.

Ten en cuenta que para editar los archivos del tema, necesitarás un cierto nivel de dominio de PHP o CSS. Además, WordPress desaconseja editar los archivos directamente en tu sitio en vivo, ya que los cambios pueden romper tu sitio o perderse en una actualización del tema.

Incluso si estás entusiasmado con la edición de código, no recomendamos hacerlo en tu sitio en vivo (conocido como “cowboy coding“). En su lugar, sugerimos editar el código del tema en un sitio de ensayo o crear un tema hijo.

El editor de archivos de tema te permite alterar todos los archivos relacionados con tu tema de WordPress desde la interfaz respectiva. Todos los temas contienen los siguientes archivos que puedes editar para ajustar su diseño: style.css, functions.php y archivos de plantilla. Los temas personalizados pueden incluir archivos adicionales dependiendo de su conjunto de características.

Hoja de estilo (style.css)

El archivo style.css contiene todas las características relacionadas con el diseño de un tema, como fuentes, colores y diseños. Puedes alterar la apariencia de tu sitio web añadiendo CSS personalizado y haciendo cambios en este archivo.

Functions.php

El archivo functions.php define la funcionalidad y características de un tema de WordPress. Este archivo tiene todos los menús personalizados, logotipos, widgets e imágenes destacadas codificadas en PHP.

Archivos de plantilla de tema

Los archivos de plantilla de tema combinan HTML, código PHP y etiquetas de plantilla para definir los diseños de página de WordPress. Los cambios en estos archivos afectarán la forma en que se muestran tu página 404 personalizada, las páginas de publicación y las páginas de archivo.

Aún así, antes de considerar editar los archivos de tu tema de WordPress desde tu panel, debes saber que incluso los plugins de seguridad impiden el acceso a ellos. Dado que el Editor de archivos de tema proporciona acceso directo a los archivos de tu tema, muchos plugins de seguridad (como Security Optimizer) lo desactivan para evitar que los hackers inyecten malware.

Personaliza tu sitio usando un tema hijo (Avanzado)

Usar un tema hijo para personalizar tu tema de WordPress se considera una práctica recomendada al editar el código de tu tema. Con este enfoque, puedes implementar cambios de forma segura sin preocuparte de perderlos después de actualizar tu tema. Más aún, evitarás romper tu sitio ya que tus cambios afectarán solo al tema hijo y no al padre.

¿Qué es un tema hijo de WordPress?

Un tema principal de WordPress es cada tema que contiene una pila completa de archivos y activos del tema. Al mismo tiempo, un tema hijo de WordPress hereda todas las características y funciones del tema padre.

De acuerdo con WordPress Codex, un tema hijo en WordPress tiene la siguiente definición:

Un tema hijo hereda la apariencia del tema padre y todas sus funciones, pero se puede usar para hacer modificaciones en cualquier parte del tema. De esta manera, las personalizaciones se mantienen separadas de los archivos del tema principal. El uso de un tema secundario te permite actualizar el tema principal sin afectar las personalizaciones que has realizado en tu sitio.

Los temas secundarios te permiten hacer modificaciones portables y replicables en tu tema mientras los mantienes separados del tema principal.

Cómo crear un tema hijo

Para crear un tema hijo, debes configurar los archivos style.css y functions.php en una carpeta separada dentro de la estructura de archivos de WordPress. En esa carpeta que lleva el nombre de tu tema hijo, puedes crear plantillas y aplicar varias modificaciones. Cuando se actualiza el tema principal, las alteraciones que realizaste en el tema secundario permanecerán intactas.

El método más sencillo para crear un tema hijo es usar un plugin como el Child Theme Wizard. Después de instalarlo, se activa automáticamente y puedes encontrarlo en la sección Herramientas en tu Panel de control.

Allí, selecciona un tema principal del menú desplegable, completa el nombre que deseas darle a tu tema secundario y presiona el botón Crear tema secundario. Unos segundos más tarde, verás un mensaje de “éxito” que se ha creado tu tema hijo.

Luego, dirígete a Apariencia > Temas y activa tu tema hijo. ¡Eso es todo! Puedes empezar a personalizar tu WordPress implementando cambios en el tema hijo.

7 consejos y trucos para editar temas de WordPress

• Consejo 1.Haz siempre una copia de seguridad de tu sitio web antes de editarlo

  Para estar seguro, asegúrate de crear una copia de seguridad de tu sitio antes de personalizar tu tema de WordPress. De esta manera, si algo sale mal, puedes restaurar tu sitio desde la copia de seguridad y hacer que funcione de nuevo en poco tiempo.

• Consejo 2Intenta personalizar sin editar el código

  Intenta evitar alterar el código de tu tema de WordPress si no eres un desarrollador profesional. Los archivos de temas son delicados y un simple error de codificación puede deteriorar todo tu sitio web, haciéndolo inaccesible. Por lo tanto, es más seguro usar opciones fáciles de usar como el Personalizador de temas o un creador de páginas para personalizar tu tema de WordPress.

• Consejo 3Utiliza un sitio de ensayo para las personalizaciones

  La forma más segura de aplicar personalizaciones de temas de WordPress es creando un entorno de ensayo para tu sitio. Un sitio de ensayo es una copia de tu sitio web, donde puedes realizar tareas como actualizar y probar nuevos plugins o diseños sin afectar tu sitio en vivo.

  Si eres un cliente de SiteGround, puedes aprovechar la herramienta de ensayo de WordPress en tu Site Tools. Con él, puedes crear sin esfuerzo un sitio de ensayo, administrarlo y lanzarlo para reemplazar tu sitio en vivo cuando estés listo.

  Al editar tu tema de WordPress en un sitio de ensayo, tu sitio en vivo permanecerá intacto incluso si algo sale mal.

• Consejo 4Crea un diseño adaptable

  Dado que los teléfonos inteligentes, tabletas y dispositivos de todos los tamaños de pantalla son una gran parte de la navegación web, crear un diseño de tema receptivo es esencial. Tu sitio debe mantener una apariencia consistente en todos los dispositivos para mantener a tu público objetivo. Por lo tanto, recuerde comprobar si los cambios en el diseño y la funcionalidad de su tema de WordPress se ven apropiados en todos los tamaños de pantalla.

• Consejo 5Accesibilidad

  Por otro lado, si deseas llegar a un público más amplio, también debes esforzarte por personalizar tu tema para su accesibilidad. Estudios muestran que 8,1 millones de personas tienen algún tipo de discapacidad visual, que requieren el uso de pantallas lupa/lectores o que necesitan páginas de mayor contraste que se adapten al daltonismo. Más del 62% de los adultos con discapacidad usa un ordenador portátil y el 72% usa un smartphone.

  Sin embargo, muchos sitios web no proporcionan modificaciones dex accesibilidad para que sus páginas estén disponibles para personas con ciertas discapacidades. Aparentemente, más del 97% del millón de sitios web más importantes del mundo no ofrecen la accesibilidad adecuada. Como consecuencia, más del 60% de los lectores de pantalla informan que la accesibilidad al contenido web ha empeorado.

  Los consejos clave para garantizar una mayor accesibilidad de tu sitio son evitar el texto de bajo contraste y añadir texto alternativo para tus imágenes. Marca la diferencia y recuerda probar si tus personalizaciones satisfacen las necesidades de esta amplia audiencia.

• Consejo 6Sigue los estándares de codificación de WordPress

  Todos los temas de WordPress aprobados siguen los estándares de codificación de WordPress, por lo tanto, si estás editando el código de tu tema – asegúrate de que lo haces también. Hacer un lío de fragmentos de código en los archivos de tu tema puede causar muchos problemas a largo plazo.

  Por lo tanto, intenta agregar comentarios para las ediciones de tu código y estructúralos adecuadamente, manteniendo un aspecto limpio y organizado. De esta manera, podrás identificar los cambios anteriores rápidamente.

• Consejo 7Control de versiones

  Por último, pero no menos importante, debes establecer el control de versiones de tu sitio de WordPress. Puedes hacer esto con un plugin como WP Rollback, que te permite revertir un plugin o tema a una versión anterior. Recomendamos mantener tu sitio actualizado; sin embargo, a veces, la actualización de un plugin puede dañar tu sitio web. Afortunadamente, con WP Rollback, puedes volver a una versión funcional de tu sitio web.

Resumen

Ahora tienes todo lo que necesitas para diseñar un sitio web impresionante y captar la atención de tu audiencia. Obtén reconocimiento personalizando tu tema de WordPress con cualquiera de los métodos que describimos. Usa los trucos que compartimos para pulir la apariencia de tu sitio web y destacar entre la multitud.

¡Esperamos que nuestro tutorial te haya emocionado y que estés listo para tentar a tu audiencia con tu increíble sitio web!