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

¬ŅEst√°s buscando crear un directorio web de negocios? Los directorios web son una idea popular de negocios en l√≠nea, que le permiten monetizar su sitio web con contenido generado por el usuario.

La lista de Angie, un directorio web popular que ayuda a los propietarios a encontrar contratistas y proveedores de servicios confiables. Valen más de 9 mil millones de dólares.

Ya sea que esté buscando crear un directorio web de nicho para ganar dinero en línea, o un directorio de socios para enumerar sus proveedores, puede 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 para sus listados de directorio 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 individuos con detalles como información de contacto, servicios, características, etc.

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

Se usan m√°s com√ļnmente para ayudar a las personas a encontrar un lugar o servicio que est√°n buscando.

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

Si bien hay varios temas de directorio web para WordPress que le permiten crear un directorio web, no los recomendamos porque quedar√° bloqueado en el tema para siempre.

Es por eso que solo le mostraremos m√©todos de complemento, para que pueda usarlo con cualquier dise√Īo de tema que desee.

Dicho esto, echemos un vistazo a cómo crear un directorio web en WordPress.

Método 1: crear un directorio de WordPress con formularios formidables

Formidable Forms es el complemento de creación de formularios de WordPress más avanzado del mercado. Le ayuda a crear un formulario de contacto simple, así como formularios avanzados como encuestas, formularios de pago, formularios de registro y más para su sitio de WordPress.

El complemento viene con una funci√≥n exclusiva llamada “Vistas” que le permite mostrar cualquier informaci√≥n enviada a trav√©s de un formulario en el front-end de su sitio web. Con esta funci√≥n, puede crear f√°cilmente directorios, listados de bienes ra√≠ces, bolsa de trabajo, calendarios de eventos y m√°s.

Vamos a crear un directorio de empresas utilizando el complemento Formidable Forms.

1. Cree un formulario para recopilar datos para su directorio

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

Una vez que el complemento est√° instalado y activado, vaya a Formidable ¬ĽFormularios y haga clic en el bot√≥n “Agregar nuevo”.

A√Īadir nuevo formulario formidable

Ahora puede elegir cómo desea crear un formulario. Puede comenzar con un formulario en blanco, con una plantilla, o importar uno desde un archivo XML.

Elija una forma de agregar un nuevo formulario formidable

Elegiremos el método de plantilla porque es la forma más rápida de hacer un formulario avanzado. Formidable Forms ofrece más de 20 plantillas de formulario prefabricadas listas para usar.

Por ejemplo, elegiremos “Listados de bienes inmuebles” para crear un directorio de bienes ra√≠ces. Haga clic en “Crear formulario” para comenzar.

Crear formulario de bienes raíces con formularios formidables

Verá un cuadro emergente donde se le pedirá que ingrese el nombre y la descripción del formulario.

Nombra tu formulario formidable

Después de eso, cargará el formulario de presentación de bienes inmuebles preconstruido.

Formularios formidables: interfaz de Form Builder

Puede revisar y personalizar el formulario utilizando la sencilla interfaz de arrastrar y soltar. Una vez hecho esto, haga clic en el bot√≥n “Actualizar”.

Si desea crear un directorio web premium con listados pagados, deber√° conectar su formulario con una pasarela de pago.

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

En este ejemplo, mostraremos c√≥mo integrar PayPal para aceptar pagos. Ir Formidable ¬ĽComplementos desde su panel de control e instale el complemento “PayPal est√°ndar”.

Instale el complemento est√°ndar de PayPal en formularios formidables

Una vez que el complemento est√© instalado y activo, visite Formidable ¬ĽConfiguraci√≥n global y haga clic en la opci√≥n de PayPal. Actualice su direcci√≥n de correo electr√≥nico de PayPal y otras configuraciones.

Configure PayPal con formularios formidables

Despu√©s de eso, abra su respectivo editor de formularios nuevamente y haga clic en la opci√≥n “Configuraci√≥n” en la parte superior.

Configuración de formulario - Formularios formidables

A continuaci√≥n, haga clic en la pesta√Īa “Acciones de formulario” y luego seleccione el icono de PayPal para agregar una nueva acci√≥n.

Agregar acción de formulario de PayPal a formularios formidables

Ahora necesita configurar los ajustes de PayPal. Agregue un monto de pago, elija un tipo de pago (pago √ļnico, donaci√≥n o suscripci√≥n), seleccione la moneda y luego agregue una URL de retorno y cancele la URL.

Formidables opciones de pago con PayPal

Una vez hecho esto, no olvide actualizar su formulario.

Ahora que la opción de pago está integrada, sus usuarios deberán realizar un pago antes de enviar una propiedad inmobiliaria a través de su formulario.

2. Publique su formulario en WordPress

El siguiente paso después de crear un formulario es publicarlo en su sitio web, para que los usuarios puedan enviar los detalles de su negocio usándolo.

Visitar P√°ginas ¬ĽAgregar nuevo desde su tablero para crear una nueva p√°gina. Despu√©s de eso, nombra tu p√°gina y agrega el widget Formidable Forms al editor.

