Cómo crear un tema de WordPress personalizado desde cero (2022)

¿Quieres crear un tema personalizado de WordPress para darle a tu sitio un aspecto único?

Construir un tema de WordPress solía ser imposible sin desarrolladores costosos o sin tener conocimientos de codificación. Pero hoy en día, algunos complementos de WordPress le brindan la posibilidad de crear su propio tema personalizado utilizando la función simple de arrastrar y soltar.

En este artículo, le mostraremos cómo crear su propio tema personalizado de WordPress sin escribir código.

Para saltar a una sección particular del tutorial, puede usar los enlaces rápidos anteriores:

1. Instale el complemento SeedProd
2. Seleccione una plantilla de tema
3. Personaliza las partes de tu tema de WordPress
4. Conéctese con un servicio de correo
5. Publica tu tema personalizado de WordPress

¿Cómo puedes crear un tema de WordPress desde cero?

Los temas de WordPress se construyen usando una combinación de PHP, CSS, JavaScript y HTML. Estos son lenguajes de codificación que requieren mucho entrenamiento para aprender. Entonces, si usted mismo no fuera un desarrollador, su única opción solía ser contratar agencias de desarrollo para crear temas para usted, lo que puede ser muy costoso.

Pero gracias a SeedProd, ahora puede crear su propio tema personalizado de WordPress sin necesidad de programar. Viene con una interfaz simple de arrastrar y soltar que cualquiera puede usar y le permite personalizar fácilmente cada aspecto del diseño de su tema.

¿Por qué SeedProd?

SeedProd es el complemento de creación de páginas de destino más fácil de usar para WordPress.

Proporciona un alto nivel de personalización y viene con una amplia variedad de características adicionales que incluyen:

• Constructor de temas
• Más de 150 plantillas de página de aterrizaje
• Constructor de arrastrar y soltar
• Integraciones de marketing por correo electrónico
• 2 millones de fotos de archivo
• y más.

Con estas funciones, puede crear rápidamente páginas de destino en su sitio web dentro de un tema de WordPress existente. Pero ahora, SeedProd ha agregado una nueva función que le permite crear su propio tema personalizado de WordPress utilizando su mismo diseño de arrastrar y soltar para una máxima facilidad de uso.

Veamos cómo puedes construir un tema de WordPress usando SeedProd.

Cómo crear un tema de WordPress personalizado usando SeedProd

Vamos a suponer que ya tiene un sitio web de WordPress alojado en un dominio para este tutorial. De lo contrario, puede consultar esta guía sobre cómo crear un sitio web de WordPress.

Si desea reemplazar su tema de WordPress existente con el que va a crear, le recomendamos que utilice un sitio de desarrollo de prueba para ello. De esta manera, no corre el riesgo de causar errores accidentalmente en su sitio principal. Los principales servicios de alojamiento de WordPress como Bluehost ofrecen entornos de desarrollo para WordPress.

Finalmente, asegúrese de hacer una copia de seguridad de su sitio antes de crear su tema. Esto asegura que siempre puedas restaurar tu sitio a un estado estable si algo sale mal. Puede encontrar varias opciones en esta lista de complementos de copia de seguridad de WordPress.

Una vez que haya realizado estos preparativos, ¡es hora de comenzar a crear un tema de WordPress personalizado sin código!

Paso 1. Instale el complemento SeedProd

En primer lugar, instale el complemento SeedProd en su sitio de WordPress. Puede ver las instrucciones para instalar complementos de WordPress si nunca antes ha instalado un complemento.

Necesitará al menos la licencia SeedProd Pro para desbloquear la función de creación de temas. Para activar la licencia Pro, abra el área de su cuenta de SeedProd y haga clic en la pestaña Descargas . Desplácese hacia abajo para encontrar su clave de licencia y cópiela.

Luego, abra su área de administración de WordPress y vaya a SeedProd » Configuración. Luego ingrese la clave que copió en el campo Clave de licencia y presione Verificar .

Ahora, dirígete a SeedProd » Theme Builder. Este es el tablero donde vivirán todos los diferentes elementos del tema.

Ahora hay dos maneras de crear su tema con SeedProd: cree cada parte individual de su tema usted mismo o use una plantilla prefabricada y edite las partes que no le gustan.

Cada tema de WordPress consta de diferentes partes que incluyen:

• Encabezamiento
• Pie de página
• Página principal
• Publicación única
• Única página
• Archivo o página de blog
• barra lateral

Puede ser un poco intimidante crear cada una de estas partes desde cero si es la primera vez que crea un tema. En ese caso, hay una manera más fácil de hacerlo.

SeedProd viene con varias plantillas de temas preconstruidas que configuran la estructura general para su tema completo. De esta manera, todas las diferentes partes se agregan automáticamente a la estructura, pero aún puede personalizar cada parte según sus preferencias.

Para el resto del tutorial, utilizaremos uno de los temas de SeedProd para mostrarle los pasos, ya que este es el método más sencillo para principiantes de crear un tema de WordPress personalizado.

Paso 2. Seleccione una plantilla de tema

La función de creación de temas tiene varios temas preconstruidos modelados a partir de sitios web comerciales de diferentes tipos. Para ver los temas disponibles, haga clic en el botón Temas .

SeedProd viene con plantillas para diferentes empresas e industrias, incluidas agencias de marketing, restaurantes, empresas de cuidado de mascotas y más.

Vamos a utilizar el tema de inicio para este ejemplo. Tan pronto como seleccione un tema, SeedProd creará automáticamente todas las partes individuales del tema.

También puede desactivar diferentes partes del tema si no las necesita para su sitio web. Para deshabilitar cualquier sección, puede usar los botones de alternar debajo del encabezado Publicado.

Puede cambiar la configuración de cada parte de su tema haciendo clic en el botón Editar condiciones .

Esto abrirá un modal donde puede cambiar el nombre, el tipo, la prioridad y configurar las condiciones para cuándo y dónde debe aparecer esta parte en su sitio web.

En la mayoría de los casos, puede dejar esta configuración predeterminada y continuar con la personalización de cada parte del tema.

Paso 3. Personaliza las partes de tu tema de WordPress

Ahora que todos los componentes esenciales de su tema están establecidos, podemos personalizar el diseño de cada uno para que luzca exactamente como queremos.

Para comenzar a editar, mueva el cursor sobre una parte del tema y haga clic en Editar diseño .

Para este tutorial, personalizaremos el encabezado, el pie de página, la página de inicio y la página del blog. Los mismos principios de personalización se aplican a todas las demás páginas.

Encabezado y pié de página

Para comenzar a editar el encabezado, haga clic en el botón Editar diseño que aparece cuando pasa el cursor sobre Encabezado. Esto lo llevará a la interfaz del generador de temas de arrastrar y soltar de SeedProd. Señale y haga clic en el área del encabezado para abrir las opciones de personalización, que aparecerán en el panel de la izquierda.

Por defecto, el encabezado tiene el logo de SeedProd. Puedes reemplazarlo con el logo de tu negocio muy fácilmente. Haga clic en la imagen para eliminarla o reemplazarla cargando su propio logotipo.

SeedProd le permite cambiar el tamaño y la alineación de su logotipo. También puede agregar un enlace personalizado al logotipo. Por ejemplo, es posible que desee redirigir a los usuarios a la página de inicio cuando hagan clic en el logotipo.

También puede cambiar el color de fondo de su encabezado. Simplemente mueva el mouse sobre el área del encabezado hasta que vea un contorno azul. Haga clic en él para encontrar un nuevo menú de opciones en el panel de la izquierda. Ahora, puede cambiar el color del encabezado y elegir un color sólido o incluso un degradado.

Ahora, haga clic en la pestaña Avanzado para acceder a más configuraciones, como sombra, espaciado, borde, posición y más.

Cuando haya terminado de realizar todos los cambios, haga clic en el botón Guardar en la parte superior derecha del generador y haga clic en el botón de la cruz para salir al panel principal del generador de temas.

Si desea incluir un encabezado en su sitio, puede repetir estos mismos pasos para editar el diseño de su pie de página.

A continuación, vamos a editar la página de inicio.

Página principal

La página de inicio es la parte frontal de su sitio web. Normalmente, contiene elementos importantes que definen quién eres, qué haces y proporciona prueba social a través de reseñas y testimonios.

La plantilla de tema de inicio que estamos usando tiene todas las secciones clave que normalmente encontrará en la página de inicio de un sitio web comercial, que incluye:

• área de héroe
• Sección de características
• Testimonios
• Sección de preguntas frecuentes

Puede cambiar cada bloque de esta página, incluidas las imágenes, el texto, los botones, los colores y el diseño.

