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

A ¿Te preguntas cómo crear un tema para WordPress?

En este artículo, te mostraré paso a paso cómo crear un tema de WordPress para tu blog, incluso desde cero, sin tener que contratar a un desarrollador ni editar ningún código.

Para un blogger veterano como yo (he estado escribiendo blogs durante más de 10 años), esto es bastante alucinante. El proceso de desarrollar un tema de WordPress desde cero solía ser difícil. Necesitabas conocimientos avanzados de codificación en lenguajes como PHP, CSS, JavaScript, HTML y asegurarte de que se adhiera a los estándares de codificación de WordPress. O bien, tenías que contratar desarrolladores de temas para que crearan uno para ti, lo que puede resultar caro.

Pero ahora existen creadores de temas para WordPress que permiten que cualquiera pueda desarrollar un tema fácilmente.

En este tutorial aprenderás cómo crear un tema personalizado en WordPress de la forma más sencilla posible.

Vamos a sumergirnos en ello.

En esta guía:

• Paso 1: Instalar SeedProd
• Paso 2: Elige una plantilla de tema
• Paso 3: Personaliza las partes del tema de WordPress
• Paso 4: Editar el diseño de todo el sitio
• Paso 5: Conecte su servicio de marketing por correo electrónico
• Paso 6: Publica tu tema personalizado de WordPress

Puntos clave sobre cómo crear un tema para WordPress

• Instale y active el complemento SeedProd en su sitio de WordPress.
• Elija entre una amplia selección de plantillas prediseñadas o comience a construir desde cero utilizando el editor de arrastrar y soltar.
• Personalice los elementos de diseño, la disposición, los colores, las fuentes y más de su tema con vistas previas en vivo para probar su tema.
• Integre con WooCommerce para crear una tienda en línea profesional con un diseño consistente.
• Conecte SeedProd con su servicio de marketing por correo electrónico para capturar y administrar suscriptores sin problemas.
• Obtenga una vista previa de sus cambios, realice los ajustes finales y publique su tema personalizado de WordPress con unos pocos clics.
• Disfrute de un sitio web coherente y de aspecto profesional sin necesidad de escribir código, gracias a la interfaz y las funciones fáciles de usar de SeedProd.

La mejor herramienta para crear un tema personalizado de WordPress (desde cero)

Si deseas desarrollar un tema sin codificar, debes considerar SeedProd .

SeedProd es el mejor generador de temas del mercado. Lo utilizan más de 1000000 de profesionales para desarrollar fácilmente un tema y un diseño de página personalizados para WordPress, sin necesidad de codificación.

Incluye un editor de temas de arrastrar y soltar que te permite crear tu propio tema de WordPress exactamente como lo deseas. Simplemente apunta y haz clic para agregar, editar o eliminar cualquier elemento.

También hay bloques listos para usar de un tema de WordPress que puedes agregar en un instante. Elige entre bloques como botones de llamada a la acción, titulares, carruseles de imágenes, videos, testimonios , temporizadores de cuenta regresiva y más.

Además, ni siquiera necesitas comenzar a diseñar desde cero. SeedProd incluye más de 300 temas y diseños de página personalizables y prediseñados para que puedas comenzar.

SeedProd también ofrece funciones potentes para todos los componentes de un tema de WordPress:

• Modos de mantenimiento y próximamente incorporados
• Más de 300 kits de temas y plantillas de página (consulte cómo instalar kits de plantillas aquí )
• Vista previa en vivo en dispositivos móviles y de escritorio
• Numerosas combinaciones de colores y fuentes.
• Biblioteca de fotografías de stock gratuitas
• Integración perfecta con WooCommerce
• Y mucho más…

Puede obtener más información en nuestra revisión detallada de SeedProd .

Ahora, comencemos el tutorial…

Cómo crear un tema personalizado para tu sitio web de WordPress usando SeedProd

Dado que SeedProd es un complemento de WordPress , asumimos que ya tienes un blog básico de WordPress alojado en un dominio y tal vez usas un tema de inicio.

De lo contrario, puedes seguir este tutorial sobre cómo instalar WordPress . Incluye instrucciones para la instalación de WordPress en todos los mejores servicios de alojamiento de blogs, como Bluehost, HostGator, SiteGround y otros.

Si ya tienes instalado un tema de WordPress para crear tu sitio, no tienes que preocuparte por cómo se verá. SeedProd lo reemplazará cuando publiques tu tema personalizado.

Sin embargo, deberías hacer una copia de seguridad de tu sitio web antes de realizar cambios importantes con un complemento como Duplicator . Para obtener instrucciones paso a paso, aquí tienes un tutorial sobre cómo hacer una copia de seguridad de tu sitio de WordPress .

