Recientemente desarrollamos Blockstrap, que es a la vez un plugin (que proporciona los bloques de construcción de páginas) y un tema de bloques (FSE – Full Site Editing) que combina el poder del nuevo Editor de sitio de WordPress y Bootstrap 5.
Desarrollamos Blockstrap como el marco para nuestra nueva generación de temas de directorio, que pronto incluirá un directorio de negocios genérico y un tema de eventos, un tema de bienes raíces, un tema de bolsa de trabajo, un tema de clasificados y muchas más plantillas de directorio para WordPress,
Todos estos temas están diseñados específicamente para crear un sitio de directorio perfecto al píxel usando GeoDirectory.
En este tutorial, encontrarás una guía paso a paso para construir un sitio web de directorio usando el tema Blockstrap, el tema hijo de directorio y nuestro plugin GeoDirectory:
- Instalar el tema Blockstrap/Directory
- Instalar y configurar GeoDirectory
- Diseñar el sitio web de directorio usando el constructor de temas de bloques
En esta guía, te mostraremos cómo crear un directorio en línea atractivo usando el tema Directory y el plugin GeoDirectory.
Con esta configuración, puedes añadir fácilmente funciones basadas en ubicación, hacer que tu sitio luzca increíble y agregar distintos tipos de contenido que cambia de forma dinámica.
Pero por ahora, vamos a mantener las cosas simples y fáciles de entender.
En este tutorial, cubriremos:
- Instalar y configurar el tema y los plugins
- Diseñar el sitio web de directorio con Blockstrap/Directory
Instalación del tema y los plugins.
1. Instala el tema Blockstrap y su tema hijo Directory
Primero, instalemos el tema Directory . Como es un tema hijo de Blockstrap también instalará automáticamente el tema principal.
Instalar el tema Blockstrap también te pedirá que instales el plugin Blockstrap.
el plugin Blockstrap es nuestro constructor de páginas, necesario para añadir la colección de bloques Blockstrap y mejorar el diseño de tu sitio web de directorio.
y su URL (wordpress.org/themes/directory/) porque nos gustó su concepto y lo queríamos para nuestro nuevo producto. Desafortunadamente, esto significó heredar sus reseñas negativas del pasado.
Puedes ir a tu sitio web WordPress y desde
WP-Admin >> Apariencia >> Temas >> Add New: Busca Directory e instala la primera opción de tema.
2. Instalar GeoDirectory
Esto es lo que debes hacer:
- .
- Busca GeoDirectory.
- Instálalo y actívalo.
¡Listo! Los plugins ya están configurados.
3. Asistente de instalación de GeoDirectory
Para GeoDirectory, debes completar el Asistente de configuración para configurar la clave de API de Google Maps e importar algunos listados de prueba.
Elegir el sistema de mapas (Google Maps u OpenStreetMap)
En el primer paso de la configuración, eliges entre dos sistemas de mapas: Google Maps y OpenStreetMaps. Para esta guía, usaremos OpenStreetMaps.
Si prefieres Google Maps, hay algunos pasos adicionales:
- y sigue las instrucciones proporcionadas aquí para crear una clave de API válida.
- Estos son los pasos importantes:
- Activa las claves.
- Crea un nuevo proyecto o selecciona uno existente.
- Obtén la clave.
- Configura una cuenta de facturación.
- Limita la clave de API (para que solo funcione desde la URL de tu sitio web).
El cuarto paso es esencial, pero solo pagas si superas los $200 al mes. Sin embargo, el crédito gratuito suele cubrir las necesidades de la mayoría de los directorios.
Ahora, pasemos a configurar la ciudad predeterminada.
Configurar la ciudad predeterminada
A continuación, seleccionarás la ubicación predeterminada, que es la ciudad principal que aparece en el directorio.
Hemos elegido Filadelfia como ciudad predeterminada, pero puedes elegir cualquier ubicación que prefieras.
Si estás creando un directorio que abarca varias ciudades, necesitarás el complemento Location Manager.
Añadir funciones adicionales
En este paso, configuraremos UsersWP, un plugin para registro de usuarios. Esto permite a los usuarios registrarse e iniciar sesión en tu sitio web.
UsersWP es esencial para que los usuarios puedan gestionar sus listados, crear perfiles y acceder a funciones como las reseñas.
Además, instalaremos Ninja Forms, que añade formularios de contacto a todos los listados. Estos formularios envían correos electrónicos directamente a los propietarios del listado. (NOTA: BlockStrap tiene un formulario de contacto sencillo que se puede usar para esto; Ninja Forms es útil para formularios más avanzados)
Ten en cuenta que AyeCode Connect no es necesario para este tutorial, a menos que quieras añadir complementos premium de GeoDirectory directamente desde tu panel de WordPress.
Añadir datos de prueba
Lo último que hay que hacer en el asistente de instalación es agregar algunos listados de muestra. Esto también crea categorías para los listados, pero siempre puedes cambiarlas más adelante si lo deseas.
Diseña el Blockstrap/Directory Theme Sitio web de directorio
Ahora que hemos instalado el tema y los plugins, y completado la configuración inicial de GeoDirectory, podemos empezar a diseñar nuestro sitio web de directorio.
Nuestro Blockstrap's tema hijo llamado Directory ya incluye una plantilla de bloque prediseñada para las páginas de Geodirectory.
En este artículo, personalizaremos estas plantillas prediseñadas directamente.
1. Blockstrap/Directory Diseño de la página de inicio
Para personalizar el diseño de la página de inicio.
Ve a Apariencia >> Editor >> Haz clic en Templates
Ahora selecciona la plantilla Front page y haz clic en el icono de edición.
antes de editar la plantilla de la página de inicio, primero vamos a crear un logotipo para el sitio web.
1. El logotipo
Lo primero es lo primero: necesitamos un logotipo para nuestro sitio web.
No tienes que contratar a un diseñador para crear la primera versión de tu logotipo.
Uno de los errores más grandes que puedes cometer al iniciar un nuevo directorio es dedicar demasiado tiempo y dinero antes de comprobar si las personas necesitan lo que pretendes crear.
Puedes hacer un logotipo en tan solo cinco minutos usando una aplicación como Canva, que es genial y gratuita (o muy asequible para lo que ofrece si eliges un plan premium).
Para una versión básica de tu producto (llamada MVP, o producto mínimo viable), un logotipo hecho con Canva funcionará perfectamente.
Hay muchas plantillas de logotipos entre las que elegir, y no pasa nada si tu primer logotipo no es perfecto ni especialmente único.
Si tu proyecto empieza a funcionar bien, siempre puedes trabajar en mejorar o cambiar por completo el logotipo más adelante.
Un logotipo normal generalmente no es la razón por la que fracasa un proyecto.
Usaremos este logotipo cuando creemos el encabezado del sitio web.
La cabecera
Ahora agreguemos esta imagen de logotipo seleccionando el bloque correspondiente en el lado izquierdo, como se muestra en la captura de pantalla a continuación.
Ahora agreguemos algunos elementos de menú necesarios. Como Inicio, Lugares, y Blogs, Contacto y Acerca de en nuestro caso.
Puedes usar el bloque BS > Nav item para agregar el nuevo elemento de menú.
CONSEJO PRO: Si decides usar el encabezado transparente en la página de inicio, deberás añadir el logotipo tanto al encabezado normal como al encabezado transparente.
El contenido
Así es como se ve la página de inicio predeterminada con el Blockstrap's Directory Child Theme.
Ya parece completa en sí misma, pero haremos algunos cambios menores.
El gd_location los shortcodes pertenecen al Geodirectory Location Manager complemento. Como no estamos usando este complemento en este momento, voy a eliminar estos shortcodes que aparecen en la captura de pantalla a continuación.
Así es como luce nuestra página de inicio ahora.
Si deseas agregar una nueva sección o realizar cambios en el contenido de cualquier página, puedes usar el tema Blockstrap con bloques integrados que comienzan con BS >
2. Blockstrap/Directory Diseño de la página de listados y búsqueda del sitio web
Como se mencionó anteriormente, los temas Blockstrap y Directory ya cuentan con plantillas prediseñadas para las páginas de GD.
Todas estas plantillas son completas en sí mismas, por lo que no es necesario realizarles ningún cambio.
Dado que las páginas internas utilizan un encabezado hero, debemos personalizar la sección de encabezado de la página de Archivo y actualizarla con el nuevo logotipo y los elementos del menú.
Vayamos a Apariencia >> Editor >> Haz clic en Templates >> Selecciona GD Archive para el diseño de la página de Archivo.
Al igual que en la página de inicio, aquí subiremos el nuevo logotipo y los elementos del menú en el encabezado de la página GD Archive.
Así es como se ve la página GD Archive con el diseño predeterminado.
de manera similar, para la GD Search página selecciona el GD Search Archive plantilla y realiza los cambios necesarios en ella.
Mantendré el diseño predeterminado para este artículo.
3. Blockstrap/Directory Diseño de la página de listado individual del sitio web
Para personalizar la GD Detail página selecciona el GD Single plantilla de página y realizar los cambios necesarios en ella.
Así es como se ve la plantilla predeterminada de la página GD Details, la cual parece completa y contiene todos los elementos necesarios. Por lo tanto, no voy a editarla.
Añadir funciones premium a tu Blockstrap/Directory Sitio web
Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:
- Listados de pago: con el GeoDirectory Listing Price Manager add-on, tienes la posibilidad de elegir cuánto cuesta añadir un listado. Puedes establecer diferentes precios para distintas opciones. Por ejemplo, podrías ofrecer más funciones para los listados de pago, como permitir más imágenes, mientras limitas las funciones para los gratuitos. También puedes decidir qué campos especiales están disponibles y cuán largas pueden ser las descripciones.
- Reclamar Listados: Esta función es muy importante para un directorio. Así es como funciona: primero, el administrador configura la base de datos. Luego, invita a los propietarios de negocios a gestionar sus listados gratuitos. Si un propietario de negocio desea control total, es posible que primero deba actualizar a un listado de pago.
- Publicidad: vender anuncios es otra forma de monetizar un directorio en línea. Si tu sitio web tiene muchos visitantes, puedes usar redes publicitarias. Pero si no los tiene, puedes vender anuncios directamente. Esto significa que las empresas pueden pagar para mostrar banners en áreas específicas de tu sitio, o sus listados pueden aparecer como anuncios, por ejemplo, en la parte superior de los resultados de búsqueda.
Estos son solo tres ejemplos. Sin embargo, un sitio web de directorio ofrece muchas formas de ganar dinero en línea.
Puedes crear un mercado mundial de artículos artesanales, vender entradas para eventos u ofrecer cupones de descuento.
Si estás interesado en comenzar, explora este recurso: Cómo crear un sitio web de directorio desde cero.
Este tutorial es versátil y puede adaptarse para funcionar con cualquier tema o constructor de páginas.
Las posibilidades de lo que puedes hacer con tu sitio web son infinitas.
Conclusión
Hemos publicado una gran cantidad de tutoriales sobre cómo crear un Directorio con los temas y constructores de páginas más destacados.
Si lees alguno de ellos, notarás que construir con el framework Blockstrap y su tema hijo de directorio es más sencillo.
El resultado tiene un aspecto mucho mejor.
Y por último, pero no menos importante, si pruebas un sitio web de Directorio con Blockstrap, también notarás que es mucho más rápido que cualquier otro para el que hayamos creado tutoriales hasta ahora.
Lo mejor de todo es que tanto el tema y plugin Blockstrap como el tema hijo de Directorio son ¡100% gratuitos!
¿A qué estás esperando? ¡Empieza tu sitio web de Directorio con Blockstrap y el plugin GeoDirectory y comienza a ganar dinero en línea ahora!