Construa um portal do cliente com o WordPress

Sep 12, 2025
Como
Build a client portal with WordPress
(Crédito da imagem: Web Designer)

Ter uma área que permita que os usuários façam login e baixar ou visualizar documentos sejam esperados pelos consumidores, de contratos telefônicos para utilitários.

Quando os designers trabalham com seus clientes, no entanto, tudo pode dividir rapidamente em uma confusão de e-mails, links para Mockups. e anexos.

Esta Tutorial do WordPress. vai mostrar como estender o WordPress (outro hospedagem na web. Os serviços estão disponíveis) em um portal de clientes capazes de armazenar documentos, vídeos e desenhos, portanto, um cliente pode acessá-los todos em um só lugar. O portal atenderá a cada cliente com um link exclusivo e protegido por senha que não aparece na navegação regular.

Tipos e campos Post personalizados serão usados ​​para armazenar os dados, e estes serão adicionados por meio de plugins, para evitar a perda de dados, caso a alteração do tema. O tema será modificado ligeiramente.

Ter um portal cliente dá aos clientes a conveniência de acessar seus arquivos, todos no mesmo lugar, sempre que eles precisam deles, muito parecido ao usar armazenamento na núvem . Ele tem uma série de vantagens comerciais, incluindo a exibição de vendas disponíveis, ou pode ser usada para dar uma visão geral do processo de trabalho desde o início, delineando visualmente as entregas.

Baixe os arquivos para este tutorial.

  • Como transformar o WordPress em um construtor visual

01. Instale uma nova cópia do WordPress

Uma nova cópia do WordPress é instalada no servidor de desenvolvimento e o tema "Understrap" foi escolhido para dar uma base de calculadora para começar rapidamente a trabalhar. O plug-in UI do tipo Post personalizado será usado para que nossos tipos postais personalizados são independentes do tema.

02. Remova os plugins padrão

Se algum plugins padrão veio com a cópia do WordPress, exclua esses. Os plugins necessários para este tutorial são "campos personalizados avançados" e "UI do tipo Post personalizado". "Editor clássico" também foi instalado.

03. Adicione um tipo de postagem personalizado

Usando a interface UI do tipo Post personalizado, adicione um novo tipo de postagem chamado "Cliente". Ao entrar no "Post Type Slug", use sublinhados em vez de espaços e escreva na forma singular, pois isso facilitará a criação de modelos mais tarde. O prefixo TU_ foi adicionado para reduzir a chance de um conflito.

04. A interface de tipo de post personalizada Adicionar / Editar

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

Adicione etiquetas singulares e plurais (Crédito da imagem: Web Designer)

Adicione um plural rotulado "Clientes" e o singular "cliente", como isso aparecerá no menu Admin do WordPress. A capitalização é aceita nesses campos, o que tornará o menu WordPress mais arrumado.

05. Crie uma slug personalizada de reescrita

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

Use a Slug personalizada de reescrita para uma melhor experiência de usuário (Crédito da imagem: Web Designer)

Usando um prefixo para o tipo de postagem Slug significa que os clientes adicionados ao portal serão criados com um link que se parece com "/ TU_Customer / Exemplicante". Isso não parece arrumado, e a slug de reescrita personalizada é usada para melhorar isso. Definir a reescrita Slug para "Clientes" Permite que o tipo de postagem personalizado apareça como / clientes / empresa de exemplo.

06. Adicionar suporte para campos personalizados

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

Marque a opção "Field personalizado" e envie as alterações (Crédito da imagem: Web Designer)

A última opção que é habilitada para o tipo de postagem personalizada é "suporta e gt; campo personalizado", que é encontrado perto da parte inferior da página. Marque isso e, em seguida, "Adicione o tipo Post" na parte inferior da página. Isso envia as mudanças e registra o tipo de postagem.

07. Adicionar campos personalizados

Build a client portal with WordPress: Add custom fields

Agora você precisa adicionar campos personalizados ao seu novo tipo de postagem (Crédito da imagem: Web Designer)

