Cómo crear un directorio web en WordPress (paso a paso)

¿Quieres crear un directorio web de empresas? Los directorios web son una idea de negocio online muy popular, que te permite monetizar tu sitio web con contenidos generados por los usuarios

Angie's list, un popular directorio web que ayuda a los propietarios a encontrar contratistas y proveedores de servicios fiables. Tienen un valor de más de 9.000 millones de dólares.

Tanto si quieres crear un directorio web de nicho para ganar dinero en Internet, como un directorio de socios para listar a tus proveedores, puedes hacerlo fácilmente en WordPress.

En este artículo, mostraremos cómo crear fácilmente un directorio web en WordPress. Cubriremos cómo aceptar pagos por tus listados de directorios web premium.

Cómo crear un directorio web en WordPress

¿Qué es un directorio web?

Un directorio web es como un catálogo que enumera empresas o personas con detalles como información de contacto, servicios, características, etc

Los directorios web permiten a los usuarios navegar por un catálogo de enlaces dividido en temas, categorías y áreas de interés. Un ejemplo perfecto de directorio web son las Páginas Amarillas o Angie's List.

Se suelen utilizar para ayudar a las personas a encontrar un lugar o servicio que buscan

Otro ejemplo de directorio web es Yelp, que permite a la gente encontrar grandes negocios locales como restaurantes, dentistas, salones de belleza, médicos, etc

Aunque hay varios temas de directorios web para WordPress que te permiten crear un directorio web, no los recomendamos porque te quedarás encerrado en el tema para siempre.

Por eso sólo te mostraremos los métodos de los plugins, para que puedas utilizarlos con cualquier diseño de tema que quieras

Dicho esto, vamos a ver cómo crear un directorio web en WordPress.

Método 1: Crear un directorio en WordPress con Formidable Forms

Formidable Forms es el plugin constructor de formularios de WordPress más avanzado del mercado. Te ayuda a crear un sencillo formulario de contacto, así como formularios avanzados como encuestas, formularios de pago, formularios de registro y mucho más para tu sitio de WordPress.

El plugin viene con una función exclusiva llamada "Vistas" que te permite mostrar cualquier dato enviado a través de un formulario en el front-end de tu sitio web. Usando esta función, puedes crear fácilmente directorios, listados inmobiliarios, bolsas de trabajo, calendarios de eventos y mucho más

Vamos a crear un directorio de empresas utilizando el plugin Formidable Forms

1. Crea un formulario para recoger datos para tu directorio

Lo primero que tienes que hacer es instalar y activar el plugin Formidable Forms. Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo instalar un plugin de WordPress

Una vez instalado y activado el plugin, ve a Formidable " Formularios y haz clic en el botón "Añadir nuevo"

Añadir nuevo formulario formidable

Ahora puedes elegir cómo quieres crear un formulario. Puedes empezar con un formulario en blanco, con una plantilla o importar uno desde un archivo XML

Elige una forma de añadir un nuevo formulario

Elegiremos el método de la plantilla porque es la forma más rápida de hacer un formulario avanzado. Formidable Forms ofrece más de 20 plantillas de formularios prediseñadas

Por ejemplo, elegiremos 'Listados inmobiliarios' para crear un directorio inmobiliario. Haz clic en "Crear formulario" para empezar

Crear formulario inmobiliario con Formidable Forms

Verás un cuadro emergente donde se te pedirá que introduzcas el nombre y la descripción de tu formulario

Nombra tu forma formidable

Después de eso, se cargará el formulario de envío de bienes inmuebles pre-construido

Formularios Formidables - Interfaz del Constructor de Formularios

Puedes revisar y personalizar el formulario utilizando la sencilla interfaz de arrastrar y soltar. Una vez hecho esto, haz clic en el botón "Actualizar"

Si quieres crear un directorio web premium con listados de pago, tendrás que conectar tu formulario con una pasarela de pago

