Si ha instalado un tema de WordPress pero no es del todo adecuado para usted, es posible que se sienta frustrado. Hay muchas opciones disponibles para personalizar los temas de WordPress.
El desafío es encontrar la manera correcta de hacerlo.
En este post, le guiaré a través de las opciones para personalizar su tema de WordPress, le ayudaré a decidir cuál es el adecuado para usted y le mostraré cómo hacerlo de forma segura y eficiente.
¿Prefieres ver la versión en vídeo?
Opciones Para Personalizar un Tema
Antes de que nos sumerjamos y comencemos a hacer cambios en su tema, vale la pena entender cuáles son las opciones, ya que se adaptan a diferentes situaciones.
He aquí un resumen de las opciones disponibles para usted:
- Si desea agregar funcionalidad a su tema, instale un plugin.
- Use el Personalizador en sus pantallas de administración de WordPress para personalizar las fuentes, los colores y quizás también el diseño, dependiendo de su tema.
- Si está trabajando con un tema de generador de páginas, utilice sus funciones para personalizar el diseño de su sitio.
- Si ha instalado un tema marco, utilice uno de los temas secundarios disponibles para personalizar su sitio, junto con cualquier opción de personalización viable en las pantallas de administración.
- Si su tema es específico de su sitio y se siente cómodo haciéndolo, edite el código del tema directamente.
- Si desea editar el código de un tema de terceros, cree un tema hijo.
Si desea editar el código, dispone de varias opciones, desde el editor de bloques, pasando por el Personalizador, hasta la edición de los archivos. Los veremos todos en este post, pero comencemos con la opción más simple: instalar un plugin.
¿Realmente necesitas personalizar tu tema?
A veces no es necesario personalizar el tema en absoluto: en su lugar, es necesario instalar un plugin.
Los temas dictan el diseño de su sitio: su aspecto y la forma en que muestra el contenido (utiliza nuestra herramienta de detección de temas para identificar el tema subyacente de un diseño que te guste). Los plugins añaden funcionalidad adicional.
Si los cambios que desea hacer se centran en la funcionalidad más que en el diseño, considere la posibilidad de instalar un plugin usted mismo. Puede ser un plugin que necesite escribir, uno que descargue del directorio de plugins o uno que compre.
Si desea editar el archivo functions.php de su tema, pregúntese a sí mismo:
¿Desearía mantener esta funcionalidad si cambiara de tema en el futuro?
Si la respuesta es afirmativa, ese código debería ir en un plugin, no en su tema.
Buenos ejemplos de lo que utilizaría un plugin en lugar de un tema, incluyendo la adición de widgets, el registro de tipos de mensajes y taxonomías personalizadas, la creación de campos personalizados y la adición de funciones adicionales como una tienda o mejoras de SEO.
Personalización del Tema de WordPress a Través de las Pantallas de Administración de WordPress
Si los cambios que desea hacer se centran en el diseño y son relativamente simples, es posible que pueda realizarlos a través de las pantallas de administración. El Personalizador le ofrece una variedad de opciones para ajustar su tema: lo que esté disponible dependerá de su tema. Y puede ver algo llamado Editor en el menú Apariencia. Manténgase alejado de esto, por razones que describiré a continuación.
Personalización del Tema Mediante el Customizing
La manera más fácil de personalizar su tema de WordPress es usando el Personalizador de WordPress.
Se accede a esto de una de estas dos maneras:
- Cuando vea su sitio (cuando esté conectado), haga clic en el enlace Personalizar en la barra de administración en la parte superior de la pantalla.
- En las pantallas de administración, haga clic en Apariencia > Personalizar.
Esto le lleva a Customizing.
En la captura de pantalla de arriba, he instalado un tema libre llamado ColorMag que tiene muchas opciones de personalización. Se agregan secciones al Personalizador para las características de diseño, incluyendo una imagen de encabezado, medios sociales, colores de categoría y una pestaña de Opciones de diseño que lo lleva a más pestañas donde puede realizar cambios en el diseño y la disposición de su sitio.
Diferentes temas tienen diferentes opciones de personalización, pero los temas más nuevos parecen estar añadiendo más y más de ellos todo el tiempo. Si encuentra un tema que le gusta pero que no es del todo adecuado, puede encontrar que personalizarlo le da exactamente el diseño y la disposición que necesita.
El Editor de Temas (y por Qué No Utilizarlo)
En sus pantallas de administración, usted puede notar una opción llamada Editor de Temas, la cual usted puede acceder a través de Apariencia > Editor de Temas.
Esto le da acceso a los archivos del tema, lo que significa que puede editarlos directamente.
No lo haga.
Incluso si se siente cómodo escribiendo CSS o PHP, editar los archivos en su tema de esta manera es una muy mala idea, por dos razones:
- Si ha comprado o descargado un tema de terceros, los cambios que realice se perderán la próxima vez que actualice el tema (y debe mantenerlo actualizado por razones de seguridad).
- Y lo que es más importante, si realiza un cambio que rompa su sitio, no se realizará un seguimiento y la versión anterior del archivo no se modificará. Podrías romper irrevocablemente el sitio.
Si desea editar el código del tema, debe hacerlo mediante un editor de código y no debe editar los archivos de su sitio web en directo hasta que lo haya probado en un sitio de preparación. Si necesita editar un tema de terceros, debe hacerlo mediante un tema hijo. Más sobre ambos más adelante en este artículo.
WordPress sabe lo inseguro que es usar el editor de temas: incluso le avisa cuando intenta acceder a él.
Así que sigua el consejo de WordPress: ¡no use el editor de temas!
Uso de Creadores de Páginas y Marcos para Personalizar el tema de WordPress
Una gran parte de los temas de WordPress tienen opciones de personalización, lo que significa que puede realizar cambios en el diseño y la presentación a través del Personalizador.
Pero algunos temas llevan esto más allá y están diseñados para ser extendidos y significativamente personalizados. Estos temas se denominan marcos temáticos.
Otra opción es usar un plugin que le permite diseñar su sitio usando una interfaz amigable: estos son llamados constructores de páginas.
Uso de un Generador de Páginas para Personalizar su Tema
Los plugins de Page Builder están diseñados para facilitarle la configuración del diseño de su sitio, mediante una interfaz que le permite ver lo que está obteniendo.
Usted instala un plugin de generador de páginas con un tema compatible, y luego usa las opciones que le da para diseñar su sitio exactamente de la manera que usted desea.
Uno de los constructores de páginas más conocidos es Elementor, pero puede encontrar algunas alternativas en nuestro resumen de constructores de páginas.
Los creadores de páginas le permiten editar sus mensajes y páginas con una interfaz de arrastrar y soltar, lo que significa que puede ver cómo se verá su contenido y hacer que cada página parezca única.
Abajo, estoy usando el constructor de páginas Elementor con el tema Hello Elementor, que es compatible con él.
Los creadores de páginas le dan mucha flexibilidad con el diseño de sus páginas. Si usted está acostumbrado a un constructor de sitios web como Wix, ellos pueden ayudar a facilitar la transición a WordPress. Y si prefiere una interfaz WYSIWYG para su contenido de WordPress, ellos pueden ayudarle a diseñar sus páginas rápidamente.
Uso de un Marco Temático para Personalizar el Tema
Una alternativa a los creadores de páginas son los marcos temáticos. Estos son conjuntos de temas diseñados para trabajar juntos. Hay un tema padre que es el marco de trabajo, y una selección de temas hijo que pueden usar para personalizar el tema principal y hacer que luzca de la manera que desee.
Un ejemplo de marcos temáticos es Divi, que tiene opciones de personalización que le permiten modificar aún más el diseño del tema hijo, incluida una interfaz de arrastrar y soltar similar a la de los creadores de páginas.
Lectura recomendada: Divi vs Elementor: Comparación de plugins constructores de páginas de WordPress
Editar el Código del Tema de WordPress
Si se siente cómodo editando CSS y/o PHP, puede editar el código del tema para personalizarlo.
Esto le da el mayor grado de control.
Si está editando su propio tema, que es específico para su sitio y fue desarrollado especialmente para él, entonces puede hacer ediciones del tema directamente. Pero si está trabajando con un tema de terceros y desea editarlo, debe crear un tema hijo para evitar perder los cambios la próxima vez que actualice el tema.
Edición de Archivos Temáticos
El primer paso para editar su tema de WordPress es entender qué archivos de tema controlan qué y cuáles necesitará editar.
La Hoja de Estilo
Cada tema de WordPress tiene una hoja de estilo, llamada style.css. Contiene todo el código para estilizar su sitio: diseño, fuentes, colores y más.
Si desea cambiar los colores de su tema, por ejemplo, puede editar la hoja de estilo. Si desea agregar una nueva fuente, usará la hoja de estilo para aplicarla a diferentes elementos como el texto del cuerpo y los encabezados.
Preste atención a la hora de editar la hoja de estilo: la especificidad significa que el código de un elemento no siempre proviene de donde usted cree que está. Los elementos heredarán el estilo de otros elementos que están por encima de ellos en la jerarquía de la página, a menos que añada un estilo específico al elemento inferior.
Para descubrir qué CSS está afectando a qué elementos de la página, puede utilizar el inspector de su navegador para ver el CSS (Chrome DevTools en este ejemplo):
A continuación, puede utilizarlo para escribir nuevas CSS que se dirijan a elementos individuales o a una serie de elementos o clases de la página.
Si toda esta charla sobre elementos, clases y especificidad es nueva para usted, es posible que desee evitar editar directamente el CSS de su tema. Al menos hasta que haya aprendido más sobre CSS y cómo funciona.
El Fichero de Funciones
Otro archivo que casi todos los temas tendrán es el archivo de funciones (functions.php). Este es el archivo que hace que un montón de cosas funcionen en su tema. Dentro de él, puede encontrar código para registrar características del tema como imágenes destacadas, widgets y más.
Si se siente tentado a añadir código funcional a su tema, aquí es donde lo añadirá. Pero tenga cuidado: en la mayoría de los casos, debería estar escribiendo un plugin. Pregúntese a si mismo:
¿Desearía mantener esta funcionalidad si cambiara de tema en el futuro?
Si la respuesta es afirmativa, escriba un plugin en lugar de añadir código al archivo de funciones. Los plugins no tienen que ser grandes: no hay nada que le impida crear uno para un par de líneas de código.
El archivo de funciones está escrito en PHP, así que tendrá que estar familiarizado con eso. No copie ciegamente el código que encuentre a través de una búsqueda en Google: tómese el tiempo para averiguar qué hace ese código y para entenderlo. De esta forma es menos probable que añada código que no es tan bueno como debería ser.
Los Archivos de Plantillas de Temas
La mayoría de los archivos de un tema son archivos de plantilla de tema. Se trata de archivos que determinan el contenido que WordPress produce en una página determinada, y se seleccionan según la jerarquía de plantillas.
Si desea cambiar la forma en que se emite el contenido de un determinado tipo de mensaje, página o archivo, deberá editar uno de estos archivos o crear uno nuevo.
Por ejemplo, supongamos que el tema tiene un archivo archive.php que se utiliza para generar páginas de archivo para categorías y etiquetas. Desea realizar cambios en la forma en que se emiten las etiquetas. Así que cree un archivo llamado «tag.php», que estaría basado en archive.php con sus ajustes.
Una vez más, tenga cuidado al editar los archivos: podrían romper su sitio. Prueba siempre en una instalación local utilizando una herramienta como DevKinsta y/o un sitio de staging primero.
Cualquiera que sea el tipo de archivo que necesite editar, debe hacerlo correctamente. Lea la sección de abajo sobre las mejores prácticas para averiguar cómo editar su código de una manera que no rompa su sitio y no le cause dolores de cabeza de seguridad.
Personalización de un Tema de Terceros con un Tema Hijo
Si el tema que está ejecutando en su sitio es de un tercero y desea editar el código, deberá crear un tema hijo.
Esto se debe a que si edita el tema directamente y luego lo actualiza (lo que debería), perderá todos los cambios que realizó.
La creación de un tema hijo consta de cuatro pasos:
- Cree una nueva carpeta en wp-content/themes.
- En esa carpeta, cree una hoja de estilo. En esa hoja de estilo, dígale a WordPress que este es un tema infantil de tu tema actual.
- Añada copias de los archivos que desee editar al tema hijo y edítelas allí.
- Active el tema hijo en su sitio.
WordPress siempre usará un archivo desde el tema hijo hasta el contenido de salida a menos que haya un archivo superior en la jerarquía del tema padre. Si hay dos versiones del mismo archivo, utilizará la del tema hijo. Esto significa que el nuevo archivo del tema hijo sustituirá al del tema principal.
Mejores Prácticas para Personalizar los Temas de WordPress
Así que está planeando personalizar su tema. Antes de seguir adelante y hacer los cambios, siga estos consejos para asegurarse de que lo estás haciendo de forma segura y que no romperá su sitio, lo hará vulnerable a ataques o perderá su código.
Si es posible, Personalizar sin Editar el Código
Si puede realizar sus personalizaciones a través del Personalizador o en cualquier otro lugar de las pantallas de administración, esto es más seguro que editar el código.
Sólo edita el código si está familiarizado con CSS (para la hoja de estilo) y PHP (para otros archivos de tema) y sabe cómo hacerlo de forma segura.
Utilice un Sitio de Desarrollo Local para Hacer sus Cambios
Si está editando el código en su tema o creando un tema hijo para hacer cambios, debería hacer el trabajo de desarrollo en una instalación local de WordPress con su tema instalado y su contenido copiado de su sitio en vivo.
De esta manera, usted tiene una réplica de su sitio en vivo para probar sus cambios. Trabajar en un sitio local no tendrá ningún efecto en su sitio en vivo y puede ser más rápido.
Incluso si está utilizando el Personalizador, puede ser útil utilizar una versión local de su sitio para las pruebas, ya que puede publicar sus cambios y probarlos sin afectar al sitio en vivo.
Una vez que haya probado los cambios en su tema, puede subirlo a su sitio en vivo o, mejor aún, puede probarlo en un sitio de puesta en escena y luego empujarlo para que salga en vivo.
Usar el Control de Versiones
Cuando realice cambios en el tema, debe utilizar el control de versiones para realizar un seguimiento de los cambios.
En su forma más simple, esto significa cambiar el número de versión del tema y mantener copias de ambas versiones. Pero si su gong para hacer el control de versiones correctamente, necesita usar un servicio como GitHub para hacer un seguimiento de sus cambios.
De esta manera, si un cambio causa problemas, usted puede deshacerlo fácilmente sin tener que hacer ediciones manuales.
El control de versiones es aún más útil si trabaja como parte de un equipo, ya que podrá ver lo que están haciendo otros miembros. Make sure to read our git vs Github guide. Asegúrase de leer nuestra guía de Git vs Github.
Utilice un Sitio de Estadificación para Probar sus Cambios
Si tiene acceso a un sitio de puesta en escena (como la puesta en escena gratuita de Kinsta que viene con todos los planes), probar esto antes de activar la nueva versión de su tema (o el nuevo tema hijo) en su sitio en vivo es la forma más segura de proceder.
Esto se debe a que cualquier sitio local tendrá algunas diferencias con su sitio en vivo: está en un servidor diferente (uno creado en su máquina local), puede estar ejecutando una versión diferente de PHP o cualquiera de las otras herramientas que ejecutan su sitio.
Haga una copia de su sitio en vivo en su servidor de preparación y luego cargue y active su nuevo tema. Pruebe su sitio a fondo para asegurarse de que todo funciona, y luego puede empujar sus cambios a su sitio en vivo.
Haga que su Tema Sea Receptivo
Cualquier cambio que necesite realizar en el tema debe funcionar tanto en el móvil como en el escritorio.
Con más y más personas accediendo a Internet a través del teléfono móvil y el índice Mobile-first de Google, es probablemente más importante ahora que su tema funcione en el móvil que en el escritorio. Por lo tanto, cualquier cambio que hagas en su tema debe ser fácil de usar para el móvil o, preferiblemente, móvil en primer lugar cuando sea pertinente.
Esto se aplicará principalmente a cualquier cambio que realice en su estilo o diseño: compruebe que el nuevo diseño funciona en dispositivos móviles y que ha añadido consultas multimedia para que el diseño se ajuste a los diferentes tamaños de pantalla.
Si su tema no responde, tendrá un impacto negativo en su posicionamiento en los motores de búsqueda y en las tasas de conversión.
Si no tiene acceso a muchos dispositivos móviles diferentes para probar, puede usar una herramienta como BrowserStack para ver cómo se ve su sitio en diferentes dispositivos. También puede utilizar las herramientas de desarrollo de su navegador y las vistas de respuesta del Personalizador.
Asegúrese de que Sus Personalizaciones no Afecten a la Accesibilidad
Cualquier cambio en el tema también debe ser accesible para los usuarios con discapacidades o deficiencias sensoriales.
No se trata sólo de asegurar que su sitio funciona en los lectores de pantalla: otras consideraciones como los esquemas de color y los tamaños de fuente son importantes para un gran número de personas.
Si los cambios que estás haciendo en su tema son para que los colores sean más brillantes o el texto más pequeño, piénselo de nuevo: esto podría dificultar que la gente lea o interactúe con su sitio.
Antes de realizar cualquier cambio en vivo, utilice un verificador de accesibilidad para probar su sitio y asegurarse de que no excluye a nadie.
Cíñase a los Estándares de Codificación de WordPress
Si está editando el código en su tema o creando un tema hijo, debe asegurarse de que su código está en línea con los estándares de codificación de WordPress.
Estos estándares existen para asegurar la consistencia y calidad del código y para evitar que el código sea un desastre. Existen estándares para PHP, CSS y JavaScript, así que tómese su tiempo para comprobar los que sean relevantes para usted y asegurarse de que los sigue.
Si su tema existente de WordPress está bien codificado y escribe cualquier código nuevo de una manera que sea consistente con eso, está en camino de asegurarse de que su código sea compatible. Asegúrese de añadir comentarios a cualquier cambio que haga en el tema para que usted u otros sepan lo que hizo cuando vuelva a trabajar en el código en el futuro. Puede que piense que no lo olvidará, pero después de unos meses, es sorprendentemente fácil olvidar por qué se ha editado una línea de código.
Resumen
Personalizar su tema de WordPress no es tan difícil. A veces es un simple caso de usar el Personalizador para hacer cambios en las fuentes, colores o tu favicon(asegúrese de leer nuestra guía detallada sobre las fuentes de WordPress). Otras veces, tiene que crear un nuevo tema hijo para añadir un nuevo archivo de plantilla a un tema.
Las opciones que tiene para personalizar su tema incluyen el uso de un plugin o el Personalizador, la edición directa del código del tema de WordPress o la creación de un tema hijo.
Identifique la opción correcta para usted y realice sus personalizaciones de forma segura, todo ello sin romper su sitio.
Rachel McCollin lleva ayudando a la gente a crear sitios web con WordPress desde 2010. Es una gran fan de WordPress autoalojado y quiere ayudar a tanta gente como sea posible a crear un sitio web impresionante con él.
Deja una respuesta