Cómo crear un tema de WordPress personalizado en 5 pasos sin código

¿Quieres crear un tema personalizado de WordPress para tu sitio web?

La creación de su propio tema de WordPress desde cero solía implicar la escritura de código complejo o la contratación de desarrolladores de temas para crear un tema para usted. Pero gracias a los generadores de temas de WordPress nuevos y fáciles de usar, cualquiera puede crear un tema de WordPress personalizado sin escribir código.

Este artículo le mostrará cómo crear un tema personalizado en WordPress paso a paso.

¿Qué es un tema de WordPress?

Los temas de WordPress son archivos de plantilla escritos en PHP, HTML, CSS y JavaScript. Cada archivo funciona en conjunto para crear el diseño y la funcionalidad de su sitio de WordPress.

Un tema típico de WordPress incluirá algunos, si no todos, de los siguientes archivos de temas:

• pie de página.php
• encabezado.php
• índice.php
• página.php
• barra lateral.php
• archivo.php

Los temas de WordPress también incluyen un archivo functions.php y un archivo style.css.

Por lo general, necesitará una sólida comprensión de varios lenguajes de diseño web o un desarrollador web para crear un tema de WordPress personalizado.

Creación de temas personalizados de WordPress para principiantes

Si contrata a un desarrollador o una agencia de desarrollo web, el costo de crear un tema personalizado desde cero puede ser de miles de dólares. Debido a que muchas pequeñas empresas no pueden pagar el costo, se conforman con los temas predeterminados de WordPress que vienen con la plataforma.

Sin embargo, si es el propietario de un sitio web que no quiere conformarse con el valor predeterminado, puede usar un marco de tema, como Genesis de StudioPress, por ejemplo, o un complemento de creación de páginas de WordPress para crear un tema personalizado para su sitio de WordPress.

Los frameworks de temas de WordPress facilitan la creación de un tema de WordPress al manejar automáticamente gran parte del diseño y la funcionalidad. Sin embargo, siguen siendo una solución algo complicada, ya que requieren temas secundarios, por ejemplo, por lo que son mejores para los desarrolladores que para el propietario promedio de un sitio web.

Por otro lado, los creadores de páginas de WordPress hacen que sea muy fácil crear diseños de página personalizados utilizando una interfaz de arrastrar y soltar, pero también tienen sus límites. Los creadores de páginas solo le permiten crear diseños y, por lo general, no puede usarlos para crear temas personalizados.

Hasta que SeedProd, el mejor creador de sitios web de WordPress para temas personalizados, decidió resolver este problema con su creador de temas de WordPress.

¿Qué es el creador de temas de SeedProd?

SeedProd ya es un poderoso creador de páginas de arrastrar y soltar utilizado por más de 1 millón de propietarios de sitios web. Pero con su generador de temas, cualquier usuario que no sea técnico puede crear un tema de WordPress completamente personalizado sin código.

En lugar de hacer malabarismos con los archivos de contenido de wp, puede crear temas desde cero con solo unos pocos clics. SeedProd incluso creará su hoja de estilo automáticamente.

SeedProd viene con:

• Interfaz visual de arrastrar y soltar
• Más de 150 plantillas profesionales
• 2 millones de fotos de archivo
• Soporte WooCommerce
• Panel de administración de suscriptores
• Integraciones de marketing por correo electrónico

Y tantas funciones y widgets adicionales que necesita para crear un sitio web personalizado usando WordPress rápidamente.

Con eso en mente, veamos cómo crear un tema de WordPress personalizado sin escribir una sola línea de código usando SeedProd.

Cómo crear un tema de WordPress personalizado sin código

Para crear un tema personalizado de WordPress con SeedProd, primero necesitará un sitio web de WordPress para instalar el complemento SeedProd. Si aún no tiene una instalación de WordPress, puede seguir estos pasos para aprender a crear un sitio web de WordPress.

Su sitio web también debe tener instalado un tema simple de WordPress. Puede encontrar muchas soluciones gratuitas en el directorio de temas de WordPress. No tendrá que preocuparse por el aspecto del tema porque SeedProd lo anulará cuando publique sus personalizaciones.

También es una buena idea usar un entorno de desarrollo al cambiar su tema de WordPress para evitar romper accidentalmente su sitio web. Empresas populares de alojamiento de WordPress como BlueHost ofrecen entornos de prueba de forma predeterminada.

También debe hacer una copia de seguridad de su sitio web antes de realizar cambios importantes. Aquí hay una lista de los mejores complementos de copia de seguridad de WordPress que puede usar.

