Cómo personalizar su tema de WordPress (5 formas paso a paso)

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 sus temas de WordPress.

El desafío es encontrar la manera correcta de hacerlo.

En esta publicación, lo guiaré a través del opciones para personalizar su tema de WordPress, ayudarlo a decidir cuál es el adecuado para usted y mostrarle cómo hacerlo de manera segura y eficiente.

¿Prefiere ver nuestra versión en video? Haga clic en reproducir a continuación:

Opciones para personalizar un tema

Antes de sumergirnos y comenzar a hacer cambios en su tema, vale la pena comprender cuáles son las opciones, ya que se adaptan a diferentes situaciones.

Aquí hay una descripción general de las opciones disponibles para usted:

• Si desea agregar funcionalidad a su tema, instale un complemento.
• Utilice el Personalizador en las pantallas de administración de WordPress para personalizar las fuentes, los colores y quizás el diseño también, dependiendo de su tema.
• Si está trabajando con un tema de creación de páginas, use sus funciones para personalizar el diseño de su sitio.
• Si ha instalado un tema de marco, use uno de los temas secundarios disponibles para personalizar su sitio, junto con las opciones de personalización viables propias de 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 , tiene una serie de opciones disponibles, desde usar el editor de bloques hasta el Personalizador, pasando por la edición de archivos. Los veremos todos en esta publicación, pero comencemos con la opción más simple: instalar un complemento.

¿Realmente necesitas personalizar tu tema?

A veces no ‘ No necesitas personalizar tu tema en absoluto: en su lugar, necesitas instalar un complemento.

Los temas dictan el diseño de tu sitio: la forma en que se ve y la forma en que muestra el contenido. Los complementos agregan funcionalidad adicional.

Si los cambios que desea realizar se centran en la funcionalidad en lugar del diseño, considere instalar un complemento usted mismo. Este podría ser un complemento que necesita escribir, uno que descargue del directorio de complementos o uno que compre.

Si desea editar el archivo functions.php en su tema, pregúntese:

¿Querría mantener esta funcionalidad si cambiara de tema en el futuro?

Si la respuesta es sí, ese código debe ir en un complemento, no en su tema.

Buenos ejemplos de lo que usaría un complemento en lugar de un tema, incluido agregar widgets, registrar tipos de publicaciones personalizadas y taxonomías , creando campos personalizados y agregando características adicionales como una tienda o mejoras de SEO.

Personalización de su tema de WordPress a través de las pantallas de administración de WordPress

Si los cambios que desea realizar están enfocados en el diseño y relativamente simple, puede hacerlos 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 para usted dependerá de su tema. Y es posible que vea algo llamado Editor en el menú Apariencia. Manténgase alejado de esto, por las razones que describiré en breve.

Personalización de su tema a través del Personalizador

La forma más fácil de personalizar su tema de WordPress es utilizando el Personalizador de WordPress.

Puede acceder a esto de una de estas dos formas:

• Cuando visualice su sitio (cuando haya iniciado sesión), 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 lo lleva al Personalizador.

En la captura de pantalla anterior, he instaló un tema gratuito llamado ColorMag que tiene muchas opciones de personalización. Se agregaron secciones al Personalizador para características de diseño que incluyen una imagen de encabezado, redes 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 el diseño de su sitio.

Los diferentes temas tienen diferentes opciones de personalización, pero los temas más nuevos parecen agregar más y más todo el tiempo. Si encuentra un tema que le gusta pero que no es del todo adecuado para usted, puede encontrar que personalizarlo le brinda exactamente el diseño y el diseño que necesita.

El Editor de temas (y por qué no usar it)

En las pantallas de administración, es posible que observe una opción llamada Editor de temas, que accede a través de Appearance > Editor de temas.

Esto le da acceso a los archivos de su 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 compró o descargó un tema de terceros, cualquier cambio que realice se perderá la próxima vez que actualice el tema (y debe mantener su tema actualizado por razones de seguridad).
• Más importante aún, si realiza un cambio que rompa su sitio, no se realizará un seguimiento y no se cambiará la versión anterior del archivo. Podrías romper irrevocablemente el sitio.