Agregar Formulario Form Widget a la p√°gina de WordPress

Luego, seleccione su formulario.

Seleccione su formulario para agregar a una p√°gina de WordPress

Después de eso, cargará el formulario de envío de bienes raíces preconstruido en el editor de su página.

Tambi√©n puede agregar contenido √ļtil a la p√°gina. Una vez hecho esto, sigue adelante y publica tu p√°gina.

Ahora puede agregar la p√°gina de formulario de env√≠o a su men√ļ de navegaci√≥n de WordPress, o enviar una campa√Īa de correo electr√≥nico a su lista de correo electr√≥nico para obtener m√°s env√≠os de formularios.

El proceso de recopilaci√≥n de datos a trav√©s de un formulario puede llevar alg√ļn tiempo, por lo que es mejor hacer un plan antes de comenzar. Alternativamente, tambi√©n puede crear entradas manualmente desde su tablero o importar desde un archivo CSV.

3. Cree su directorio web con vistas formidables

Después de haber reunido mucha información, puede crear un directorio web con las Vistas formidables.

Navegar a Formidable ¬ĽVistas desde su panel de control y haga clic en el bot√≥n “Agregar nuevo”.

Agregar nueva vista en formularios formidables

Después de eso, ingrese un título para su vista y elija el formulario que contiene los datos que desea mostrar.

Configuración básica de vista formidable

A continuaci√≥n, debe elegir el formato de vista. Puede mostrar todas las entradas en una lista, una sola entrada, enumerar las entradas con un enlace a la p√°gina de entrada √ļnica o insertar entradas en un calendario.

Para este tutorial, elegiremos “Ambos (din√°mico): enumere las entradas que se vincular√°n a una opci√≥n de p√°gina de entrada √ļnica”.

Si desea agregar una barra de b√ļsqueda en su directorio web, agregue el siguiente c√≥digo corto en el cuadro “Antes del contenido”.

[frm-search]

Agregar barra de b√ļsqueda en su vista formidable

Después de eso, debe agregar contenido a su listado de directorio en el siguiente formato.

[MLS ID] [address] $[listing-price] [blurb] [bedroom] Bedrooms | [bathroom] Bath |[sqft-living] sq. ft.

En el c√≥digo anterior, debe reemplazar la imagen del hogar, la ID de MLS, la direcci√≥n, el precio de cotizaci√≥n, la publicidad, el dormitorio, el ba√Īo y la vida en pies cuadrados con las respectivas ID / claves de campo de su formulario.

Puede encontrar las ID / claves de campo en el cuadro Personalización en el lado derecho de la página.

Formularios Formularios Llaves archivadas

Por ejemplo, si queremos mostrar la foto cargada a trav√©s del campo “Subir foto principal” como imagen de inicio, debemos reemplazar la “imagen de inicio” con la ID de campo “63”.

Insertar contenido en su directorio web

Despu√©s de eso, agregue el siguiente c√≥digo en Formidable ¬ĽEstilos¬Ľ CSS personalizado para personalizar la apariencia de su directorio web.

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

Agregue estilo a su vista formidable

Una vez hecho esto, puede publicar su vista y obtener una vista previa.

Después de eso, cree una nueva página para el directorio web y agregue su Vista formidable.

Agregue una vista formidable a una p√°gina de WordPress

Así es como se vería su directorio de bienes raíces con el tema predeterminado Twenty Nineteen.

Demostración del directorio web de bienes raíces

Puede personalizar y personalizar a√ļn m√°s su directorio Formidable utilizando CSS personalizado, un complemento de generador de p√°ginas de WordPress de arrastrar y soltar, o un complemento de estilo como CSS Hero.

Método 2: uso del complemento de directorio de negocios

El segundo método es mediante el uso de un complemento de directorio de negocios. Recuerde que si bien el complemento principal es gratuito, una gran cantidad de funcionalidades requerirá que compre la versión PRO del complemento.

Comience instalando y activando el complemento de directorio de negocios. Tras la activación, el complemento le pedirá permiso para crear una nueva página de WordPress y agregar el shortcode del directorio comercial dentro de ella.

Haga clic en “Crear p√°ginas requeridas para m√≠” para crear su p√°gina de directorio.

Crear p√°ginas requeridas para el complemento de directorio de negocios

Una vez hecho esto, el complemento de Business Directory agregar√° autom√°ticamente una nueva p√°gina llamada “Business Directory”.

P√°gina del directorio de negocios agregada en WordPress

No debe eliminar u ocultar esta p√°gina porque es la p√°gina principal que utiliza el complemento Business Directory para mostrar un directorio en su sitio web.

A continuaci√≥n, puede administrar la configuraci√≥n del complemento desde el men√ļ “Administrador de directorio” en su tablero.

Ir Administrador de directorio ¬ĽAdministrar opciones para configurar los ajustes principales de tu complemento. La configuraci√≥n “General” incluye configuraci√≥n de enlaces permanentes, opciones de b√ļsqueda de directorio, reCAPTCHA, opciones de registro y m√°s.

