Contenido
- 01. Instale una copia nueva de WordPress
- 02. Eliminar complementos predeterminados
- 03. Agregar un tipo de publicación personalizada
- 04. La interfaz de agregar / editar tipo de publicación personalizada
- 05. Crea una babosa de reescritura personalizada
- 06. Agregue soporte para campos personalizados
- 07. Agregar campos personalizados
- 08. Configurar los campos
- 09. Crea el archivo de plantilla de WordPress
- 10. Cree un diseño de publicación única de ancho completo
- 11. Inicie el ciclo y cree el contenido.
- 12. Utilice PHP para invocar valores dinámicos
- 13.Haga un cliente de prueba con algunos datos ficticios
- 14. Manejar errores por cualquier dato faltante
- 15. Ordena la interfaz
- 16. Excluirlo del mapa del sitio.
Los consumidores esperan tener un área que permita a los usuarios iniciar sesión y descargar o ver documentos, desde contratos telefónicos hasta servicios públicos.
Sin embargo, cuando los diseñadores trabajan con sus clientes, todo puede descomponerse rápidamente en una confusión de correos electrónicos, enlaces a maquetas y archivos adjuntos.
Este tutorial de WordPress mostrará cómo extender WordPress (hay otros servicios de alojamiento web disponibles) en un portal de cliente capaz de almacenar documentos, videos y dibujos, para que un cliente pueda acceder a todos ellos en un solo lugar. El portal brindará a cada cliente un enlace único y protegido con contraseña que no aparece en la navegación habitual.
Se usarán tipos de publicaciones y campos personalizados 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 cambie el tema. El tema se modificará ligeramente.
Tener un portal de cliente les brinda a los clientes la conveniencia de acceder a sus archivos en el mismo lugar, siempre que los necesiten, al igual que cuando usan el almacenamiento en la nube. Tiene una variedad de ventajas comerciales, incluida la visualización de las ventas adicionales disponibles, o se puede utilizar para brindar una descripción general del proceso de trabajo desde el principio al describir visualmente los entregables.
Descargar los archivos para este tutorial.
- Cómo convertir WordPress en un constructor visual
01. Instale una copia nueva de WordPress
Se instala una copia nueva de WordPress en el servidor de desarrollo, y se ha elegido el tema "undertrap" para dar una base estándar para comenzar a trabajar rápidamente. Se utilizará el complemento de interfaz de usuario de tipo de publicación personalizada para que nuestros tipos de publicaciones personalizadas sean independientes del tema.
02. Eliminar complementos predeterminados
Si alguno de los complementos predeterminados venía con la copia de WordPress, elimínelos. Los complementos necesarios para este tutorial son "Campos personalizados avanzados" y "IU de tipo de publicación personalizada". También se ha instalado "Classic Editor".
03. Agregar un tipo de publicación personalizada
Usando la interfaz de IU de tipo de publicación personalizada, agregue un nuevo tipo de publicación llamado "cliente". Cuando ingrese el "Tipo de publicación slug", use guiones bajos en lugar de espacios y escriba en forma singular, ya que esto facilitará la creación de plantillas más adelante. Se ha agregado el prefijo tu_ para reducir la posibilidad de un conflicto.
04. La interfaz de agregar / editar tipo de publicación personalizada
Agregue un plural etiquetado como "clientes" y "cliente" en singular, ya que esto aparecerá en el menú de administración de WordPress. Se aceptan mayúsculas en estos campos, lo que hará que el menú de WordPress sea más ordenado.
05. Crea una babosa de reescritura personalizada
El uso de un prefijo para el tipo de publicación significará que los clientes agregados al portal se crearán con un enlace que se parece a "/ tu_customer / example-company". Esto no parece ordenado, y la barra de reescritura personalizada se usa para mejorar esto. Establecer la barra de reescritura en "clientes" permite que el tipo de publicación personalizada aparezca como / clientes / ejemplo-empresa.
06. Agregue soporte para campos personalizados
La última opción que está habilitada para el tipo de publicación personalizada es "Soportes> 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 envía los cambios y registra el tipo de publicación.
07. Agregar campos personalizados
Los campos personalizados ahora deben agregarse y asignarse al tipo de publicación que se acaba de crear. Agregar un grupo de campos llamado "portal del cliente" es el primer paso, seguido de agregarle campos personalizados con el botón Agregar campo. El primer campo "breve" se establecerá como el tipo de campo "archivo", lo que permite al administrador cargar un archivo en esta ubicación. Establezca el valor de retorno en "URL del archivo".
08. Configurar los campos
El siguiente campo que se agregará es "cuestionario de marca". Este consistirá en un enlace a un formulario 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 el cuadro "ubicación" y use la lógica "Mostrar si el tipo de publicación" = "Cliente". Luego publique el grupo de campo.
09. Crea el archivo de plantilla de WordPress
WordPress necesita saber cómo mostrar un panel de control del cliente. Para ello, 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 raíz del tema.
10. Cree un diseño de publicación única de ancho completo
Abra el archivo single-tu_customer.php y agregue las funciones de WordPress get_header y get_footer. Entre esas funciones, cree un diseño de ancho completo para contener el contenido que funciona con su tema.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Contenido -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Inicie el ciclo y cree el contenido.
Dentro del elemento main>, llame a the_post y cree los elementos del contenedor para contener la información. Use la información del marcador 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 arranque con un encabezado, una descripción y un enlace.
id principal = "principal">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? php end while; // fin del ciclo. ?> var13 -> / main>! - #main ->
12. Utilice PHP para invocar valores dinámicos
Usando la función "the_field", una función que viene con el complemento de campos personalizados avanzados, el contenido dinámico de los campos personalizados se ingresa en la plantilla del cliente. El "nombre_campo" es el valor que se ingresó en el paso 3.
div> div> h5> Brief / h5> p> Este es su documento breve original / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Open / a > / div> / div>
13.Haga un cliente de prueba con algunos datos ficticios
Al acceder al panel de WordPress, se puede agregar un nuevo cliente desde la barra de la izquierda. Clientes> Agregar nuevo cliente. La vista de la publicación le resultará familiar, pero al desplazarse hacia abajo se revelarán todos los nuevos campos personalizados. Ingrese algunos datos de prueba para asegurarse de que todo funcione correctamente.
14. Manejar errores por cualquier dato faltante
Si se olvida un documento, o simplemente es demasiado temprano en el proceso para que ese documento esté disponible, puede resultar confuso para un cliente que el botón no funcione. Agregar una verificación de que existe un valor antes de mostrarlo da la oportunidad de mostrar una variación de la tarjeta de "campo faltante". Agregar una clase "deshabilitada" a la tarjeta cuando falta el valor nos permitirá diseñar tarjetas no disponibles.
? php if (get_field ('field_name')):?> var13 -> mostrado cuando el field_name tiene un valor? php else: // field_name devuelto falso?> var13 -> mostrado cuando el campo no existe? php endif ; // fin de la lógica if field_name?> var13 ->
15. Ordena la interfaz
Ahora que la estructura de la interfaz está finalizada, se puede diseñar correctamente. Con CSS, se puede mejorar el aspecto de las tarjetas y los colores de la página. El color de la navegación se ha cambiado a un azul más claro y la dirección del usuario se ha mejorado al agregar texto de introducción.
16. Excluirlo del mapa del sitio.
Los tipos de publicaciones personalizadas no deben aparecer 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 de SEO o manualmente mediante una metaetiqueta y robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / customers /
¿Quieres diseñar un nuevo sitio web? Utilice un creador de sitios web brillante para simplificar el proceso.
