Aquí tienes una guía paso a paso para construir un sitio web de directorio usando el tema Ollie para WordPress:
- Instala el tema Ollie
- Instalar y configurar GeoDirectory
- Diseña el sitio web de directorio usando el tema OllieWP y Gutenberg Editor
GeoDirectory es totalmente compatible con los temas de bloques FSE como Ollie, por lo que en este caso no necesitaremos un constructor de páginas ni un plugin adicional de bloques.
GeoDirectory ofrece una solución robusta y flexible para crear un directorio en línea dinámico usando cualquier tema o constructor de páginas.
En este tutorial, mostraremos cómo construir un sitio web de directorio con el OllieWP Tema en combinación con el plugin GeoDirectory.
Este dúo permite a los usuarios integrar fácilmente funciones basadas en ubicación, personalizar diseños de maquetación e incorporar bloques de contenido interactivo, garantizando una experiencia de usuario intuitiva y atractiva.
Con este enfoque integrado, los desarrolladores web y diseñadores pueden lograr fácilmente un sitio de directorio de nivel profesional adaptado a mercados de nicho específicos o a las necesidades de comunidades más amplias.
Veamos cómo podemos hacerlo en detalle.
En este tutorial:
Instalación del tema y los plugins.
1. Instalar el tema OllieWP
Necesitamos instalar un tema y, para este tutorial, instalarás el OllieWP Tema.
Ve a Apariencia >> Temas
Selecciona Añadir nuevo, Instalar, y Activar el OllieWP Tema.
2. Instalar GeoDirectory
Por último, necesitas instalar GeoDirectory.
Ve a Plugins >> Añadir nuevo, busca GeoDirectory. Por favor, instálalo y actívalo, y habremos terminado de instalar los plugins.
3. Asistente de instalación de GeoDirectory
Para GeoDirectory, deberás completar el asistente de configuración para configurar la clave API de Google Maps e importar algunos listados de ejemplo.
Elegir el sistema de mapas (Google Maps u OpenStreetMap)
Puedes elegir entre dos sistemas de mapas en el primer paso del asistente: Google Maps y Open Street Maps (que no requiere una clave API).
En este tutorial seleccionamos OpenStreetMap.
En caso de que desees seleccionar Google Maps, sigue estos pasos adicionales.
Haz clic en el botón Generar clave y sigue los pasos de este documento para generar una clave API válida.
Los pasos esenciales son:
- Activar las claves.
- Crear o seleccionar un proyecto existente.
- Obtener la clave.
- Activar una cuenta de facturación.
- Restringir la clave API (para que solo pueda usarse desde la URL de tu sitio web)
Sobre el punto cuatro: es un requisito. Sin embargo, solo se te cobra si superas el límite, que es de $200/mes.
Este crédito gratuito es más que suficiente para el 99% de los directorios.
Configurar la ciudad predeterminada
Después de eso, configurarás la ubicación predeterminada. Esta es la ciudad para la que se crea el directorio.
Estableceremos Philadelphia como la ciudad predeterminada.
Puedes usar cualquier ubicación que necesites.
Si necesitas agregar listados a más de una ciudad, necesitarás el complemento Location Manager.
Añadir funciones adicionales
En este paso, instalaremos UsersWP, un plugin de inicio de sesión de usuarios que permite a los usuarios registrarse e iniciar sesión en tu sitio web.
Esto es necesario para permitir que los usuarios añadan y editen sus listados. También creará perfiles de usuario donde podrán encontrar sus listados, reseñas y demás.
También instalaremos Ninja Forms para que todos los listados tengan un formulario de contacto que envíe correos electrónicos directamente a los propietarios del listado.
AyeCode Connect no es obligatorio para este tutorial. Es necesario principalmente si deseas añadir complementos premium de GeoDirectory e instalarlos directamente desde el Panel de WordPress.
Añadir datos de prueba
El último paso para completar el asistente de instalación es añadir algunos listados de prueba. Esto también añadirá categorías de listados que podrás editar más adelante según tus necesidades.
No añadirás widgets de barra lateral ni elementos de menú ahora mismo, ya que lo haremos más adelante.
Diseña el OllieWP Sitio web de directorio
Ahora que hemos instalado el tema y los plugins y realizado la configuración preliminar de GeoDirectory, podemos empezar a diseñar nuestro sitio web de directorio con el OllieWP conjunto de herramientas.
1. OllieWP Diseño de la página de inicio del directorio
Puedes crear una nueva página o usar una que WordPress crea por defecto, como la Página de muestra.
Ve a Páginas, edita la página de muestra y renómbrala como Inicio, o crea una nueva página para esto.
A continuación, ve a Apariencia > Editor > Páginas > Inicio y haz clic en el botón de editar.
El logotipo
Lo primero es lo primero: necesitaremos un logotipo para nuestro sitio web.
No necesitas 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 invertir demasiado tiempo y dinero antes de probar el encaje del producto en el mercado.
Puedes diseñar un logotipo en cinco minutos con una aplicación como Canva, que es económica y sorprendentemente buena.
Para un MVP (producto mínimo viable), un logotipo diseñado con Canva será más que suficiente.
Hay varias plantillas de logotipos para elegir, y no importa si tu logotipo inicial no es tan perfecto y original como crees que debería ser.
Si tu proyecto cobra impulso, siempre puedes invertir en mejorarlo o cambiarlo radicalmente más adelante.
Un logotipo mediocre nunca es la causa principal del fracaso de un proyecto.
El menú de navegación
Después de crear y añadir el logotipo, ve a Apariencia > Editor, y crea tu menú.
Haz clic en los menús de la parte superior y elimina todos los existentes.
Ahora vamos a añadir un bloque de columnas con un diseño de dos columnas.
En la columna izquierda, añade el bloque de logotipo del sitio.
Haz clic en el contenedor principal del encabezado y, desde la configuración del bloque, establece el Fondo: #FFFFF
En la columna derecha, añade el menú de navegación.
Añadimos los siguientes enlaces de navegación principal y algunos enlaces de subnavegación:
- Inicio
- Acerca de
- Blog
- Lugares y agregar lugares
- Perfil
- Login/out
El bloque Login/out mostrará únicamente los enlaces de inicio y cierre de sesión según el estado de sesión del usuario.
El contenido
Voy a comenzar a construir esta página desde cero usando el OllieWP y bloques de Gutenberg.
Ve a Apariencia > Editor > Diseño > Páginas y haz clic en el botón de editar la página de inicio.
necesitamos un encabezado hero en la página de inicio; para eso, eliminemos todo el contenido de esta página y añadamos un Cubrir bloque.
A continuación, comprueba la configuración del bloque y establece la URL de la imagen de fondo.
Para la sección hero, necesitamos una imagen y descargaremos una imagen gratuita de Pexels.com (Gracias, @rachel-claire).
añadiremos los siguientes ajustes en este bloque de portada
Contenido: 1200
Ancho: 100
Opacidad: 50
Relleno y margen: 0
Altura mínima de la portada: 600
Ahora añadamos una etiqueta de encabezado dentro de este bloque de portada con el
Texto: Find The Best Restaurant in Philadelphia
también le daremos a la etiqueta de encabezado una clase adicional ( heading-text-center ) para aplicarle algún estilo.
Ahora añadamos el siguiente estilo en el personalizador del tema.
.heading-text-center{ text-align:center; }
Ahora añadamos el bloque GD > search debajo de este encabezado.
debajo de él, añadamos algo de espacio usando un bloque espaciador con una altura de: 60
Ahora añadamos una columna vacía y coloquemos el bloque GD > Categories dentro de ella.
Establece las opciones del bloque de la siguiente manera
Tipo de diseño: Fondo de imagen
Elementos por fila: 3
Habilitar el uso de imagen de categoría
Puedes asignar la imagen a una categoría editando la categoría desde wp-admin -> places -> Place Categories.
Cada categoría tiene una opción para establecer una imagen predeterminada
Debajo de la sección hero, añade una Columna más haciendo clic en el icono de más y añade los bloques GD > Listings allí.
Ahora realizaremos algunos ajustes necesarios en este bloque GD > Listings bloque. estableceremos la ordenación en: reciente
Ahora añadamos una Columna vacía con Contenido y Ancho al 100.
Añade el GD > Map bloque en ella y mantén la configuración predeterminada.
Haz clic en el pie de página y OllieWP ya proporciona algunas plantillas de pie de página prediseñadas. Estoy seleccionando una de ellas.
¡Felicitaciones! Tu página de inicio está completada.
2. OllieWP Diseño de la página de listados y búsqueda del sitio de directorio
Ahora necesitas diseñar dos páginas que son esenciales para cualquier directorio.
Ahora necesitas diseñar dos páginas que son esenciales para cualquier directorio.
La página de listados (archivo general, categorías, etiquetas) y la página de resultados de búsqueda.
GeoDirectory las crea por defecto con un diseño general. En este tutorial, personalizaremos un poco el diseño de estas páginas.
Las páginas de listados y búsqueda son casi idénticas, por lo que la creamos una vez y simplemente copiamos el diseño en la otra página.
Decidimos que el diseño de la página de listados tendría los listados a la izquierda y, a la derecha, un mapa fijo que mostraría la ubicación exacta de los listados.
Esto es muy sencillo.
Página de listados
Ve a Apariencia > Editor > Diseño > Plantillas y haz clic en Editar GD Archive plantilla de página
Elimina todo el contenido de esta GD Archive plantilla de página.
Ahora vamos a añadir una fila vacía.
Dentro de esto, añade un diseño de dos columnas
Ahora en el contenedor izquierdo, arrastraremos los widgets relacionados con la página de archivo de GD como GD > Loop Action, GD > Loop, GD > Loop Pagination, y GD > Search en la parte superior para que el usuario pueda buscar desde la página de archivo.
En la columna derecha, arrastraremos el GD > Map bloque.
mantendremos toda la configuración predeterminada para el GD > Map. Vamos a darle algo de altura; he decidido darle una altura de 100vh.
Añade el siguiente estilo en el personalizador del tema desde Apariencia => Personalizar => Add CSS
.geodir-archive .geodir-listings .geodir_location_listing{ overflow-y: scroll; max-height: 100vh; padding-right: 15px; }
Después de esto, la página de Archivo de listados está lista.
Otra opción es usar el bloque GD > Simple Archive tal como se explica en este tutorial sobre cómo Crear un sitio web de directorio con Elementor.
Para la página de búsqueda, repetimos el mismo proceso.
Página de búsqueda
Ve a Geodirectory > Ajustes > General > Páginas > Haz clic en editar la plantilla de la página GD Search
Elimina todo el contenido de esta GD Search plantilla de página.
Copia todo el contenido de la página GD Archive y pégalo en la página GD Search.
Ahora nuestra página GD Search y Archive está lista.
3. OllieWP Diseño de la página de listado individual del sitio web de directorio
Para editar y personalizar la página GD Detail, puedes ir a Apariencia > Editor > Diseño > Plantillas y haz clic en Editar GD Single plantilla de página.
Añadir una columna vacía
Primero vamos a añadir un carrusel de imágenes en la parte superior de la página de Detalle del listado. Arrastraremos el GD > Post Image bloque en este contenedor con los siguientes ajustes
Límite de imágenes: 10
Límite de visualización: 3
Tipo de salida: Slider
Inicio automático: Activar
Ahora vamos a añadir una fila vacía con
Contenido: 1200
Ancho: 100
añadir dos columnas dentro de ella.
Ahora vamos a añadir uno por uno todos los shortcodes necesarios de la página de Detalle de GD en la columna izquierda.
Esto incluye GD > Single Taxonomies, GD > Single Tabs y GD > Single Next Prev.
En la columna derecha, añadiremos GD > Author Action y GD > Output Location bloque.
Tras hacerlo, nuestra página de Detalle del listado ha sido completada.
Añadir funciones premium a tu OllieWP Sitio web de directorio
Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:
- Listados de pago: con el GeoDirectory Listing Price Manager add-on, puedes establecer precios para el envío de listados. Para cada nivel de precio, puedes activar/desactivar funciones como: restringir el número de imágenes en los listados gratuitos mientras permites más imágenes en los de pago. Permitir más o menos etiquetas y categorías. Activar o desactivar campos personalizados específicos. Enviar descripciones más largas o más cortas.
- Reclamar Listados: Esta es una función fundamental para un directorio en el que el administrador crea la base de datos e invita a los propietarios de negocios a tomar el control de sus listados gratuitos. El proceso de reclamación de un listado puede incluir la obligación de actualizar a un listado de pago para asumir la propiedad del listado.
- Publicidad: vender anuncios es otra forma de monetizar un directorio en línea. Si tienes mucho tráfico, puedes utilizar redes de publicidad. De lo contrario, puedes vender anuncios directamente, permitiendo a las empresas añadir banners en áreas específicas de tu sitio web o haciendo que los listados aparezcan como anuncios, por ejemplo, en la parte superior de los resultados de búsqueda orgánicos.
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 global de artículos artesanales, vender entradas para eventos o vender cupones de descuento.
Empieza tu proyecto de sitio web de directorio con este consejo: Crea un sitio web de directorio hoy mismo.
Las posibilidades son ilimitadas.