Si quieres editar el código en tu tema, debes hacerlo usando un editor de código (mira los mejores editores HTML gratuitos), y no debes No edite los archivos en su sitio en vivo hasta que los haya probado en un sitio de prueba. Si necesita editar un tema de terceros, debe hacerlo a través de un tema hijo. Más sobre estos dos temas más adelante en esta publicación.

WordPress sabe lo inseguro que es usar el editor de temas: incluso le da una advertencia cuando intenta acceder a él.

Así que sigue el consejo de WordPress: no ¡usa el editor de temas!

Uso de constructores de páginas y marcos para personalizar tu tema de WordPress

Una gran proporción de temas de WordPress tienen opciones de personalización, lo que significa que puedes realizar cambios en el diseño y el diseño a través de el Personalizador.

Pero algunos temas llevan esto más allá y están diseñados para ampliarse y personalizarse significativamente. Esos temas se denominan frameworks temáticos.

Otra opción es utilizar un complemento que te permita diseñar tu sitio usando una interfaz fácil de usar: se denominan creadores de páginas.

Usando una página Creador para personalizar su tema

Los complementos del Creador de páginas están diseñados para facilitarle la configuración del diseño de su sitio, utilizando una interfaz que le permite ver lo que está obteniendo.

Instalas un complemento de creación de páginas con un tema compatible y luego utilizas las opciones que te brinda para diseñar tu sitio exactamente como lo deseas.

Uno de los creadores de páginas más conocidos es Elementor, pero puede encontrar algunas alternativas en nuestro resumen de creadores de páginas.

Los creadores de páginas le permiten editar sus publicaciones y páginas con una interfaz de arrastrar y soltar, lo que significa que puede ver cómo se verá su contenido y puede hacer que cada página sea loo única.

A continuación, estoy usando el creador de páginas Elementor con el tema Hello Elementor, que es compatible con él.

Los creadores de páginas le brindan mucha flexibilidad con el diseño y el diseño de sus páginas. Si estás acostumbrado a un creador de sitios web como Wix, pueden ayudarte a facilitar la transición a WordPress. Y si prefiere una interfaz WYSIWYG para su contenido de WordPress, ellos pueden ayudarlo a diseñar sus páginas rápidamente.

Usar un marco temático para personalizar su tema

Una alternativa a los creadores de páginas es theme marcos. Estos son conjuntos de temas diseñados para trabajar juntos. Hay un tema principal que es el marco, y una selección de temas secundarios que puede usar para personalizar el tema principal y hacer que se vea como desee.

Un ejemplo de marcos temáticos es Divi, que tiene opciones de personalización que le permiten modificar el diseño de su tema hijo aún más, incluida una interfaz de arrastrar y soltar similar a las de los creadores de páginas.

Editar el código de su tema de WordPress

Si se siente cómodo editando CSS y / o PHP, entonces puede edite el código en su tema para personalizar su tema.

Esto le brinda el mayor grado de control.

Si está editando su propio tema, que es específico de su sitio y fue desarrollado especialmente para él, luego puede editar el 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 de tema

El primer paso para editar su tema de WordPress es comprender qué archivos de tema controlan qué y cuáles necesitará editar.

La hoja de estilo

Cada tema de WordPress tiene un hoja de estilo, llamada style.css. Contiene todo el código para diseñar su sitio: diseño, fuentes, colores y más.

Si desea cambiar los colores de su tema, por ejemplo, debe realizar modificaciones en la hoja de estilo. Si desea agregar una nueva fuente, usaría la hoja de estilo para aplicarla a diferentes elementos como el cuerpo del texto y los títulos.

Preste atención al editar la hoja de estilo: la especificidad significa que el código de un elemento no siempre proviene de donde usted creo que lo es.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 agregue un estilo que sea específico para el elemento inferior.