Formidable te permite cobrar pagos con PayPal, Stripe y Authorize.net

En este ejemplo, mostraremos cómo integrar PayPal para aceptar pagos. Ir a Formidable " Complementos desde tu panel de control e instala el complemento "PayPal Estándar"

Instalar el Addon Estándar de PayPal en Formidable Forms

Una vez que el addon esté instalado y activo, visita Formidable " Configuración global y haz clic en la opción de PayPal. Actualiza tu dirección de correo electrónico de PayPal y otros ajustes

Configurar PayPal con Formularios Formidables

Después, abre de nuevo el editor de formularios correspondiente y haz clic en la opción "Configuración" de la parte superior

Configuración del formulario - Formularios formables

A continuación, haz clic en la pestaña "Acciones del formulario" y selecciona el icono de PayPal para añadir una nueva acción

Añadir la acción del formulario de PayPal a los formularios formables

Ahora tienes que configurar los ajustes de PayPal. Añade un importe de pago, elige un tipo de pago (pago único, donación o suscripción), selecciona la divisa y, a continuación, añade una URL de devolución y una URL de cancelación

Opciones de pago formidables con PayPal

Una vez hecho esto, no olvides actualizar tu formulario

Ahora que la opción de pago está integrada, tus usuarios tendrán que realizar un pago antes de enviar una propiedad inmobiliaria a través de tu formulario

2. Publica tu formulario en WordPress

El siguiente paso después de crear un formulario es publicarlo en tu sitio web, para que los usuarios puedan enviar los datos de su negocio a través de él

Visita Páginas " Añadir nuevo desde tu panel de control para crear una nueva página. Después de eso, nombra tu página y añade el widget Formidable Forms al editor

Añadir el Widget de Formulario Formidable a la Página de WordPress

A continuación, selecciona tu formulario

Selecciona tu formulario para añadirlo a una página de WordPress

Después de eso, se cargará el formulario de envío de bienes inmuebles pre-construido en el editor de tu página

También puedes añadir algún contenido útil a la página. Una vez hecho esto, sigue adelante y publica tu página

Ahora puedes añadir la página del formulario de envío a tu Menú de navegación de WordPress, o enviar una campaña de correo electrónico a tu lista de correo electrónico para conseguir más envíos de formularios

El proceso de recogida de datos a través de un formulario puede llevar algún tiempo, por lo que es mejor hacer un plan antes de empezar. Alternativamente, también puedes crear entradas manualmente desde tu panel de control o importarlas desde un archivo CSV

3. Construye tu directorio web con Formidable Views

Después de haber reunido mucha información, puedes crear un directorio web con Formidable Views

Navega hasta Formidable " Vistas desde tu panel de control y haz clic en el botón "Añadir nuevo"

Añadir nueva vista en formularios formables

Después, introduce un título para tu vista y elige el formulario que contiene los datos que quieres mostrar.

Configuración básica de la vista formidable

A continuación, debes elegir el formato de la vista. Puedes mostrar todas las entradas en una lista, una sola entrada, listar las entradas con un enlace a la página de una sola entrada, o insertar las entradas en un calendario.

Para este tutorial, elegiremos la opción "Ambas (Dinámica) - lista de las entradas con enlace a una página de entrada única"

Si quieres añadir una barra de búsqueda en tu directorio web, añade el siguiente shortcode en la casilla 'Antes del contenido'

[frm-search]

Añadir barra de búsqueda en tu vista formidable

Después de eso, tienes que añadir contenido a tu listado de directorios con el siguiente formato


<div class="listing_info"> 
<a href="[detaillink]"><img src="[home-image%20size=thumbnail]" alt=""/></a>
</div> 
<div class="listing_list">
<strong><a href="[detaillink]">[MLS ID]</a></strong>
<strong>[address]</strong> <strong>$[listing-price]</strong> [blurb] 
[bedroom] Bedrooms | [bathroom] Bath |[sqft-living] sq. ft.</div> 
<div style="clear:both;"></div>

