Cómo crear fácilmente un tema de WordPress personalizado en 5 pasos

Publicado: 2022-07-19

¿Desea crear un tema personalizado de WordPress para el sitio web de su pequeña empresa?

El desarrollo de temas de WordPress solía ser un desafío sin codificar el diseño de su tema desde cero o contratar desarrolladores costosos. Sin embargo, en estos días, hay disponibles potentes complementos de WordPress que le permiten crear temas visualmente utilizando la sencilla función de arrastrar y soltar.

Este artículo le mostrará cómo crear un tema de WordPress desde cero sin tocar una sola línea de código.

Tabla de contenido
  1. Paso 1. Instale y active el complemento SeedProd
  2. Paso 2. Elija una plantilla de tema de WordPress
  3. Paso 3. Personaliza las partes de tu tema
  4. Paso 4. Conecte su servicio de marketing por correo electrónico
  5. Paso 5. Publica tu tema personalizado de WordPress

¿Por qué personalizar su tema de WordPress?

Internet está ocupado con millones de sitios web que compiten por la atención de su público objetivo. Una forma de destacar y demostrar que eres diferente es personalizar tu hogar en la web: tu sitio web.

Debido a que muchos propietarios de sitios web de WordPress se quedan con los temas de inicio desde el primer momento, personalizar el suyo puede ayudar a que su sitio se destaque de sus competidores. Además, con un tema de WordPress personalizado, es más fácil mostrar la personalidad de su marca, agregar funciones de generación de prospectos y mejorar la velocidad y el rendimiento de su sitio web.

¿Cómo construyo un tema de WordPress desde cero?

La mayoría de los temas de WordPress están hechos con lenguajes de codificación HTML, CSS, PHP y JavaScript. Aprender estos idiomas requiere tiempo y capacitación, lo cual no es realista para muchos propietarios de sitios web.

Eso significa que una de sus únicas opciones es contratar a un desarrollador o agencia de desarrollo para crear un tema personalizado para usted. En consecuencia, el costo de un sitio de WordPress personalizado puede ascender a miles de dólares.

Otra opción es usar SeedProd para crear su propio tema personalizado de WordPress. Este poderoso complemento de WordPress viene con una interfaz fácil de arrastrar y soltar que cualquier persona, incluso los principiantes, puede usar para personalizar cada aspecto de su tema de WordPress.

¿Por qué debería usar SeedProd?

SeedProd es el complemento de creación de sitios web más fácil de usar para WordPress.

seedprod WordPress website builder

Incluye amplias opciones de personalización y ofrece una amplia variedad de características, que incluyen:

  • Creador de temas de WordPress
  • Más de 170 plantillas de página de aterrizaje
  • Kits completos de temas de WordPress
  • Constructor de arrastrar y soltar
  • Integraciones de marketing por correo electrónico
  • Funcionalidad de importación/exportación
  • Gestión de suscriptores
  • Próximamente y modo de mantenimiento
  • y mucho más.

Anteriormente, solo podía usar SeedProd para crear páginas de destino dentro de su tema existente. Pero después de varias actualizaciones revolucionarias, puede crear temas completos de WordPress con el mismo generador de arrastrar y soltar.

Eso significa que puede personalizar su sitio web de arriba a abajo sin codificación, así que averigüemos cómo hacerlo.

Crear un tema de WordPress personalizado con SeedProd

Para este tutorial, supondremos que ya tiene un sitio de WordPress alojado en un dominio. Si no lo hace, puede seguir esta guía paso a paso sobre cómo crear un sitio web de WordPress.

Debido a que SeedProd reemplaza su tema de WordPress actual con el que creará desde cero, le sugerimos que utilice un entorno de desarrollo. De esa forma, sus cambios no afectarán su sitio web en vivo hasta que esté listo para publicarlos.

Los servicios populares de alojamiento de WordPress como Bluehost ofrecen entornos de preparación y desarrollo con sus paquetes de alojamiento.

bluehost WordPress hosting

Además de crear un entorno de prueba, asegúrese de hacer una copia de seguridad de su sitio antes de comenzar. Esto asegurará que pueda restaurar su sitio web si algo sale mal. Consulte esta publicación para conocer los mejores complementos de copia de seguridad para WordPress.

Después de preparar lo anterior, puede comenzar a crear su tema de WordPress personalizado siguiendo los pasos a continuación.

Paso 1. Instale y active el complemento SeedProd

Para el primer paso, debe instalar y activar el complemento SeedProd en su sitio de WordPress. Siga esta guía detallada sobre cómo instalar un complemento de WordPress si necesita ayuda con este paso.

Deberá elegir la licencia SeedProd Pro para desbloquear la función Theme Builder. Esto le dará una clave de licencia que puede ingresar en la página de configuración del complemento.

Para encontrar su clave de licencia, inicie sesión en su cuenta de SeedProd, haga clic en la pestaña Descargas y luego haga clic en el icono de copia para guardar su clave en el portapapeles.

Copy the SeedProd license key

Luego, vaya a su administrador de WordPress, navegue a SeedProd » Configuración y pegue la clave en el campo 'Clave de licencia'. Luego haga clic en el botón Verificar clave para guardar los cambios.

