Construye un portal cliente con WordPress

Sep 17, 2025
Cómo
Build a client portal with WordPress
[dieciséis] (Crédito de la imagen: diseñador web)

Tener un área que permita a los usuarios iniciar sesión y descargar o ver los documentos ha esperado por los consumidores, desde los contratos telefónicos hasta los servicios públicos.

Sin embargo, cuando los diseñadores trabajan con sus clientes, todo puede descomponerse rápidamente en un embrollo de correos electrónicos, enlaces a maquetas y adjuntos.

Esta Tutorial de WordPress mostrará cómo extender WordPress (Otro Alojamiento web Los servicios están disponibles) en un portal de clientes capaz de almacenar documentos, videos y dibujos, por lo que un cliente puede acceder a todos en un solo lugar. El portal servirá a cada cliente con un enlace único y protegido por contraseña que no aparezca en la navegación regular.

Los tipos de publicaciones y los campos personalizados se utilizarán para almacenar los datos, y estos se agregarán a través de complementos, para evitar la pérdida de datos en caso de que el tema cambie. El tema será modificado ligeramente.

Tener un portal de clientes le da a los clientes la conveniencia de acceder a sus archivos en el mismo lugar, siempre que los necesiten, al igual que cuando se usa almacenamiento en la nube . Tiene una variedad de ventajas empresariales, incluidas las ventas disponibles disponibles, o se pueden usar para proporcionar una visión general del proceso de trabajo desde el principio, describiendo visualmente los entregables.

Descargar los archivos Para este tutorial.

  • Cómo convertir WordPress en un constructor visual

01. Instale una copia fresca de WordPress

Una copia nueva de WordPress está instalada en el servidor de desarrollo, y se ha elegido el tema "Striptap" para dar una base de la plantilla de calderas para comenzar a trabajar rápidamente. Se utilizará el complemento UI de tipo POST personalizado, por lo que nuestros tipos de publicaciones personalizadas son independientes del tema.

02. Eliminar los complementos predeterminados

Si algún complemento predeterminado vino con la copia de WordPress, elimíelos. Los complementos necesarios para este tutorial son "campos personalizados avanzados" y "Tipo de publicación personalizado UI". "Editor clásico" también se ha instalado.

03. Añadir un tipo de publicación personalizado

Uso de la interfaz de interfaz de interfaz de usuario personalizada, agregue un nuevo tipo de publicación llamado "Cliente". Al ingresar al "Slug de Tipo de POST", use los guiones bajos en lugar de espacios y escriba en la forma singular, ya que esto facilitará la creación de plantillas más adelante. El prefijo TU_ se ha agregado para reducir la posibilidad de un conflicto.

04. La interfaz de tipo de publicación Agregar / Editar personalizada

Build a client portal with WordPress: The add/edit custom post type interface

[dieciséis] Añadir las etiquetas singulares y plurales. (Crédito de la imagen: diseñador web)

Agregue un "cliente" etiquetado en plural "y singular" Cliente ", ya que aparecerá en el menú Administrador de WordPress. Se acepta la capitalización en estos campos, lo que hará que el menú WordPress sea más ordenado.

05. Crea una babosa de reescritura personalizada

Build a client portal with WordPress: Create a custom rewrite slug

[dieciséis] Utilice la babosa de reescritura personalizada para una mejor experiencia de usuario (Crédito de la imagen: diseñador web)

El uso de un prefijo para el tipo de publicación Slug significará que los clientes agregados al portal se crearán con un enlace que se ve como "/ tu_customer / Ejemplo-Company". Esto no se ve ordenado, y la babosa de reescritura personalizada se usa para mejorar esto. Configuración de la slug de reescritura a "Clientes" permite que el Tipo de POST personalizado aparezca como / Clientes / Ejemplo-Compañía.

06. Añadir soporte para campos personalizados

Build a client portal with WordPress: Add support for custom fields

[dieciséis] Marque la opción "Campo personalizado" y envíe los cambios. (Crédito de la imagen: diseñador web)

La última opción que está habilitada para el tipo de publicación personalizada es "Soportes y GT; Campo personalizado" que se encuentra cerca de la parte inferior de la página. Marque esto, y luego "Agregar tipo de publicación" en la parte inferior de la página. Esto presenta los cambios y registra el tipo de publicación.

07. Añadir campos personalizados

Build a client portal with WordPress: Add custom fields

[dieciséis] Ahora necesitas agregar campos personalizados a tu nuevo tipo de publicación (Crédito de la imagen: diseñador web)