Configuración del complemento de directorio de negocios

Como puede ver en la captura de pantalla anterior, hay configuraciones para Listados, Correo electr√≥nico, Pago y Apariencia. Puede revisarlos uno por uno y realizar cambios seg√ļn sus requisitos.

Despu√©s de eso, visita Administrador de directorio ¬ĽAdministrar campos de formulario para personalizar tus campos de formulario. Desde aqu√≠, puede agregar o editar campos que aparecer√≠an en el formulario de env√≠o del directorio.

Administrar campos de formulario en el complemento de directorio de negocios

A continuación, deberá crear algunas categorías para su directorio.

Puedes hacer esto yendo a Directorio ¬ĽDirectorio Categor√≠as. Se le pedir√° que cree al menos una categor√≠a, para que sus usuarios puedan usar esta categor√≠a al enviar su listado.

Agregar nueva categoría de directorio con el complemento de directorio de negocios

Una vez que haya creado las categor√≠as, puede seguir adelante y crear una nueva lista visitando Directorio ¬ĽAgregar nuevo listado.

Ahora verá la página Agregar nuevo listado que se parece al editor clásico de WordPress. Ingrese el título de su listado y agregue una breve descripción sobre su listado.

Agregar nuevo listado con el complemento de directorio de negocios

Despu√©s de eso, despl√°cese hacia abajo hasta la secci√≥n “Campos / im√°genes de listado de directorios” y agregue los detalles de su empresa, incluyendo la direcci√≥n del sitio web, n√ļmero de tel√©fono, correo electr√≥nico, etc.

Rellene los campos de listado de directorio manualmente

Para agregar im√°genes, primero deber√° hacer clic en el enlace Im√°genes. Luego, puede cargar im√°genes desde su computadora o simplemente colocarlas en el cuadro de imagen.

Subir imagen a su directorio de negocios de WordPress

A continuación, deberá elegir una categoría apropiada para su listado.

Elija la categoría del directorio

Una vez hecho esto, puede continuar y publicar su directorio.

Ahora puede obtener una vista previa de su página de directorio web en su sitio web. Su directorio web se vería como la captura de pantalla a continuación con el tema predeterminado de WordPress Twenty Nineteen.

Business Directory Demo con el tema predeterminado de WordPress

Como administrador del sitio, puede crear una lista manualmente desde su panel de control. Sus usuarios tambi√©n pueden enviar un listado en su directorio mediante un formulario. Se puede acceder al formulario de env√≠o haciendo clic en el bot√≥n “Crear un listado”.

Enviar un listado con el complemento de directorio de negocios

Los elementos de listado enviados por el usuario se guardar√°n en el Directorio ¬ĽDirectorio p√°gina como listado pendiente, para que pueda revisar y verificar manualmente la calidad del listado.

Listado de directorio pendiente

Una vez hecho esto, aparecer√°n en la p√°gina de su directorio comercial.

Aceptar pagos para listados de directorio

Business Directory Plugin le permite aceptar pagos por listados en su directorio web. Por defecto, el complemento solo viene con Authorize.net como la pasarela de pago.

Otras pasarelas de pago como PayPal y Stripe est√°n disponibles como complementos separados que puede comprar desde el sitio web del complemento.

Para habilitar las opciones de pago en su directorio comercial, debe ir a Administrador de directorio ¬ĽAdministrar opciones p√°gina y haga clic en la pesta√Īa “Pagos”.

Configuración de pago del complemento de directorio comercial

En la p√°gina de configuraci√≥n de pago, la primera opci√≥n en la pantalla de Configuraci√≥n de pago es la casilla de verificaci√≥n para activar los pagos. Si su sitio a√ļn no est√° completamente listo, puede hacer clic en la casilla de verificaci√≥n junto a ¬ŅPoner pasarelas de pago en modo de prueba? opci√≥n.

El siguiente paso es elegir su moneda y agregar un mensaje de agradecimiento para los pagos.

Una vez que haya terminado de configurar las opciones de pago, haga clic en el botón Guardar cambios para guardar su configuración.

Ahora puede conectar su directorio con un proveedor de pagos. Si no ha instalado ning√ļn otro complemento de pasarela de pago, solo ver√° Authorize.net como la opci√≥n de pasarela de pago predeterminada.

Haga clic en el enlace Authorize.net y luego actívelo ingresando su ID de inicio de sesión y clave de transacción.

Configuración de Authorize.net del complemento de directorio de negocios

Dado que necesita pagos, deber√° establecer tarifas de listado. Esto se puede hacer yendo a Administrador de directorio ¬ĽGestionar tarifas. All√≠ puede crear diferentes planes de listado, establecer tarifas y duraci√≥n de listado para cada plan y guardar sus cambios.

¡Eso es todo! Su directorio web ahora está listo para aceptar listados pagados. Le recomendamos que explore otras opciones en la configuración del complemento para una mayor optimización de su directorio web.

Esperamos que este artículo te haya ayudado a crear un directorio web usando WordPress. También puede consultar nuestra guía sobre cómo crear un directorio de equipo en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.