En el código anterior, tienes que sustituir la imagen de la casa, el ID de la MLS, la dirección, el precio del anuncio, la propaganda, el dormitorio, el baño y los metros cuadrados de la vivienda por los respectivos IDs/claves de los campos de tu formulario

Puedes encontrar los IDs/claves de los campos en el cuadro de personalización de la derecha de la página

Formularios Formidables Archivados Claves

Por ejemplo, si queremos mostrar la foto subida a través del campo "Carga de la foto principal" como imagen de inicio, tenemos que sustituir la "imagen de inicio" por el ID del campo "63"

Insertar contenido en tu directorio web

Después, añade el siguiente código a en Formidable " Estilos " CSS personalizado para personalizar la apariencia de tu directorio web

 .listing_info{float:left; width:235px; margin-right:10px;} 
.listings_list img{width:370px;float:right;}

Añade estilo a tu vista formidable

Una vez hecho esto, puedes publicar tu vista y previsualizarla

Después, crea una nueva página para el directorio web y añade tu Vista Formidable a ella

Añadir una vista formidable a una página de WordPress

Así es como se vería tu directorio inmobiliario con el tema predeterminado Twenty Nineteen

Demo del Directorio Web Inmobiliario

Puedes personalizar y dar estilo a tu directorio Formidable utilizando CSS personalizado, un sistema de arrastrar y soltar Plugin de construcción de páginas de WordPress, o un plugin de estilo como CSS Hero.

Método 2: Usar el plugin del directorio de empresas

El segundo método consiste en utilizar un plugin de directorio de empresas. Recuerda que aunque el plugin principal es gratuito, muchas de las funcionalidades requerirán que compres la versión PRO del plugin.

Empieza instalando y activando el plugin de directorio de empresas. Tras la activación, el plugin te pedirá permiso para crear una nueva página de WordPress y añadir el shortcode del directorio de empresas dentro de ella

Haz clic en "Crear páginas necesarias para mí" para crear tu página de directorio

Crear páginas obligatorias para el plugin del directorio de empresas

Una vez hecho esto, el plugin del Directorio de Empresas añadirá automáticamente una nueva página llamada "Directorio de Empresas"

Página del directorio de empresas añadida en WordPress

No debes eliminar ni ocultar esta página porque es la página principal que utiliza el plugin Directorio de Empresas para mostrar un directorio en tu sitio web

A continuación, puedes gestionar la configuración del plugin desde el menú 'Directory Admin' de tu panel de control

Ve a Directorio Admin " Gestionar opciones para configurar los ajustes principales de tu plugin. Los ajustes "generales" incluyen la configuración de los enlaces permanentes, las opciones de búsqueda en el directorio, el reCAPTCHA, las opciones de registro y mucho más

Configuración del plugin del directorio de empresas

Como puedes ver en la captura de pantalla de arriba, hay ajustes para los listados, el correo electrónico, el pago y la apariencia. Puedes revisarlos todos uno por uno y hacer cambios según tus necesidades

Después, visita Directorio de administración " Gestionar los campos del formulario para personalizar los campos de tu formulario. Desde aquí, puedes añadir o editar los campos que aparecerán en el formulario de envío de tu directorio.

Gestionar los campos del formulario en el plugin del directorio de empresas

A continuación, tendrás que crear algunas categorías para tu directorio

Puedes hacerlo yendo a Directorio " Categorías del Directorio. Se te pedirá que crees al menos una categoría, para que tus usuarios puedan utilizarla cuando envíen su listado

Añadir nueva categoría de directorio con el plugin de directorio de empresas

Una vez que hayas creado las categorías, puedes seguir adelante y crear un nuevo listado visitando Directorio " Añadir nuevo listado