Ahora es necesario agregar campos personalizados y asignados al tipo poste que se acaba de crear. Agregar un grupo de campo llamado "Portal del cliente" es el primer paso, seguido de agregar campos personalizados con el botón Agregar campo. El primer campo "breve" se establecerá como el tipo de campo "Archivo", que permite al administrador cargar un archivo en esta ubicación. Establezca el valor de retorno a "URL de archivo".

08. Configurar los campos

El siguiente campo que se agregará es "Cuestionario de marca". Esto consistirá en un enlace a una forma de Google que el cliente debe completar. El tipo de campo más adecuado para esto es "URL". Este mismo método se puede utilizar para todos los campos que se vincularán a un servicio externo. Cuando termine, desplácese hacia abajo hasta la casilla "Ubicación" y use la lógica "Mostrar si el tipo de publicación" = "Cliente". Luego publique el grupo de campo.

Generate CSS

[dieciséis] Reserve sus boletos para generar CSS ahora para ahorrar £ 50 (Crédito de la imagen: Getty / Future)

09. Crea el archivo de plantilla de WordPress

WordPress necesita saber cómo mostrar un panel de control de clientes. Para esto, se sigue la jerarquía de plantillas de WordPress para crear un archivo de plantilla para este tipo de publicación específico. Cree un archivo llamado Single-TU_CUSTOMER.php en el directorio del tema raíz.

10. Crea un diseño de poste de ancho completo.

Build a client portal with WordPress: Create a full-width single post layout

[dieciséis] Hacer un diseño de ancho completo para su contenido (Crédito de la imagen: diseñador web)

Abra el archivo único-tu_customer.php y agregue las funciones GET_HEADER y GET_FOOTER WORDPRESS. Entre esas funciones, cree un diseño de ancho completo para mantener el contenido que funciona con su tema. 

 & lt;? Php get_header ();? & Gt;
& lt; div clase = "wrapper" id = "una sola envoltura" & gt;
& lt; div clase = "contenedor" id = "contenido" tabindex = "- 1" & gt;
& lt; div clase = "fila" y gt;
& lt; div class = "col-md content-area-area" id = "primario" & gt;
& lt; Main Class = "Site-Main" id = "Main" & GT; & Lt;! Contenido - & gt; & lt; / main & gt;
& lt; / DIV & GT;
& lt; / div & gt; & lt;! - .frow - & gt;
& lt; / div & gt; & lt;! - #content - & gt;
& lt; / DIV & GT; & LT;! - # Win-Wrapper - & GT;
& lt;? php get_footer ();? & gt;

11. Inicia el bucle y crea el contenido.

Build a client portal with WordPress: Start the loop and create the content

[dieciséis] Use marcadores de posición para diseñar su contenido. (Crédito de la imagen: diseñador web)

Dentro del & lt; Main & GT; Elemento, llame a THE_POST y cree los elementos del contenedor para mantener la información. Use información de marcadores de posición para tener una idea del diseño, y comience a diseñar los elementos. Los elementos de la tarjeta serán tarjetas de bootstrap con un encabezado, descripción y un enlace. 

 & lt; Main Class = "Site-Main" id = "Main" & GT;
& lt;? php while (have_posts ()): the_post (); & gt;
& lt; div clase = "contenedor" y gt;
& lt; div clase = "fila" y gt;
& lt; div clase = "col-sm-4" & gt; contenido & lt; / div & gt;
& lt; div clase = "col-sm-4" & gt; contenido & lt; / div & gt;
& lt; div clase = "col-sm-4" & gt; contenido & lt; / div & gt;
& lt; / DIV & GT;
& lt; / DIV & GT;
& lt;? PHP endwhile; // Fin del bucle. & gt;
& lt; / main & gt; & lt;! - #main - & gt;

12. Usa PHP para llamar a valores dinámicos.

Uso de la función "the_field", una función que viene con el complemento de campos personalizado avanzado, el contenido dinámico de los campos personalizados se ingresa en la plantilla del cliente. El 'Field_Name' es el valor que se ingresó en el Paso 3. 

 & lt; DIV clase = "Tarjeta de texto-Center" & GT;
& lt; div clase = "Tarjeta-cuerpo" y GT;
& lt; H5 Class = "Tarjeta-título" & gt; breve & lt; / h5 & gt;
& lt; p Class = "Tarjeta-Text" & GT; Este es su documento breve original & LT; / P & GT;
& lt; un href = "& lt;? php the_field ('breve');? & gt;" Target = "Ninguno" class = "BTN BTN-primaria" & gt; ABIERTE & LT; / A & GT;
& lt; / DIV & GT;
& lt; / DIV & GT;

13. Haga un cliente de prueba con algunos datos fantásticos