Una vez que su sitio de WordPress esté listo, siga los pasos a continuación para crear un tema de WordPress personalizado sin código.

Paso 1. Instalar y activar SeedProd

El primer paso es instalar y activar el complemento del creador de sitios web de SeedProd. Para acceder a la función de creación de temas, necesitará una licencia de SeedProd Pro o Elite.

Después de descargar el archivo zip del complemento SeedProd en su computadora, cárguelo, instálelo y actívelo en su tablero de WordPress. Si necesita ayuda con este paso, siga esta guía sobre cómo instalar un complemento de WordPress.

Después de instalar SeedProd, vaya a SeedProd ≫ Configuración desde su área de administración de WordPress e ingrese su clave de licencia de SeedProd.

Puede encontrar su clave de licencia visitando el área de su cuenta de SeedProd y copiándola desde la pestaña Descargas.

Ahora puede ir a SeedProd ≫ Theme Builder y ver la descripción general de Theme Builder. Aquí es donde puede crear una jerarquía de plantillas para su tema de WordPress.

En otras palabras, es donde puedes crear todas las partes individuales que componen tu tema, como las siguientes:

• Encabezamiento
• Pie de página
• Publicación única
• Única página
• Archivo (Página de blog)
• Página de inicio
• barra lateral

Puede crear cada una de estas partes del tema individualmente haciendo clic en el botón Agregar nueva plantilla de tema .

Pero si eso suena demasiado abrumador para su primer intento, hay otra forma de crear su tema.

Puede usar las plantillas de temas prefabricadas de SeedProd para crear rápidamente el marco básico para su tema y personalizarlas para que se adapten a sus necesidades de diseño, sin código. Debido a que esta solución es muy fácil para principiantes, en eso nos enfocaremos en este tutorial.

Nota: SeedProd también ofrece cientos de plantillas de páginas de destino receptivas para ayudarlo a crear páginas de destino personalizadas.

Paso 2. Elija una plantilla de tema

El generador de temas de SeedProd ya tiene varios temas creados para usted. Para encontrarlos, haga clic en el botón Temas .

Al momento de escribir esta guía, hay 9 plantillas de temas, que incluyen:

1. Tema de inicio
2. Negocios modernos
3. Agencia de mercadeo
4. Tema de diseño de producto
5. Empresa de cuidado de mascotas
6. Tema de estrategia digital
7. Tema de música en vivo
8. Tema del corredor de hipotecas
9. Tema del restaurante

Para elegir una plantilla de tema para su sitio web, pase el mouse sobre la miniatura y haga clic en el icono de marca de verificación. Para esta guía, usaremos el tema de inicio de SeedProd.

Después de elegir su plantilla, SeedProd crea todas las partes que componen su tema automáticamente.

Si hay una función específica que no desea mostrar en su sitio web, puede hacer clic en el interruptor debajo del encabezado Publicar y desactivar esa parte del tema.

Si hace clic en el enlace de condiciones para cada parte de la plantilla, puede cambiar su nombre, tipo, prioridad y elegir cuándo y dónde aparece en su sitio web.

Paso 3. Personaliza las partes de tu tema de WordPress

Con los componentes básicos de su tema en su lugar, ahora es el momento de comenzar a editar cada sección del tema para crear un tema de WordPress verdaderamente personalizado para su sitio.

Para editar cualquier sección de tema, coloque el cursor sobre ella y haga clic en el enlace Editar diseño .

Comenzaremos editando el encabezado.

Encabezado y pié de página

Cuando edite una sección de tema en SeedProd, se dirigirá a su generador visual de arrastrar y soltar. Puede personalizar el encabezado de su tema en esta pantalla simplemente señalando y haciendo clic.

Como puede ver, el tema de inicio viene con un encabezado de 2 columnas que tiene un logotipo y un menú de navegación. Puede personalizarlo para mostrar su logotipo personalizado haciendo clic en el logotipo en la vista previa en vivo.

Desde allí, puede eliminar el logotipo de marcador de posición en el panel de la izquierda y cargar uno nuevo desde su computadora o biblioteca de medios de WordPress.

Puede ajustar el tamaño y la alineación de su logotipo en el mismo panel y agregar un enlace personalizado, como la URL de su sitio web principal.

Si desea cambiar el color de fondo de su encabezado, desplace el cursor sobre la sección del encabezado hasta que tenga un contorno morado, luego haga clic para ver la configuración de la sección en el panel de la izquierda. A partir de ahí, puede darle a su encabezado un color de fondo personalizado, una imagen y elegir el ancho del encabezado.