Y si quieres un tutorial en vídeo que te muestre cómo crear tu propio tema personalizado de WordPress, han creado uno muy útil aquí:

Pero con todo eso cubierto, profundicemos en la creación de tu tema.

Paso 1: Instalar SeedProd

El primer paso es instalar y activar el complemento SeedProd.

Para hacer eso, vaya al sitio web oficial de SeedProd y haga clic en Obtener SeedProd ahora .

Seleccione el plan Pro o Elite para acceder al generador de temas y completar el proceso de pago.

Una vez que hayas comprado el complemento, debes instalarlo y activarlo en tu sitio de WordPress. Si necesitas ayuda, puedes seguir este tutorial sobre cómo instalar un complemento de WordPress .

A continuación, debe verificar su clave de licencia de SeedProd. Primero, abra 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, dirígete al área de administración de WordPress en el panel de control de WordPress y ve a SeedProd » Configuración . Ingresa la clave de licencia que copiaste en el campo provisto y haz clic en el botón Verificar clave .

Ahora está listo para comenzar a desarrollar su tema personalizado para WordPress.

Paso 2: Elige o crea una plantilla de tema de WordPress

Vaya a SeedProd » Theme Builder desde el panel de administración de WordPress. Esto lo llevará a la página del panel de control de Theme Builder.

SeedProd te ofrece dos formas diferentes de crear un tema personalizado:

• Haga clic en Temas para personalizar una de las plantillas de temas ya preparadas.
• Haga clic en Agregar una nueva plantilla de tema para crear cada parte del tema desde cero.

Todos los temas de WordPress incluyen partes del tema como el encabezado, el pie de página, la página de inicio, la página única, la publicación única, la página de blog o archivo y la barra lateral .

Crear cada una de estas partes temáticas puede resultar un poco intimidante para los principiantes.

Por lo tanto, para este tutorial, recomendamos utilizar uno de los temas prediseñados de SeedProd. Haga clic en el botón Temas para ver los temas disponibles.

SeedProd viene con un directorio de temas con más de 200 temas diseñados específicamente para agencias de marketing, blogs, restaurantes, tiendas de comercio electrónico, autónomos , músicos y más.

Elige el tema que te guste colocando el cursor sobre él y haciendo clic en el botón Marcar . Usaremos el tema Viajes para este tutorial.

Una vez que haya seleccionado su tema, SeedProd creará automáticamente todas las partes del tema que necesita, como navegación de encabezado personalizada, página de inicio, índice de blog, publicación única, página única, etc.

Si no desea utilizar ciertas partes del tema, puede cambiar el botón a No debajo del encabezado Publicado .

A continuación, personalicemos cada parte del tema para que sea propio.

Paso 3: Personaliza las partes de tu tema

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

En este tutorial le mostraremos cómo editar la página de inicio como ejemplo.

Una vez que haga clic en Editar diseño en la parte Página de inicio, será llevado al editor de temas visuales de SeedProd.

En el lado izquierdo, puedes ver los bloques de construcción prediseñados de un sitio de WordPress y las secciones que puedes agregar a tu tema. En el lado derecho, puedes ver una vista previa de cómo se ve un sitio web de WordPress en vivo.

Editar elementos de tema existentes

Puedes hacer clic en cada elemento existente en el tema para editarlo. Por ejemplo, puedes hacer clic en el título y las opciones de edición aparecerán en el lado izquierdo.

Puede cambiar el texto, la fuente, la alineación, el tamaño y más.

Como otro ejemplo, puedes hacer clic en la imagen de fondo para cambiarla. Puedes elegir una imagen de tu biblioteca multimedia o usar una imagen de la biblioteca de fotografías de archivo .

Si hay algún elemento que deseas eliminar, selecciónalo y haz clic en el icono de la papelera.

Agregar bloques de etiquetas de plantilla

A continuación, agreguemos bloques de etiquetas de plantilla personalizados al tema. Las etiquetas de plantilla son bloques dinámicos y adaptables que le permiten importar contenido desde su base de datos de WordPress.

Por ejemplo, puede arrastrar y soltar el bloque Publicaciones en su página para mostrar publicaciones recientes del blog.

Otras etiquetas de plantilla que quizás quieras incluir en tu tema son:

• Extracto de la publicación
• Cuadro de autor
• Publicar comentarios
• Navegación de entradas
• Título del archivo
• Y más

Agregar bloques estándar y avanzados

Además de las etiquetas de plantilla, SeedProd viene con un montón de bloques listos para usar que puedes agregar a tu tema.

Tiene todos los elementos estándar que cualquier sitio web necesitaría, como:

• Titular
• Texto
• Botón
• Imagen Vídeo
• Lista
• Divisor
• Espaciador
• Columna

Simplemente arrastre y suelte cualquiera de estos bloques en su página para usarlos.