Build a client portal with WordPress: Make a test customer with some dummy data

[dieciséis] Ve al panel de WordPress para hacer un cliente ficticio (Crédito de la imagen: diseñador web)

Al acceder al panel de WordPress, se puede agregar un nuevo cliente desde la barra de la mano izquierda. Clientes y GT; Añadir nuevo cliente. La vista postal estará familiarizada, pero el desplazamiento hacia abajo revelará todos los nuevos campos personalizados. Ingrese algunos datos de prueba para asegurarse de que todo esté funcionando correctamente.

14. Manejar errores para los datos faltantes.

Build a client portal with WordPress: Handle errors for any missing data

[dieciséis] Asegúrese de que esté claro cuando los documentos no están disponibles (Crédito de la imagen: diseñador web)

Si se olvida un documento, o simplemente es demasiado pronto en el proceso para que esté disponible ese documento, podría ser confundido para un cliente cuando el botón no funciona. Agregar un cheque que existe un valor antes de mostrarlo da la oportunidad de mostrar una variación de "campo que falta" de la tarjeta. Agregar una clase "Deshabilitada" a la tarjeta cuando falta el valor nos permitirá estilizar tarjetas no disponibles. 

 & LT;? PHP if (get_field ('field_name')) :? & gt;
se muestra cuando el campo_name tiene un valor
& lt;? php otra cosa: // field_name devolvió falso? & gt;
se muestra cuando el campo no existe
& lt;? PHP Endif; // FIN DE SI FIELD_NAME LOGIC? & GT;

15. Poner en orden la interfaz.

Ahora que la estructura de la interfaz se finaliza, se puede diseñar correctamente. Usando CSS, se puede mejorar el aspecto de las tarjetas y los colores en la página. El color para la navegación se ha cambiado a un azul más claro, y se ha mejorado la dirección del usuario agregando texto de introducción.

16. Excluirlo desde el mapa del sitio.

Los tipos de publicaciones personalizados no se deben encontrar en los resultados de los motores de búsqueda. El tipo de publicación debe excluirse del Mapa del sitio del sitio web, ya sea a través de un complemento SEO, o utilizando manualmente una etiqueta META y Robots.txt. 

 & lt; Meta Name = "robots" content = "noindex, nofollow" / & gt;
Agente de usuario: *
No permitir: / Clientes /

¿Quieres diseñar un nuevo sitio web? Usa un brillante Creador de sitios web Para hacer el proceso súper simple.

Artículos relacionados:

  • Los mejores servicios de alojamiento de WordPress en 2019
  • 13 grandes herramientas para el lanzamiento a los clientes.
  • Sitios web de WordPress: 14 ejemplos impresionantes

Cómo - Artículos más populares

Comienza con pintor de llama

Cómo Sep 17, 2025

Pintor de llamas es un paquete independiente de efectos de pintura y partículas que le permite crear fácilmente pinturas originales, efectos de luz, diseños no convencionales o fondos fant..

Construye terreno en Houdini 17

Cómo Sep 17, 2025

[dieciséis] En Houdini 17, Sidefx introdujo algunas nuevas herramientas y mejoró otros para ampliar la gama de oportunidades para que..

Comprenda la tubería de importación de activos de Unity

Cómo Sep 17, 2025

[dieciséis] La unidad es uno de los motores de juego más populares del mundo, responsable de alimentar cientos de miles de juegos en ..

Cómo dibujar con la foto de afinidad para iPad

Cómo Sep 17, 2025

[dieciséis] Foto de afinidad para ipad es genial editor de fotos Pero, pero ¿cómo se trata de la aplicación de ..

Pintura de trazos controlados y suaves con bosquejo

Cómo Sep 17, 2025

Bosquejo es una aplicación de pintura para Windows 10. Te permite pintar trazos grandes en imágenes grandes sin retraso. Las imágenes se crean en 'revistas', de las cuales pued..

Crea marcos de estilo en Photoshop

Cómo Sep 17, 2025

[dieciséis] Página 1 de 2: Página 1 Página 1 Página 2 ..

Haz un cartel de una plantilla en Photoshop

Cómo Sep 17, 2025

Adobe está lanzando una nueva serie de tutoriales de video que hoy se llama hacerlo ahora, lo que tiene como objetivo esbozar cómo crear proyectos de diseño específicos usando varios ..

Cómo crear un banner web animado en Photoshop

Cómo Sep 17, 2025

La creación de banners web no es la más glamorosa de los empleos en el mundo, pero es algo que todos los diseñadores deberán hacer en algún momento de su carrera, probablemente muchas ve..

Categorías