Y en la pestaña Avanzado , puede personalizar la sombra, el espaciado, el borde y más de su encabezado.

Cuando esté satisfecho con su encabezado personalizado de WordPress, haga clic en el botón Guardar en la esquina superior derecha y vuelva al generador de temas.

Ahora repita esos pasos para editar su pie de página de WordPress. Haga clic en Editar diseño para abrirlo en el editor visual y haga clic en cualquier elemento para personalizar el contenido, los colores, los enlaces y más.

Página de inicio

A continuación, personalizaremos la página de inicio de su sitio de WordPress, que suele ser la primera página que ven los usuarios cuando visitan su sitio web. Así que abra la sección Página de inicio en el editor visual.

Debido a que ya personalizamos el diseño del encabezado y el pie de página, verá sus nuevos diseños en la parte superior e inferior de su página de inicio. Pero no se preocupe, los cambios que realice en esta pantalla no afectarán su encabezado o pie de página; simplemente están ahí como una guía visual.

La plantilla de tema de inicio de SeedProd tiene todas las características que necesitan la mayoría de los sitios web comerciales, que incluyen:

• área de héroe
• logotipos de clientes
• Características
• Testimonios
• Sección de preguntas frecuentes

Al igual que el encabezado, puedes personalizar cada centímetro para que sea único. Comencemos por cambiar el área del héroe.

El área de héroe tiene las siguientes características:

• Sección
• diseño de 2 columnas
• Imagen
• Título
• Texto
• Botón

Para cambiar la imagen predeterminada, simplemente haga clic en ella y cargue una nueva imagen, como lo hizo con su logotipo.

También puede editar el título y la descripción haciendo clic en cada bloque y reemplazando el contenido con su texto personalizado.

Si hace clic en el bloque de botones, puede cambiar el texto del botón, el enlace, la alineación y más.

Puede encontrar todos estos elementos en el panel de bloques de la izquierda. De esa manera, puede arrastrar un bloque desde la izquierda y soltarlo en su diseño para agregar más contenido a su tema.

Siga este proceso para personalizar el resto de su página de inicio hasta que refleje su negocio. Por ejemplo, puede agregar información sobre los servicios de su empresa o resaltar las características de su producto en la sección de características.

Luego, puede usar el bloque de Testimonios incorporado de SeedProd para agregar pruebas sociales positivas de sus clientes y clientes existentes.

También cambiamos el color de fondo de esta sección para que coincida con nuestro encabezado de tema al abrir la configuración de la sección y elegir un color diferente.

Después de personalizar su página de inicio, puede hacer clic en el icono de vista previa móvil para ver cómo se ve su diseño en los dispositivos móviles.

Si algo no se ve bien, puede mover las cosas hasta que la pantalla de su dispositivo móvil ofrezca una buena experiencia de usuario.

Cuando esté satisfecho con el aspecto de su página de inicio, haga clic en el botón Guardar y vuelva al generador de temas.

Página de blog, publicaciones individuales y páginas

Lo más probable es que desee incluir una página personalizada para publicaciones de blog en su nuevo tema de WordPress. La buena noticia es que SeedProd tiene una parte del tema que puede personalizar específicamente para ese propósito.

Esa sección se llama Índice de blogs, Archivos, Búsqueda en el generador de temas. Le permite personalizar la página de publicaciones de su blog, los archivos de publicaciones y la página de resultados de búsqueda para que coincidan con el resto de la marca de su sitio web.

Haga clic en el enlace Editar diseño para abrir esta parte del tema en el generador de arrastrar y soltar.

En esta página, el tema de inicio utiliza etiquetas de plantilla para obtener información dinámica de WordPress, incluido el título del archivo y las publicaciones. Cuando haga clic en cualquiera de estos bloques, verá su configuración en el panel de la izquierda.

Por ejemplo, cuando hace clic en la etiqueta de plantilla Publicaciones, puede mostrar las publicaciones de forma predeterminada, personalizada (publicaciones, medios o publicaciones personalizadas) o manualmente escribiendo parámetros de consulta específicos.

También puede elegir la cantidad de columnas, publicaciones por página, mostrar u ocultar la imagen destacada, mostrar un extracto y mucho más.

Después de personalizar su archivo o página de blog, regrese al generador de temas y edite la sección Publicaciones individuales .

Esta parte del tema utiliza las siguientes etiquetas de plantilla para extraer información sobre publicaciones individuales de WordPress:

• Título de la entrada
• Publicar información
• Publicar Contenido
• Cuadro de autor
• Publicar comentarios
• Mensaje de navegación

