Sigue estos pasos para crear un sitio web de directorio usando el complemento BuddyBoss y GeoDirectory:
- Instala el tema BuddyBoss y la plataforma BuddyBoss.
- Configura GeoDirectory.
- Instala el complemento Elementor.
- Diseña tu sitio web de directorio usando el tema BuddyBoss y Elementor.
Al combinar BuddyBoss con el complemento GeoDirectory y el complemento Elementor, tendrás una plataforma versátil para crear un directorio en línea pulido junto con funciones de redes sociales.
Utilizando esta combinación y siguiendo los pasos mencionados en este artículo, cualquiera puede crear fácilmente un sitio de directorio fácil de usar con funciones de redes sociales.
Exploremos en detalle cómo se puede lograr esto.
En este tutorial:
Instalación del tema y los plugins.
1. Instala el BuddyBoss Tema y la plataforma BuddyBoss
Necesitamos instalar un tema y, para este tutorial, instalarás el BuddyBoss Tema.
Ve a buddyboss.com, compra y descarga el tema BuddyBoss y la plataforma BuddyBoss.
Ve a Apariencia >> Temas
Selecciona Añadir nuevo, Instalar, y Activar el BuddyBoss Tema.
Ve a Plugins >> Add New
Selecciona Subir, Instalar, y Activar el plataforma BuddyBoss plugin.
Ahora configuremos BuddyBoss.
Ve a BuddyBoss >> Componentes
Voy a habilitar todos los componentes; tú puedes decidir según tus necesidades.
Ahora configuremos algunas páginas necesarias para BuddyBoss desde el BuddyBoss >> Páginas
Dejaré todos los ajustes por defecto, pero puedes revisarlos y hacer los cambios necesarios si lo deseas.
Ahora nuestro sitio está listo con todas las funciones de redes sociales y la apariencia de BuddyBoss.
2. Instalar el Elementor plugin
Para dar estilo a las plantillas, instalaremos el Elementor plugin.
El Elementor El complemento ofrece muchas funciones de personalización que superan a las predeterminadas y te ayudará a diseñar las plantillas de página.
Existe una versión pro de Elementor que ofrece muchas funciones, y GeoDirectory es compatible con ambas.
Usaremos la Elementor versión gratuita para este artículo.
Ve a Plugins >> Añadir nuevo.
Busca Elementor. Instálalo y actívalo.
3. 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.
4. 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 registro 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.
5. Integración de GeoDirectory con BuddyBoss
Para conectar BuddyBoss con GeoDirectory, necesitamos el Integración de GeoDirectory con BuddyBoss que funciona para ambas BuddyBoss y BuddyPress integración.
Descarga este complemento desde el Geodirectory panel, sube e instala este complemento.
desde el GeoDirectory >> Ajustes >> BuddyPress pestaña, habilita todos los ajustes mencionados en la siguiente captura de pantalla.
Este complemento permitirá a los usuarios gestionar sus listados desde la página de perfil de BuddyBoss.
Diseña el BuddyBoss Sitio web de directorio
Ahora que hemos instalado el tema y los plugins y realizado la configuración preliminar de GeoDirectory, podemos comenzar a diseñar nuestro sitio web de directorio.
1. BuddyBoss 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 > Personalizar > Ajustes de la página de inicio y selecciona tu página de inicio.
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.
Después de diseñar tu logotipo, ve a BuddyBoss > Theme Options > Logotipo, y sube tu archivo PNG.
Omite el recorte (o recorta la imagen según sea necesario), en Disposición del logotipo y haz clic en guardar cambios.
El menú de navegación
Después de crear y añadir el logotipo, ve a Apariencia > Menús, y crea tu menú.
Añade los enlaces necesarios (de la columna izquierda a la columna derecha) y guarda. En la sección Ajustes del menú > Ubicación de visualización, puedes marcar la opciónMenú del encabezado – Usuario con sesión iniciada y Menú del encabezado – Usuario sin sesión iniciada».
Si lo deseas, puedes hacer que el mismo menú aparezca en el móvil o crear otro menú para que aparezca allí.
En este ejemplo, solo tendremos el menú de navegación del encabezado.
Agregamos siete enlaces de navegación principales y algunos enlaces de subnavegación:
- Inicio
- Lugares y agregar lugares
- Miembros
- Blog
- Contáctanos
El contenido
Voy a comenzar a construir esta página desde cero usando el Elementor plugin.
Ya tenemos un artículo sobre Cómo crear un sitio web de directorio con Elementor.
En este artículo, añadiremos BuddyBoss a la mezcla.
Necesitamos un encabezado hero en la página de inicio. Para ello, ve a Páginas > Inicio y haz clic en Editar con Elementor.
Añade una sección. (Haz clic en el botón de más del maquetador donde dice Arrastra el widget aquí.)
Ahora tienes una página en blanco con solo una sección de una columna.
Vamos a subir una imagen de fondo desde la sección de estilos del contenedor y también configurar algunos ajustes como
Posición: Centro Centro
Repetir: Sin repetición
Tamaño de visualización: Cubrir
Superposición de fondo: #000000
Opacidad: 0.51
En la sección de diseño del contenedor, tendremos los siguientes ajustes
Altura mínima: 500
Dirección: Columna vertical
Justificar al centro: centro
Alinear elemento: Centrado
Luego añadamos una etiqueta de encabezado encima con el texto: Find The Best Restaurant In Philadelphia y los siguientes ajustes
Etiqueta HTML: H1
Alineación: Centrado
Color del texto: #ffffff
Typography Tamaño: 48px
A continuación, vamos a crear el borrador del bloque GD > Search block and blow it with default settings. In advance tab make ancho: Ancho completo (100%)
Añadamos un contenedor vacío más debajo y arrastremos el bloque GD > Categories block to display lists of categories.
Configura los ajustes del bloque GD > Categorías de la siguiente manera
Tipo de diseño: Fondo de imagen
Row Items: 4
Activa el Usar imagen de categoría opción
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
Ahora añadiremos un contenedor vacío con una etiqueta de encabezado y
Texto: Listado de negocios recientes
Alineación: Centrado
Typography Tamaño: 38px
Añadamos el bloque GD > Listados debajo con los siguientes ajustes
Ordenar por: reciente
Cuadrícula: 4
A continuación, dentro de un contenedor vacío, arrastra el GD > Map shortcode.
Con los siguientes ajustes en el contenedor de Elementor
Contenido ancho: ancho completo
Separación: 0
Margen: Superior e inferior 50px
Relleno: 0px
Por último, añadiremos un CTA para redirigir a los usuarios a la página de añadir listado.
Añade un contenedor vacío con diseño de dos columnas.
En el contenedor izquierdo añade un cuadro de imagen.
En el contenedor derecho, arrastraremos el encabezado, el texto y el botón para que tenga el aspecto que se muestra a continuación
Tras esto, nuestra página de inicio estará lista.
2. Diseño de la página de listados y búsqueda del sitio web de directorio con BuddyBoss
Tienes que crear dos páginas importantes para un directorio: una para los listados (incluyendo un archivo, categorías y etiquetas) y otra para los resultados de búsqueda.
GeoDirectory las configura automáticamente con un diseño básico. Esta guía te ayudará a ajustar un poco la apariencia de estas páginas.
Como la página de listados y la de búsqueda son muy similares, las diseñaremos una sola vez y luego usaremos el mismo diseño para ambas.
Nuestra elección para el diseño de la página de listados es tener los listados a la izquierda y un mapa fijo a la derecha, mostrando la ubicación de cada listado.
Esto es muy sencillo.
Ve a Geodirectory > Configuración > General > Páginas > Haz clic en editar la plantilla de página de archivo GD
Elimina todo el contenido de esta GD Archive plantilla de página y edítala con Elementor.
Desde la configuración de la página, establece el diseño de página en Elementor Ancho completo.
Ahora vamos a añadir un contenedor vacío con los siguientes ajustes
Dirección: Columna vertical
Justificar al centro: centro
Alinear elemento: Centrado
Color de fondo: #2143D3
Ahora vamos a arrastrar el GD > page title bloque sobre él.
Ahora vamos a añadir un diseño de dos columnas con los siguientes ajustes.
Contenido ancho: ancho completo
Separación: 0
A continuación, en el contenedor izquierdo, añadiremos bloques 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.
También agregaremos una clase scrolling-gd-loop a esta columna para desplazamiento táctil.
En la columna derecha, arrastraremos el GD > Map bloque con el siguiente ajuste.
Ajuste de columna
Relleno: 0px
Margen: 0px
los ajustes del shortcode GD > Map a los valores predeterminados y
Height: 100%
Width: 100vh
Agreguemos el siguiente estilo al personalizador del tema.
.scrolling-gd-loop{ overflow-y: scroll !important; max-height: 1000px; }
Ahora, después de esto, nuestra página de archivo está lista.
Para crear el diseño de la página de búsqueda.
Copia todo el contenido del GD Archive plantilla de Elementor y pégala en la GD Search plantilla de página de Elementor.
Puedes encontrar la página de búsqueda desde Geodirectory > Ajustes > General > Páginas.
3. Diseño de la página de listado individual del sitio web de directorio BuddyBoss
Es momento de crear la plantilla de página de detalle. Iremos a editar el GD Detail plantilla de página en Elementor.
Puedes ir a Geodirectory > Ajustes > General > Páginas > Haz clic en editar la plantilla de la página GD Detail.
En esta plantilla, ya encontrarás el contenido predeterminado generado por Geodirectory.
eliminaremos todo este contenido predeterminado y lo editaremos usando Elementor.
Añadamos un contenedor vacío
Ancho del contenido: ancho completo
Separación: 0
Margen: Superior e inferior 50px
Relleno: 0px
Dirección: Columna vertical
Justificar al centro: centro
Alinear elemento: Centrado
Ahora arrastremos el Gd > Post Images shortcode dentro de él con los siguientes ajustes.
Límite de imágenes: 10
Límite de visualización: 3
Tipo de salida: Slider
Inicio automático: Activar
Asegúrate de que el contenedor esté ancho: ancho completo (100%)
Añadamos un diseño de columna de dos columnas.
En la columna izquierda, uno por uno.
Que incluye GD > Post Title, GD > Single Taxonomies, y GD > Single Tabs.
En la columna derecha, añadiremos el (BB) Post Author, GD > Author Action, y GD > Output Location bloque.
Una vez hecho esto, nuestra página de detalle de listado estará completa.
Añadir funciones premium a tu BuddyBoss 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 complemento, puedes establecer precios para el envío de listados. Para cada nivel de precio, puedes activar o desactivar funciones como restringir el número de imágenes para listados gratuitos mientras permites más imágenes para listados de pago, así como 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.
Descubre aquí los pasos necesarios para tu próxima aventura en línea: Pasos para crear un sitio web de directorio exitoso.
Este tutorial genérico puede adaptarse a cualquier tema o constructor de páginas.
Las posibilidades son ilimitadas.