Para descubrir qué CSS está afectando a qué elementos de la página, puede use el inspector en su navegador para ver el CSS (Chrome DevTools en este ejemplo):

Luego puede usar esto para escribir un nuevo CSS que se dirija a elementos individuales o una variedad de elementos o clases en la página.

Si toda esta charla sobre elementos, clases y especificidad es nueva para usted, es posible que desee evitar la edición directa del CSS de su tema. Al menos hasta que haya aprendido más sobre CSS y cómo funciona.

El archivo de funciones

Otro archivo que tendrán casi todos los temas es el archivo de funciones (functions.php) . Este es el archivo que hace que un montón de cosas funcionen en tu tema. En su interior, puede encontrar código para registrar las características del tema, como imágenes destacadas, widgets y más.

Si tiene la tentación de agregar código funcional a su tema, aquí es donde lo agregará. Pero cuidado: en la mayoría de los casos, debería escribir un complemento. Pregúntese:

¿Me gustaría mantener esta funcionalidad si cambiara de tema en el futuro?

Si la respuesta es sí, escriba un complemento en lugar de agregar código al archivo de funciones. Los complementos 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, por lo que deberá estar familiarizado con ese. No copie a ciegas 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 comprenderlo. De esa forma, es menos probable que agregue código que no sea tan bueno como debería ser.

Los archivos de plantilla de tema

La mayoría de los archivos de un tema son archivos de plantilla de tema . Estos son archivos que determinan qué contenido genera WordPress en una página determinada y se eligen de acuerdo con la jerarquía de la plantilla.

Si desea cambiar la forma en que se genera el contenido en un tipo de publicación, página o archivo determinado , deberá editar uno de estos archivos o crear uno nuevo.

Por ejemplo, digamos que su tema tiene un archivo archive.php que se está utilizando para generar páginas de archivo para categorías y etiquetas. Desea realizar cambios en la forma en que se generan las etiquetas. Así que crea un archivo llamado «tag.php», que se basaría en archive.php con sus ajustes.

Nuevamente, tenga cuidado al editar los archivos: podrían dañar su sitio. Siempre pruebe en un local instalación usando una herramienta como DevKinsta y / o un sitio de ensayo primero.

Cualquiera de estos tipos de archivos que necesite editar, debe hacerlo correctamente. Lea la sección a continuación 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 problemas de seguridad.

Personalización de un tema de terceros con un tema infantil

Si el tema que está que se ejecuta 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 ( que debería), perderá todos los cambios que realizó.

La creación de un tema hijo consta de cuatro pasos:

1. Cree una nueva carpeta en wp-content / temas.
2. En esa carpeta, cree una hoja de estilo. En esa hoja de estilo, tel l WordPress que este es un tema secundario de su tema existente.
3. Agregue copias de los archivos que desea editar al tema secundario y edítelos allí.
4. Active el tema secundario en su sitio.

WordPress siempre utilizará un archivo del tema hijo para generar contenido a menos que haya un archivo más alto en la jerarquía del tema padre. Si hay dos versiones del mismo archivo, usará la del tema hijo. Esto significa que su nuevo archivo en el tema hijo anulará el del tema padre.

Mejores prácticas para personalizar temas de WordPress

Entonces, está planeando personalizar su tema. Antes de continuar y realizar los cambios, siga estos consejos para asegurarse de que lo está haciendo de manera segura y de 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.

Edite el código solo si tiene 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 realizar sus cambios

Si está editando el código en su tema o creando un tema hijo para realizar cambios, debe realizar el trabajo de desarrollo en un instalación local de WordPress con su tema instalado y su contenido copiado de su sitio en vivo.

De esta manera, tiene un espejo 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 realizar pruebas mientras puede publicar sus cambios y probarlos sin afectar el 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 prueba y luego púlselo para que se active.

Use el control de versiones

Cuando esté realizando cambios en su tema, debe usar el control de versiones para realizar un seguimiento de sus 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 el tuyo va a hacer el control de versiones correctamente, necesitas usar un servicio como GitHub para rastrear tus cambios.