Puede editar cada uno de estos bloques como lo haría con cualquier otro bloque de SeedProd. Simplemente haga clic en cualquier elemento y personalícelo en el panel de configuración.

Por ejemplo, si hace clic en el bloque Publicar información , puede agregar más metainformación, cambiar la alineación y ajustar los colores de los iconos.

barra lateral

Muchos sitios web de WordPress todavía usan barras laterales para mostrar información importante a los visitantes, como sus perfiles de redes sociales, las últimas publicaciones y el cuadro de suscripción al boletín. Pero a diferencia de muchos temas de WordPress prefabricados, puede usar SeedProd para crear una barra lateral de WordPress personalizada con sus bloques de construcción visuales.

Para hacerlo, haga clic en Editar diseño en la parte de la plantilla de la barra lateral. Desde allí, puede arrastrar y soltar cualquier contenido que desee en el diseño de su barra lateral.

El tema de inicio incluye un cuadro de búsqueda, iconos de redes sociales y categorías de publicaciones de forma predeterminada. Pero puedes agregar lo que quieras aquí. Por ejemplo, es posible que desee mostrar una lista de publicaciones de blog recientes o una imagen que vincule a un socio afiliado.

También puede usar el bloque de formulario de suscripción de SeedProd y recopilar direcciones de correo electrónico para hacer crecer su lista, directamente en su barra lateral. Lo mejor es que no necesitará ningún conocimiento técnico para hacerlo realidad.

CSS globales

A estas alturas, ha creado la mayor parte de su tema personalizado de WordPress sin código. Pero hay una parte más que debe mirar para asegurarse de que todo sea consistente en todo su tema.

Ese es su CSS global , que controla el estilo, la tipografía, los colores y el diseño globales de su tema. Así que haga clic en Editar diseño en esa parte del tema para abrirlo en el editor de páginas.

Como puede ver, esta página le permite controlar gran parte del estilo de su tema. En el panel de la izquierda hay secciones para:

• Colores
• fuentes
• Fondo
• Botones
• Formularios
• Disposición
• CSS personalizado

Por ejemplo, puede abrir la sección Botones y elegir un color personalizado. Luego, ese color aparecerá en cada botón de su tema.

Puede hacer lo mismo en el encabezado Fuentes y asignar un color personalizado para cada enlace en su tema.

Así que continúe y modifique estas configuraciones hasta que su tema se vea exactamente como lo desea, luego haga clic en el botón Guardar para almacenar sus cambios.

Paso 4. Conecte su servicio de marketing por correo electrónico

Si uno de sus objetivos comerciales es hacer crecer su lista de correo electrónico, es probable que haya agregado un formulario de registro en algún lugar del diseño de su tema de WordPress. Pero para agregar nuevos contactos a su lista automáticamente, deberá conectar su formulario a su servicio de marketing por correo electrónico.

SeedProd se integra directamente con muchos servicios populares de marketing por correo electrónico, como Constant Contact, Mailchimp, Drip, etc. Y es muy fácil vincularlo a su cuenta.

Simplemente edite cualquier parte del tema y haga clic en la pestaña Conectar en la parte superior de la pantalla.

Luego, haga clic en cualquier integración de la lista y siga las instrucciones en pantalla. Como resultado, cualquier persona que complete su formulario de suscripción se agregará automáticamente a su lista de correo electrónico.

Paso 5. Habilite su tema personalizado de WordPress

El paso final para crear un tema de WordPress personalizado con SeedProd es hacer que el tema esté activo en su sitio web. Para hacer eso, busque el encabezado Habilitar tema SeedProd en la esquina superior derecha y cambie la palanca a la posición "encendido".

Su nuevo tema anulará su tema predeterminado, lo que le permitirá ver sus personalizaciones en la parte frontal de su sitio web.

¡Eso es todo! Su nuevo tema personalizado de WordPress está disponible en su sitio web. Veamos cómo se ve.

Aquí está la página de inicio con su nuevo encabezado y pie de página:

Aquí está la página del blog con su barra lateral personalizada de WordPress:

¡Felicidades!

Ahora sabe cómo crear un tema de WordPress personalizado sin código.

Con el creador de temas de WordPress fácil y potente de SeedProd, no necesitará ninguna experiencia técnica, desarrolladores de WordPress o un presupuesto enorme para crear un tema de WordPress personalizado.

El poder y la funcionalidad están en tus manos en el momento en que instalas el complemento.

¿Entonces, Qué esperas?

Gracias por leer. Síganos en YouTube, Twitter y Facebook para obtener más contenido útil para hacer crecer su negocio.