En el gif a continuación, le mostraremos lo fácil que es editar diferentes partes de la página usando simples acciones de arrastrar y soltar.

Use la configuración y los bloques en el menú de la izquierda para editar el diseño hasta que esté completamente satisfecho. Cuando haya realizado todos los cambios, asegúrese de comprobar la vista previa móvil.

Si algún elemento del sitio parece estar fragmentado en la vista móvil, puede volver a editar y hacer ajustes hasta que se vea perfecto.

Cuando esté satisfecho con su página de inicio, presione el botón Guardar y regrese a su panel de creación de temas de SeedProd.

Página de blog

Ahora vamos a crear una página de blog personalizada para su sitio. En el panel de su generador de temas, haga clic en el enlace Editar diseño en la sección Índice del blog, Archivos, Búsqueda para comenzar a editarlo.

Aquí, puede agregar o eliminar diferentes elementos como contenido de publicación, extracto, biografía del autor y mucho más usando la interfaz de arrastrar y soltar. Haga clic en una de las publicaciones que se muestran en esta página para acceder a más configuraciones.

Esta configuración le permite cambiar el tipo de consulta de publicaciones, el diseño y la paginación. También puede cambiar el control de los detalles adicionales que deberían aparecer con cada publicación, como la fecha de la publicación, el autor, la imagen destacada, el extracto y más.

Una vez que haya personalizado la página del blog, haga clic en Guardar y regrese a su tablero una vez más.

CSS globales

La sección Global CSS configura los ajustes globales para los colores, la tipografía, el diseño y el estilo de su tema.

Desde el panel de control de Theme Builder, haga clic en Editar diseño en la sección Global CSS de su tema.

Por ejemplo, puede elegir el color y la fuente de un botón que le gustaría que apareciera en todo su sitio.

Del mismo modo, puede cambiar las fuentes de texto, los fondos, el diseño e incluso agregar CSS personalizado a su tema. Estos cambios se aplicarán en todo el sitio y garantizarán la coherencia estilística.

Cuando haya terminado de ajustar la configuración a su gusto, haga clic en el botón Guardar .

Paso 4. Conéctese con un servicio de correo

SeedProd le permite conectarse con su servicio de marketing por correo electrónico, lo cual es un paso importante si desea incluir una suscripción o un formulario de registro en su tema.

De hecho, si tiene WPForms instalado en su sitio, se integra automáticamente con SeedProd. Por lo tanto, puede incrustar cualquier formulario que haya creado con WPForms dentro de cualquier parte de su tema usando SeedProd.

Una vez que haya creado un formulario, debe asegurarse de que su servicio de marketing por correo electrónico esté conectado con SeedProd para que pueda enviar y recibir correos electrónicos relacionados con el formulario.

Para conectar su servicio de marketing por correo electrónico con su tema SeedProd, haga clic en la pestaña Conectar en la barra superior de la pantalla del generador de temas mientras edita cualquier parte del tema.

Haga clic en cualquier correo de la lista y siga las instrucciones en pantalla para completar la integración con su tema SeedProd. Cuando haya terminado, las entradas de su formulario de suscripción se agregarán automáticamente a su lista de correo.

Paso 5. Publica tu tema personalizado de WordPress

¡Su tema ya está listo para implementarse! Para poner en marcha su tema, vaya al panel de su generador de temas y haga clic en el botón de alternancia Habilitar tema de SeedProd en la parte superior derecha de la pantalla.

¡Ahora, echemos un vistazo a nuestro tema de WordPress personalizado recién creado!

Esta es la página de inicio del tema con el encabezado:

Y aquí está la página del blog.

¡Y eso es! ¡Acabas de crear tu primer tema personalizado de WordPress sin código!

A continuación, cree formularios de contacto para su sitio de WordPress

Ahora que tiene un sitio de WordPress completamente nuevo, debería considerar agregar formularios de contacto para permitir que los visitantes se comuniquen con usted fácilmente. WPForms es el generador de formularios de WordPress más fácil de usar con más de 5 millones de instalaciones activas.

No solo puede hacer crecer su lista de correo con WPForms, sino también realizar una serie de otras actividades, como recolectar donaciones para su organización sin fines de lucro.

Crea tu formulario de WordPress ahora

¿Listo para construir tu formulario? Comience hoy con el complemento de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ayudó, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitos de WordPress.