¿Cómo crear un sitio web de directorio con OceanWP?
Aquí tienes una guía paso a paso para construir un sitio web de directorio usando el tema OceanWP:
- Instala el tema OceanWP
- Instalar y configurar GeoDirectory
- Instala el plugin Spectra Gutenberg Blocks
- Diseña el sitio web de directorio usando el tema OceanWP y el editor Gutenberg Editor
El tema OceanWP en combinación con el plugin GeoDirectory y un plugin de bloques Gutenberg ofrece una solución robusta y flexible para crear un directorio en línea dinámico.
Este trío permite a los usuarios integrar fácilmente funciones basadas en ubicación, personalizar diseños de maquetación e incorporar bloques de contenido interactivos, 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. Instala el tema OceanWP
Necesitamos instalar un tema y, para este tutorial, instalarás el tema OceanWP.
Ve a Apariencia >> Temas
Selecciona Añadir nuevo, Instalar, y Activar el tema OceanWP.
2. Instala el plugin Spectra Blocks
El plugin Gutenberg predeterminado no es suficiente para dar estilo a una plantilla, por lo que instalaremos el plugin Spectra Blocks. (consulta este tutorial si quieres crear un sitio web de directorio con el tema Astra y el plugin Spectra en su lugar)
Este plugin ofrece bloques Gutenberg personalizados que son mejores que los bloques predeterminados y te ayudarán a diseñar las plantillas de página.
Ve a Plugins >> Añadir nuevo.
Busca Spectra Blocks. Instálalo y actívalo.
Puedes omitir todos los pasos del Asistente de configuración.
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 Nueva York 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 sitio web de directorio con OceanWP
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 con el tema OceanWP.
1. Diseño de la página de inicio del directorio con OceanWP
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) inicial, un logotipo creado con Canva es más que suficiente.
Canva ofrece una gran cantidad de plantillas de logotipos, y no pasa nada si tu primer logotipo no es perfecto ni original.
A medida que tu proyecto cobre impulso, siempre tendrás la opción de perfeccionar o renovar por completo tu logotipo.
Recuerda, el éxito de un proyecto no lo determina la perfección de su logotipo.
Ahora ve a Apariencia > Personalizar > Encabezado > Logotipo, haz clic en Seleccionar Logo, y sube tu archivo PNG. Omite el recorte (o recorta la imagen según sea necesario) y haz clic en publicar. También puedes establecer la altura y el ancho máximos del logotipo si su tamaño es grande.
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ónPrincipal».
Si lo deseas, puedes hacer que el mismo menú aparezca en el pie de página 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
- Acerca de
- Blog
- Lugares y agregar lugares
- Página de Búsqueda
- Iniciar sesión
- Account > Profile > Forgot Password > Logout
El enlace de inicio de sesión (desde los Endpoints de UsersWP) solo aparecerá para los usuarios que no hayan iniciado sesión, mientras que los enlaces de cerrar sesión, cuenta y perfil solo aparecerán para los usuarios que hayan iniciado sesión.
La tipografía
Ahora definamos la tipografía para la fuente y el tamaño del texto del sitio web. Estoy configurando una familia de fuentes, un peso de fuente y un tamaño de fuente globales que se aplicarán a todo el texto del sitio.
iremos a Apariencia > Personalizador > Tipografía > Cuerpo. Estableceremos el Familia de fuente: Red Hat Text y Peso de fuente: Normal: 400
y en los ajustes de Apariencia > Personalizador > Tipografía > menú principal, estableceremos Peso de fuente: Medium 500, Tamaño de fuente: 13px
Ahora iremos a Apariencia > Personalizador > Opciones Generales > Estilos Generales Color Primario: #ff914d y Color Primario al Pasar el Cursor: #ff731c
El contenido
Empezaré a construir esta página desde cero usando el plugin Spactra Blocks.
necesitamos un encabezado hero en la página de inicio; para eso, añadamos un bloque contenedor proporcionado por el plugin spectra blocks.
A continuación, haz clic en Estilo desde las pestañas superiores. Selecciona > Tipo Imágenes como Tipo de fondo.
Para la sección hero, necesitamos una imagen y descargaremos una imagen gratuita de Pexels.com (Gracias, @Kelly).
Haz clic en la sección añadida y selecciona Ancho Completo en la opción Ancho del Contenido, como se indica en la captura de pantalla a continuación.
Desde la pestaña de estilo de la configuración del bloque contenedor, selecciona Repetir a Sin repetición y Tamaño a Cubrir.
Arrastra y suelta un elemento de Encabezado dentro de la imagen hero.
Es el momento de dar un título a la imagen hero de nuestra página de inicio.
Desde la pestaña Estilo, cambia el color del texto a blanco (#FFFFFF) para mejorar el contraste y la legibilidad.
En este tutorial, usaré algo sencillo como Restaurantes en Nueva York.
No olvides centrar el texto usando la opción de alineación.
Para añadir la búsqueda de GeoDirectory en el encabezado de la página de inicio, arrastra el bloque GD > Search bloque dentro del contenedor hero.
A continuación, añade una altura mínima a este contenedor hero. Lo estableceré en 650 x 600 px en ancho y alto, y también establece el ancho del contenedor: Boxed y el ancho del contenido: Boxed.
es hora de eliminar el título de esta página y el espacio adicional en la sección del encabezado.
Haz clic en el ícono O en la parte superior derecha de la página, simplemente haz clic en él. Dentro de eso, en la sección General configura padding: desactivado y dentro de la selección de Título Título: desactivado
Es hora de agregar algunas secciones requeridas más en la página de inicio; ahora agregaré una sección de listados recientes.
Debajo de la sección hero, añade una container 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 agregaremos un CTA para atraer a los dueños de negocios a registrar sus empresas. Añadiremos un contenedor vacío y en la configuración de estilo.
configuremos un fondo.
Ahora agreguemos los estilos del contenedor:
Tipo de superposición: Color
Color de superposición de imagen: #FF6900
Opacidad de la superposición: 0.3
Ancho del contenedor: Ancho completo
Ancho del contenido: Boxed
Ahora también agregaremos un Call To Action bloque proporcionado por Spectra dentro de este contenedor.
Tipografía para la sección CTA.
Color: #fffff
Tamaño de fuente: 32px
agreguemos algo de estilo al botón.
Color del texto: #000000
Color de fondo: #FFFFFF
Radio: 30px todos los lados
Relleno: 10px, 30px, 10px, 30px
Cambiemos el texto del botón a Añadir Listado y el enlace a la página de Agregar Listado.
Así que nuestra sección CTA ya está completa. Agregaremos una sección más: la GD > Categories sección debajo de ella.
La configuración será la siguiente
Tipo de diseño: Fondo de imagen
Elementos por fila: 3
Habilitar el uso de imagen de categoría
Puedes asignar una imagen a una categoría editándola desde wp-admin -> lugares -> Categorías de lugares.
Cada categoría tiene una opción para establecer una imagen predeterminada
Listo, ahora agreguemos la última sección para mostrar los enlaces de redes sociales. La llamaremos MANTENTE EN CONTACTO.
Agrega un nuevo contenedor vacío con fondo #000000.
Ahora añadiremos un encabezado en este contenedor con Alineación: Centro y Encabezado: H3
Añadiré el texto "Stay in Touch"
Color: #ffffff
Tamaño de fuente: 24px
Ahora añadiremos un párrafo debajo para agregar algo de texto.
Añade algo de estilo
Color del texto: #ffffff
Tamaño: Pequeño
Ahora añadiremos el bloque de iconos sociales debajo.
En este bloque de iconos sociales añade el siguiente estilo
Tamaño: 15px
Tamaño de fondo: 10px
Radio de borde: 100
Color: #ffffff
¡Felicitaciones! Tu página de inicio está completada.
2. Diseño de la página de listados y búsqueda del sitio de directorio OceanWP
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 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.
Ahora agrega un contenedor con 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.
Ahora simplemente configura el contenedor principal a ancho completo siguiendo las instrucciones que se muestran en la imagen a continuación.
Ahora estableceremos la plantilla de la página de archivo a ancho completo
también ajustaremos la sección de estilo del encabezado para todas las páginas desde el Personalizador de temas > Opciones generales > Configuración general.
con estilo
Estilo de encabezado: Centrado
Relleno: 20px
Color de fondo: #1e73be
Color del texto: #ffffff
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. Diseño de la página de listado individual del sitio de directorio OceanWP
Para editar y personalizar la página GD Detail, 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 añadiremos un nuevo contenedor.
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.
En este bloque GD > Imagen ajusta la siguiente configuración.
Límite de imágenes: 50
Límite de visualización: 2
Ahora vamos a añadir un contenedor más debajo de este contenedor, donde agregaremos otros bloques necesarios del página de Detalle de Geodirectory.
Ahora vamos a añadir aquí, uno por uno, todos los shortcodes necesarios para la página de detalles de GD. Estos incluyen GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.
Ahora es momento de añadir algunos widgets en la barra lateral. Para ello, iremos a wp-admin > Apariencia > Widgets.
Añade el widget GD > Author Action en la barra lateral principal. Este widget proporcionará una Editar, Eliminar Listado al Autor del Listado.
Añadir un widget más GD > Output Location. Este widget mostrará todos los detalles principales del listado que hayan sido marcados como visibles en la página de Detalle.
Después de hacer esto, nuestra página de Detalle del listado ha sido completada.
Añadir funciones premium a tu sitio web de directorio OceanWP
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.
Haz que tu sitio web de directorio destaque siguiendo esta guía: Crea un sitio web de directorio profesional.
Las posibilidades son ilimitadas.