Os campos personalizados agora precisam ser adicionados e atribuídos ao tipo de postagem que acabou de ser criado. Adicionando um grupo de campo chamado "Customer Portal" é a primeira etapa, seguida, adicionando campos personalizados a ele com o botão Adicionar campo. O primeiro campo "Brief" será definido como o arquivo de campo "arquivo", que permite ao administrador carregar um arquivo neste local. Defina o valor de retorno para "Arquivo URL".

08. Configure os campos

O próximo campo a ser adicionado é "Questionário da marca". Isso consistirá em um link para um formulário do Google que o cliente deve preencher. O tipo de campo mais adequado para isso é "URL". Esse mesmo método pode ser usado para todos os campos que irão vincular a um serviço externo. Quando terminar, role para baixo até a caixa "Localização" e use a lógica "Mostrar se o teclado" = "Cliente". Em seguida, publique o grupo de campo.

Generate CSS

Reserve seus ingressos para gerar CSS agora para economizar £ 50 (Crédito da imagem: Getty / Future)

09. Crie o arquivo de modelo WordPress

O WordPress precisa saber como exibir um painel do cliente. Para isso, a hierarquia do modelo WordPress é seguida para criar um arquivo de modelo para este tipo específico. Crie um arquivo chamado single-tu_customer.php no diretório temático raiz.

10. Crie um layout de postagem de largura total

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

Faça um layout de largura total para o seu conteúdo (Crédito da imagem: Web Designer)

Abra o arquivo single-tu_customer.php e adicione as funções WordPress Get_Header e Get_Footer. Entre essas funções, crie um layout de largura total para manter o conteúdo que funcione com seu tema. 

 & lt;? Php get_header ();? & Gt;
& lt; div class = "wrapper" id = "wrapper único" & gt;
& lt; div classe = "contêiner" id = "conteúdo" tabindex = "- 1" & gt;
& lt; div classe = "linha" & gt;
& lt; div classe = "col-md área de conteúdo" ID = "primário" & gt;
& lt; principal class = "site-principal" id = "principal" & gt; & lt; -! Conteúdo - & gt; & lt; / main & gt;
& lt; / div & gt;
& lt; / div & gt; & lt;! - .Row - & gt;
& lt; / div & gt; & lt;! - #content - & gt;
& lt; / div & gt; & lt;! - # wrapper único - & gt;
& lt;? php get_footer ();? & gt;

11. Inicie o loop e crie o conteúdo

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

Use espaços reservados para colocar seu conteúdo (Crédito da imagem: Web Designer)

Dentro do & lt; main & gt; Elemento, ligue para o The_Post e crie os elementos do contêiner para manter informações. Use informações do espaço reservado para obter uma ideia do layout e começar a estilizar os elementos. Os elementos do cartão serão cartões de bootstrap com um cabeçalho, descrição e um link. 

 & lt; principal class = "site-principal" id = "principal" & gt;
& lt;? php while (heve_posts ()): the_post (); ? & gt;
& lt; div classe = "contêiner" & gt;
& lt; div classe = "linha" & gt;
& lt; div class = "col-sm-4" & gt; conteúdo & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; conteúdo & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; conteúdo & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt;? Php Endwile; // final do loop. ? & gt;
& lt; / main & gt; & lt;! - #main - & gt;

12. Use PHP para ligar para valores dinâmicos

Usando a função "the_field", uma função que vem com o plugin avançado de campos personalizados, o conteúdo dinâmico dos campos personalizados é inserido no modelo do cliente. O 'Field_name' é o valor inserido na etapa 3. 

 & lt; div classe = "Centro de texto" & gt;
& lt; div classe = "corpo-corpo" & gt;
& lt; h5 class = "card-title" & gt; breve & lt; / h5 & gt;
& lt; p class = "card-text" & gt; este é o seu documento breve original & lt; / p & gt;
& lt; a href = "& lt;? php the_field ('brief');? & gt;" alvo = "Nenhum" classe = "btn btn-primário" & gt; aberto & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;