De esta manera, si un cambio causa problemas, puedes revertirlo fácilmente sin tener que hacer manual ediciones.

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. Asegúrese de leer nuestra guía de git vs Github.

Use un sitio de prueba para probar sus cambios

Si tiene acceso a un sitio de prueba (como la prueba gratuita de Kinsta que viene con todos 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 ensayo y luego cargue y active su nuevo tema. Pruebe su sitio a fondo para asegurarse de que todo funcione, y luego puede enviar los cambios a su sitio en vivo.

Haga que su tema sea receptivo

Cualquier cambio que necesite hacer en su tema debe funcionan tanto en dispositivos móviles como en computadoras de escritorio.

Con más y más personas que acceden a Internet a través de teléfonos móviles y el índice Mobile-first de Google, probablemente sea más importante ahora que su tema funcione en dispositivos móviles que hace en el escritorio. Por lo tanto, cualquier cambio que realice en su tema debe ser compatible con dispositivos móviles o, preferiblemente, primero para dispositivos móviles cuando sea relevante.

Esto se aplicará principalmente a cualquier cambio que realice en su estilo o diseño: verifique que el nuevo diseño funcione en dispositivos móviles y que ha agregado consultas de medios para que el diseño se ajuste a diferentes tamaños de pantalla.

Si su tema no responde, afectará negativamente su clasificación en los motores de búsqueda y las tasas de conversión.

Si no tiene acceso a muchos dispositivos móviles diferentes para realizar la prueba, puede usar una herramienta como BrowserStack para ver cómo se ve su sitio en diferentes dispositivos. También puede utilizar las herramientas para desarrolladores en su navegador y las vistas receptivas en el Personalizador.

Asegúrese de que sus personalizaciones no afecten la accesibilidad

Cualquier cambio en su tema también debe ser accesible para usuarios con discapacidades o discapacidades sensoriales .

No se trata solo de garantizar que su sitio funcione en lectores de pantalla: otras consideraciones, como los esquemas de color y los tamaños de fuente, son importantes para una gran cantidad de personas.

Si los cambios que estás haciendo en tu tema son para hacer que los colores sean más brillantes o el texto más pequeño, piénsalo de nuevo: esto podría dificultar que las personas lean o interactúen con tu sitio.

Antes de realizar cambios en vivo, use un verificador de accesibilidad para probar su sitio y asegúrese de que no excluya a las personas.

Siga los estándares de codificación de WordPress

Si está editando el código en su tema o creando un chi ld, 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 garantizar la coherencia y la calidad del código y evitar que el código sea un desastre. Existen estándares para PHP, CSS y JavaScript, así que tómate un tiempo para verificar aquellos que sean relevantes para ti y asegúrate de seguirlos.

Si tu tema de WordPress existente está bien codificado y escribes algo nuevo código de una manera que sea coherente con eso, está en camino de garantizar que su código sea compatible. Asegúrese de agregar comentarios a los cambios que realice en el tema para que usted u otros sepan lo que hizo cuando vuelva a trabajar en el código en el futuro.Puede pensar que no lo olvidará, pero después de algunos meses, es sorprendentemente fácil olvidar por qué editó una línea de código.

¿Necesita personalizar su tema de #WordPress para hacerlo único? ¡Hay muchas opciones! ¡Elija el adecuado para usted en nuestra guía detallada! 👚👔Haga clic para Twittear

Resumen

Personalizar su tema de WordPress no es tan difícil. A veces es un caso simple de usar el Personalizador para realizar cambios en las fuentes o colores (asegúrese de leer nuestra guía detallada sobre las fuentes de WordPress). Otras veces, tiene que crear un nuevo tema hijo para agregar un nuevo archivo de plantilla a un tema.

Las opciones que tiene para personalizar su tema incluyen usar un complemento o el Personalizador, editar el código del tema de WordPress directamente , o creando un tema hijo.

Identifique la opción adecuada para usted y realice sus personalizaciones de manera segura, todo sin dañar su sitio.