Paste the SeedProd license key in WordPress

Ahora, vaya a la página SeedProd » Theme Builder , donde SeedProd mostrará los diferentes elementos de su tema.

SeedProd theme builder

Hay 2 formas diferentes de crear un tema de WordPress personalizado con SeedProd. Puede crear cada parte de su tema desde cero, o puede usar una plantilla prefabricada y personalizar cada parte para que se adapte a las necesidades de su sitio web.

Cada tema de WordPress consta de varias partes llamadas archivos de plantilla, que incluyen:

  • Encabezamiento
  • Pie de página
  • Publicación única
  • Única página
  • Archivo o página de blog
  • Resultados de la búsqueda
  • parte global
WordPress theme template files

Esto puede ser bastante abrumador si es la primera vez que crea un tema desde cero. Por eso, recomendamos comenzar con una plantilla de tema prefabricada.

SeedProd tiene varias plantillas de temas receptivos que configuran la estructura de su tema con un solo clic. Genera cada archivo de plantilla automáticamente, pero también le permite editar cada archivo con sus propias personalizaciones.

Para el resto de esta guía, usaremos una plantilla de tema para mostrarle cada paso del proceso de personalización porque es el enfoque más fácil para principiantes para crear un tema personalizado.

Paso 2. Elija una plantilla de tema de WordPress

Para ver todas las plantillas de temas de SeedProd, haga clic en el botón Temas .

Click the themes button

Se abrirá una ventana que muestra temas para diferentes tipos de sitios web, incluidos portafolios, viajes, tiendas WooCommerce, bienes raíces, eventos y más.

Usaremos el tema de inicio para este tutorial, así que pase el mouse sobre la imagen del tema y haga clic en el icono de marca de verificación naranja.

Choose a WordPress theme template

Tan pronto como haga clic para importar la plantilla del tema, SeedProd generará las partes del tema automáticamente.

Custom WordPress theme template parts

Si no necesita una parte de tema específica, desactívela haciendo clic en el interruptor debajo del encabezado Publicado en la posición 'No'.

Turn off a WordPress theme part

También puede cambiar las condiciones de cada parte haciendo clic en el enlace 'Editar condiciones'.

edit theme part conditions

Eso abrirá una ventana donde puede elegir el nombre de la pieza, el tipo, la prioridad y dónde debe aparecer la pieza en su sitio web.

Theme part condition settings

En muchos casos, no necesitará cambiar esta configuración y podrá personalizar directamente el aspecto de cada parte.

Paso 3. Personaliza las partes de tu tema

Ahora que las partes esenciales de su tema están configuradas, puede personalizar sus diseños para que se vean de la manera que desee. Para editar un archivo de plantilla, pase el cursor sobre él y haga clic en el enlace 'Editar diseño'.

Customize a theme part

Personalizaremos las partes Encabezado, Pie de página, Inicio y Blog para esta guía. Personalizar las otras partes del tema sigue los mismos principios.

Personalización de encabezado y pie de página de WordPress

Para personalizar su encabezado, mueva el cursor sobre la plantilla de encabezado y haga clic en Editar diseño .

Edit WordPress header design

En la siguiente pantalla, verá la interfaz del generador de temas de SeedProd. Puede apuntar y hacer clic en cualquier parte de la vista previa en vivo para ver la configuración de cada elemento en el panel de la izquierda.

SeedProd WordPress theme builder interface

Comencemos haciendo clic en el logotipo predeterminado de SeedProd para abrir la configuración del bloque de imagen. En el panel de configuración de contenido, puede hacer clic en el ícono de la papelera para eliminar la imagen predeterminada y cargar un nuevo logotipo desde su computadora o la biblioteca de medios de WordPress.

Customize WordPress logo

En el mismo panel, puede cambiar el tamaño de la imagen, la alineación y darle a su logotipo un enlace personalizado. Por ejemplo, puede redirigir a los visitantes que hacen clic en su logotipo a su página de inicio.

seedprod image block settings

También puede cambiar el color de fondo de su encabezado haciendo clic en el icono de configuración de la fila. Desde allí, puede agregar una imagen de fondo, un color o un degradado de fondo personalizado.

Header row customization options

A continuación, haga clic en el bloque de menú en su vista previa en vivo para personalizar su menú de navegación. SeedProd usa el bloque Menú de navegación para esta sección de forma predeterminada, que tiene 2 opciones de menú diferentes:

  • Simple: agregue enlaces de menú individualmente en la interfaz del constructor
  • Menú de WordPress : use el menú nativo de WordPress para mostrar su navegación
Navigation menu block settings

Después de elegir su tipo de menú, puede hacer clic en la pestaña Avanzado y cambiar los colores, la tipografía, los estilos y más del enlace del menú.

Advanced navigation menu settings

Cuando esté satisfecho con el diseño de su encabezado, haga clic en el botón Guardar en la esquina superior derecha y haga clic en el ícono 'X' para salir al generador de temas.

Save custom WordPress theme header