13. Faça um cliente de teste com alguns dados fictícios

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

Vá para o painel do WordPress para fazer um cliente fictício (Crédito da imagem: Web Designer)

Acessando o painel do WordPress, um novo cliente pode ser adicionado a partir da barra esquerda. Clientes & GT; Adicionar novo cliente. A visualização da postagem será familiar, mas a rolagem irá revelar todos os novos campos personalizados. Digite alguns dados de teste para garantir que tudo esteja funcionando corretamente.

14. Manipular erros para qualquer dados ausente

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

Certifique-se de que esteja claro quando os documentos não estão disponíveis (Crédito da imagem: Web Designer)

Se um documento for esquecido, ou é simplesmente muito cedo no processo para esse documento estar disponível, ele pode ser confuso para um cliente quando o botão não funcionar. Adicionando um cheque que um valor existe antes de mostrar que dá a chance de mostrar uma variação de "campo ausente" do cartão. Adicionando uma classe "desativada" ao cartão quando o valor estiver ausente nos permitirá estilizar cartões indisponíveis. 

 & lt;? Php se (get_field ('field_name'):? & Gt;
exibido quando o campo Field_name tem um valor
& lt;? php else: // field_name retornou false? & gt;
exibido quando o campo não existe
& lt;? php endif; // final da lógica de field_name? & gt;

15. Tidy até a interface

Agora que a estrutura da interface é finalizada, ela pode ser estilizada corretamente. Usando CSS, a aparência das cartas e cores na página pode ser melhorada. A cor da navegação foi alterada para um azul mais leve, e a direção do usuário foi melhorada adicionando texto de introdução.

16. exclui-lo do sitemap

Os tipos postais personalizados não devem ser encontrados nos resultados dos mecanismos de pesquisa. O tipo de postagem precisa ser excluído do sitemap do site, seja através de um plugin SEO ou usando manualmente uma tag Meta e robots.txt. 

 & lt; meta nome = "Robots" conteúdo = "Noindex, nofollow" / & gt;
Agente de usuário: *
Não permitir: / clientes /

Quer projetar um novo site? Use um brilhante Construtor de sites para tornar o processo super-simples.

Artigos relacionados:

  • Os melhores serviços de hospedagem WordPress em 2019
  • 13 grandes ferramentas para lançar para os clientes
  • Websites WebPress: 14 exemplos impressionantes

Como - Artigos mais populares

Como usar o armazenamento em nuvem como criativo

Como Sep 12, 2025

(Crédito da imagem: Jan Vašek de Pixabay) Por que você precisa saber como usar o armazenamento em nuvem? Well Clou..

17 dicas para desenhar rostos mangá

Como Sep 12, 2025

(Crédito da imagem: Zakary Lee) Manga rostos são uma parte vital de desenhar mangá. Comecei minha carreira de dese..

Lino PrintMaking: uma introdução

Como Sep 12, 2025

(Crédito da imagem: Meg Buick) O Lino PrintMaking é um método de impressão de relevo, que envolve esculpir um des..

Como criar uma autêntica manga cômica

Como Sep 12, 2025

Pagina 1 de 2: Página 1 Página 1 Página 2 Enquanto o estilo e o ..

Como conseguir melhor iluminação com V-Ray

Como Sep 12, 2025

O diretor de laboratório do Grupo Chaos Chris Nichols estará fazendo uma conversa em conhecimentos em V�..

Como pintar uma cena tradicional da vila britânica

Como Sep 12, 2025

Igrejas medievais, pastagens verdes e casas de fazenda de cobertura de ardósia são sinônimos com as aldeias que lixo a paisage..

Adicionar sugestões visuais ao seu site

Como Sep 12, 2025

É irritante para os usuários do site clicar em um link apenas para descobrir que a página da Web não é de interesse, desperd..

Faça um gif animado no Photoshop

Como Sep 12, 2025

A Adobe está lançando uma nova série de tutoriais de vídeo hoje chamada Faça agora, que visa delinear como criar projetos de design específicos usando vários Nuvem criativa ..

Categorias