Ahora verás la página Añadir nuevo anuncio, que tiene un aspecto similar al del editor clásico de WordPress. Introduce el título de tu anuncio y añade una breve descripción sobre el mismo

Añadir un nuevo listado con el plugin del directorio de empresas

Después, desplázate hasta la sección "Campos/imágenes del listado del directorio" y añade los datos de tu empresa, como la dirección del sitio web, el número de teléfono, el correo electrónico, etc

Rellenar manualmente los campos del listado del directorio

Para añadir imágenes, tendrás que hacer clic primero en el enlace Imágenes. A continuación, puedes subir imágenes desde tu ordenador o simplemente soltarlas en la caja de imágenes

Sube una imagen a tu directorio de empresas de WordPress

A continuación, tendrás que elegir una categoría adecuada para tu anuncio

Elige la categoría del directorio

Una vez hecho esto, puedes seguir adelante y publicar tu directorio

Ahora puedes previsualizar la página de tu directorio web en tu sitio web. Tu directorio web se verá como la captura de pantalla de abajo con el tema predeterminado de WordPress Twenty Nineteen

Demostración del directorio de empresas con el tema predeterminado de WordPress

Como administrador del sitio, puedes crear un listado manualmente desde tu panel de control. Tus usuarios también pueden enviar un listado en tu directorio utilizando un formulario. Se puede acceder al formulario de envío haciendo clic en el botón "Crear un listado"

Enviar un listado con el Plugin del Directorio de Empresas

Los elementos del listado enviados por el usuario se guardarán en el Directorio " Directorio como listado pendiente, para que puedas revisar y comprobar manualmente la calidad del listado

Lista de directorios pendientes

Una vez hecho, aparecerán en la página de tu directorio de empresas

Aceptando pagos por listados en el directorio

El plugin de directorio de empresas te permite aceptar pagos por los listados en tu directorio web. Por defecto, el plugin sólo viene con Authorize.net como pasarela de pago

Otras pasarelas de pago como PayPal y Stripe están disponibles como complementos independientes que puedes adquirir en el sitio web del plugin

Para habilitar las opciones de pago en tu directorio de empresas, tienes que ir a Administración del directorio " Gestionar opciones y haz clic en la pestaña "Pagos".

Ajustes de pago del plugin del directorio de empresas

En la página de configuración de pagos, la primera opción en la pantalla de configuración de pagos es la casilla de verificación para activar los pagos. Si tu sitio aún no está totalmente preparado, puedes hacer clic en la casilla de verificación situada junto a ¿Poner las pasarelas de pago en modo de prueba? opción

El siguiente paso es elegir tu moneda y añadir un mensaje de agradecimiento por los pagos

Una vez que hayas terminado de configurar las opciones de pago, haz clic en el botón de guardar los cambios para almacenar tu configuración

Ahora puedes conectar tu directorio con un proveedor de pagos. Si no has instalado ningún otro plugin de pasarela de pago, entonces sólo verás Authorize.net como la opción de pasarela de pago por defecto

Haz clic en el enlace de Authorize.net y luego habilítalo introduciendo tu ID de acceso y tu clave de transacción

Configuración del Plugin del Directorio de Empresas Authorize.net

Dado que requieres pagos, tendrás que configurar las tarifas de los listados. Esto se puede hacer yendo a Administración del Directorio " Gestionar tarifas. Allí puedes crear diferentes planes de listado, establecer las tarifas y la duración del listado para cada plan y guardar los cambios

¡Eso es todo! Tu directorio web ya está listo para aceptar anuncios de pago. Te recomendamos que explores otras opciones en la configuración del plugin para una mayor optimización de tu directorio web.

Esperamos que este artículo te haya ayudado a crear un directorio web con WordPress. Quizás también quieras ver nuestra guía sobre cómo crear un directorio de equipo en WordPress

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a Cómo crear un directorio web en WordPress (paso a paso) puedes visitar la categoría Plugins.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Go up