Además, hay bloques avanzados que puedes usar para aumentar la participación, generar clientes potenciales e impulsar conversiones , como:

• Formulario de contacto
• Formulario de suscripción
• Temporizador de cuenta regresiva
• Perfiles sociales
• Testimonios
• Compartir en redes sociales
• Calificaciones de estrellas
• Y mucho más

Para este tutorial, agregaremos un formulario de suscripción a la página de inicio para obtener más suscriptores de correo electrónico .

Nuevamente, puedes hacer clic en el bloque para editarlo. Puedes editar los campos, el tamaño, la alineación, el estilo del botón, el texto del botón y más.

Si tienes una tienda online configurada , también puedes usar los bloques WooCommerce personalizados de SeedProd en tu tema. Esto incluye bloques como agregar al carrito, finalizar compra, carrito, cuadrícula de productos, productos más vendidos y más.

Utilice secciones predefinidas

También puede utilizar las secciones preparadas de SeedProd para crear rápidamente el diseño de su sitio web.

Haga clic en la pestaña Secciones en el panel Diseño. Se abrirá una nueva ventana en la que podrá elegir entre secciones como:

• Llamado a la acción
• Preguntas frecuentes
• Características
• Contacto
• Testimonios
• Y más

Para agregar una sección a tu tema, pasa el cursor sobre ella y haz clic en el botón (+) .

La sección se agregará automáticamente a la página. Desde allí, podrás editarla como lo harías con los bloques y otros elementos.

Cuando hayas terminado de personalizar la página de inicio, no olvides presionar el botón Guardar en la esquina superior derecha.

Repita este proceso para cada parte del tema hasta que todo el tema esté personalizado.

Paso 4: Editar el diseño de todo el sitio

Al personalizar su tema, también querrá asegurarse de que el diseño de su blog sea coherente en todo el sitio.

Usar la misma tipografía, colores y tamaños de fuente en cada página te ayudará a crear una apariencia cohesiva.

Para editar el diseño de todo el sitio de su tema, diríjase al panel de creación de temas y haga clic en Editar diseño debajo de la parte del tema CSS global .

Aquí, puedes controlar fácilmente el estilo de tu tema, incluidos los colores, las fuentes, el fondo, los botones, los formularios, el diseño y el CSS personalizado en tu hoja de estilos.

Por ejemplo, puedes hacer clic en la sección Botones y elegir un color personalizado. Esto aplicará ese color a todos los botones del tema.

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

Paso 5: Conecte su servicio de marketing por correo electrónico

A continuación, SeedProd le permite conectarse directamente a servicios de marketing por correo electrónico populares como Constant Contact, Brevo (anteriormente Sendinblue), Mailchimp, AWeber y muchos más.

Esto es importante si ha añadido un formulario de suscripción por correo electrónico en cualquier parte de su tema. Con su servicio de correo electrónico conectado, los nuevos contactos se añadirán a su lista automáticamente.

Para conectar su servicio de correo electrónico a su tema SeedProd, haga clic en la pestaña Conectar mientras edita cualquier parte del tema.

Luego, haga clic en su proveedor de servicios de correo electrónico en la lista y siga las instrucciones en pantalla para completar la integración.

¡Ahora todas las entradas de tu formulario de suscripción se agregarán automáticamente a tu lista de correo electrónico!

Paso 6: Publica tu tema personalizado de WordPress

¡Muy bien, es hora de publicar tu tema personalizado de WordPress! Lo mejor es que solo es necesario hacer clic en un botón.

Simplemente dirígete a la página SeedProd » Theme Builder y cambia el interruptor junto a Habilitar tema SeedProd a la posición “Sí”.

Esto reemplazará su tema existente con el tema personalizado de WordPress que creó con SeedProd.

¡Así de sencillo! Ahora puedes visitar tu sitio y ver cómo luce en vivo:

---

¡Disfruta hoy mismo del desarrollo sencillo de temas para WordPress!

¡Eso es todo!

Ahora ya sabes cómo crear un tema personalizado para WordPress sin escribir ningún código. Esto te permitirá diseñar fácilmente el blog de tus sueños, incluso si eres principiante.

Si te gustó este tutorial, quizás quieras echar un vistazo a nuestra publicación de ejemplos de diseño de blogs para inspirarte. Podrás encontrar excelentes ideas para el diseño de tu propio tema.

O también puedes consultar nuestra lista de los mejores temas premium para blogs de WordPress para inspirarte.

¡También asegúrese de consultar nuestra guía sobre cómo agregar código personalizado a WordPress sin modificar sus archivos de tema (el archivo php en su carpeta de tema)!

¡Y no olvides suscribirte a nuestro boletín informativo por correo electrónico para recibir más consejos útiles sobre blogs!