Ahora, puede seguir los mismos pasos para personalizar su pie de página de WordPress, y cuando haya terminado, puede continuar con la edición de su página de inicio.

Personalización de su página de inicio de WordPress

La página de inicio de su sitio web es la página principal de su sitio y generalmente incluye elementos esenciales que definen su negocio. Por ejemplo, detalles sobre quién es usted, qué hace, reseñas y testimonios e información de contacto.

Customize WordPress homepage sections

La plantilla que estamos usando incluye las siguientes secciones de la página de inicio:

  • Héroe
  • Características
  • Testimonios
  • preguntas frecuentes

Puede cambiar todos los aspectos de esta página, incluido el diseño, las imágenes, el contenido, los botones y más. Eche un vistazo a este ejemplo rápido para ver lo fácil que es editar diferentes partes de su página de inicio:

customize WordPress theme

Puede usar los bloques y las secciones del lado izquierdo para editar su página de inicio hasta que esté satisfecho con el aspecto de todo. Por ejemplo, puede agregar calificaciones de estrellas, mapas de Google, formularios de búsqueda y muchos otros elementos del sitio web.

También es importante verificar la versión móvil de su página de inicio.

Mobile preview icon

Si la versión móvil de su sitio no se ve bien, puede continuar editándola hasta que se vea perfecta.

Mobile WordPress theme preview

Cuando esté satisfecho con el diseño de su página de inicio, guarde los cambios y regrese al tablero del generador de temas de SeedProd.

Estilo de su página de blog personalizada

La siguiente parte del tema que personalizaremos es la página del blog. En el panel del generador de temas, busque el encabezado Blog, Índice, Archivos, Búsqueda y haga clic en el enlace Editar diseño .

Edit WordPress blog page

En esta página, puede agregar, eliminar y mover diferentes elementos, como el contenido de su publicación de blog, la imagen destacada, el extracto y la biografía del autor.

WordPress blog page layout

De manera predeterminada, esta plantilla usa el bloque Publicaciones para mostrar una lista de publicaciones de blog recientes, así que haga clic en él para mostrar las diferentes configuraciones que puede configurar.

Posts block settings

En el panel de configuración de Publicaciones, puede elegir el tipo de publicación de blog para mostrar y mostrar u ocultar información como la paginación, metadatos, detalles del autor, recuento de comentarios y más.

Después de personalizar la página de su blog, haga clic en el botón Guardar y regrese al tablero del generador de temas.

Definición de su configuración global

La última parte de la plantilla que veremos controla la configuración de estilo global para los botones, colores, tipografía y diseño de su tema. Busque la parte Global CSS y haga clic en el enlace Editar diseño para abrir la configuración.

Edit global css template

Puede expandir cada pestaña en esta pantalla y personalizar las diferentes configuraciones.

Global CSS settings

Por ejemplo, puede abrir la pestaña Botón y personalizar el estilo predeterminado de cada botón en su sitio web.

Global WordPress theme button settings

Además, puede cambiar las fuentes, el diseño, el fondo y agregar CSS personalizado a su tema de WordPress. Cada cambio que realice se aplicará en todo su sitio web automáticamente.

Recuerde hacer clic en el botón Guardar para guardar los cambios antes de continuar.

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

Si ha utilizado el formulario de suscripción o el bloque de formulario de contacto en el diseño de su tema, necesitará una forma de agregar nuevos contactos a su lista de correo electrónico. Afortunadamente, SeedProd se integra directamente con los servicios de marketing por correo electrónico más populares para facilitar esta tarea.

Puede encontrar las integraciones de correo electrónico de SeedProd haciendo clic en la pestaña Conectar al editar cualquier diseño. Desde allí, puede encontrar su servicio de marketing por correo electrónico y seguir las instrucciones en pantalla para conectarse.

SeedProd email marketing services

Además de integrarse directamente con los servicios de correo electrónico, SeedProd puede almacenar contactos en su tablero de suscriptor integrado. Esto es útil si está comenzando a crear su lista de correo electrónico y aún no ha elegido un proveedor.

SeedProd subscriber dashboard

Paso 5. Publica tu tema personalizado de WordPress

Ahora que ha personalizado su tema personalizado de WordPress, es hora de hacerlo vivir en su sitio web. Para hacer eso, diríjase al tablero del generador de temas y gire la palanca junto al encabezado Habilitar tema SeedProd a la posición 'Encendido'.

Enable seedprod theme

Después, puede ir a la interfaz de su sitio web y ver su nuevo tema personalizado de WordPress.

create custom WordPress theme example

¡Ahí tienes!

Esperamos que esta publicación lo haya ayudado a aprender cómo crear un tema de WordPress desde cero sin codificación.

¿Sabías que SeedProd también incluye un bloque RafflePress? Agregar obsequios de RafflePress en cualquier parte del diseño de su tema personalizado hace que sea muy fácil aumentar el tráfico, los clientes potenciales y los seguidores en las redes sociales.

¿Listo para sumergirte?

Comience con SeedProd aquí y obtenga su copia de RafflePress aquí.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver los tutoriales en video de RafflePress. También puede encontrarnos en Twitter y Facebook.