Contente
- 01. Instale uma nova cópia do WordPress
- 02. Remova os plug-ins padrão
- 03. Adicionar um tipo de postagem personalizado
- 04. A interface de adicionar / editar tipo de postagem personalizada
- 05. Crie um slug de reescrita personalizado
- 06. Adicionar suporte para campos personalizados
- 07. Adicionar campos personalizados
- 08. Configure os campos
- 09. Crie o arquivo de modelo do WordPress
- 10. Crie um layout de postagem única de largura total
- 11. Inicie o loop e crie o conteúdo
- 12. Use PHP para chamar valores dinâmicos
- 13. Faça um cliente de teste com alguns dados fictícios
- 14. Lidar com erros para quaisquer dados ausentes
- 15. Arrume a interface
- 16. Exclua-o do mapa do site
Ter uma área que permite aos usuários fazer login e baixar ou visualizar documentos é algo esperado pelos consumidores, de contratos de telefonia a utilidades.
Quando os designers trabalham com seus clientes, no entanto, tudo pode rapidamente se decompor em uma confusão de e-mails, links para maquetes e anexos.
Este tutorial do WordPress mostrará como estender o WordPress (outros serviços de hospedagem na web estão disponíveis) em um portal do cliente capaz de armazenar documentos, vídeos e desenhos, para que um cliente possa acessá-los em um só lugar. O portal atenderá cada cliente com um link exclusivo e protegido por senha que não aparece na navegação normal.
Os tipos e campos de postagem personalizados serão usados para armazenar os dados e serão adicionados por meio de plug-ins, para evitar a perda de dados caso o tema seja alterado. O tema será ligeiramente modificado.
Ter um portal do cliente oferece aos clientes a comodidade de acessar seus arquivos todos no mesmo lugar, sempre que precisarem, de forma semelhante ao armazenamento em nuvem. Ele tem uma série de vantagens de negócios, incluindo a exibição de up-sells disponíveis, ou pode ser usado 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 fornecer uma base padrão para iniciar o trabalho rapidamente. O plugin Custom Post Type UI será usado para que nossos tipos de post personalizados sejam independentes do tema.
02. Remova os plug-ins padrão
Se algum plug-in padrão veio com a cópia do WordPress, exclua-o. Os plug-ins necessários para este tutorial são "Campos personalizados avançados" e "UI de tipo de postagem personalizada". O "Editor Clássico" também foi instalado.
03. Adicionar um tipo de postagem personalizado
Usando a interface de IU do tipo de postagem personalizada, adicione um novo tipo de postagem chamado "cliente". Ao inserir o "slug de tipo de postagem", use sublinhados em vez de espaços e escreva no singular, pois isso tornará mais fácil criar modelos posteriormente. O prefixo tu_ foi adicionado para reduzir a chance de um conflito.
04. A interface de adicionar / editar tipo de postagem personalizada
Adicione um plural rotulado como "clientes" e um singular "cliente", pois isso aparecerá no menu de administração do WordPress. A capitalização é aceita nesses campos, o que tornará o menu do WordPress mais organizado.
05. Crie um slug de reescrita personalizado
Usar um prefixo para o slug de tipo de postagem significa que os clientes adicionados ao portal serão criados com um link que se parece com "/ tu_customer / example-company". Isso não parece arrumado, e o slug de reescrita personalizado é usado para melhorar isso. Definir o slug de reescrita como "clientes" permite que o tipo de postagem personalizado apareça como / clientes / empresa-exemplo.
06. Adicionar suporte para campos personalizados
A última opção habilitada para o tipo de postagem personalizada é "Suporta> Campo personalizado", que se encontra perto da parte inferior da página. Marque isso e, em seguida, "adicionar tipo de postagem" na parte inferior da página. Isso envia as alterações e registra o tipo de postagem.
07. Adicionar campos personalizados
Os campos personalizados agora precisam ser adicionados e atribuídos ao tipo de postagem que acabou de ser criado. Adicionar um grupo de campos denominado "portal do cliente" é a primeira etapa, seguida de adicionar campos personalizados a ele com o botão Adicionar campo. O primeiro campo "brief" será definido como o tipo de campo "arquivo", que permite ao administrador fazer upload de um arquivo neste local. Defina o valor de retorno para "url do arquivo".
08. Configure os campos
O próximo campo a ser adicionado é "questionário de 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 serão vinculados a um serviço externo. Quando terminar, role para baixo até a caixa "local" e use a lógica "Mostrar se tipo de postagem" = "Cliente". Em seguida, publique o grupo de campo.
09. Crie o arquivo de modelo do WordPress
O WordPress precisa saber como exibir um painel do cliente. Para isso, a hierarquia de modelos do WordPress é seguida para criar um arquivo de modelo para este tipo de postagem específico. Crie um arquivo chamado single-tu_customer.php no diretório do tema raiz.
10. Crie um layout de postagem única de largura total
Abra o arquivo single-tu_customer.php e adicione as funções get_header e get_footer do WordPress. Entre essas funções, crie um layout de largura total para conter o conteúdo que funciona com o seu tema.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Conteúdo -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Inicie o loop e crie o conteúdo
Dentro do elemento> principal, chame the_post e crie os elementos do contêiner para conter as informações. Use as informações do espaço reservado para ter 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, uma descrição e um link.
main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Conteúdo / div> div> Conteúdo / div> div> Conteúdo / div> / div> / div>? php endwhile; // fim do loop. ?> var13 -> / main>! - #main ->
12. Use PHP para chamar valores dinâmicos
Usando a função "the_field", uma função que vem com o plugin de campos personalizados avançados, o conteúdo dinâmico dos campos personalizados é inserido no modelo do cliente. O 'field_name' é o valor que foi inserido na etapa 3.
div> div> h5> Breve / h5> p> Este é seu breve documento original / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Abrir / a > / div> / div>
13. Faça um cliente de teste com alguns dados fictícios
Acessando o painel do WordPress, um novo cliente pode ser adicionado na barra à esquerda. Clientes> Adicionar novo cliente. A visualização da postagem será familiar, mas rolar para baixo revelará todos os novos campos personalizados. Insira alguns dados de teste para certificar-se de que tudo está funcionando corretamente.
14. Lidar com erros para quaisquer dados ausentes
Se um documento for esquecido ou se for simplesmente muito cedo para que o documento esteja disponível, pode ser confuso para o cliente quando o botão não funciona. Adicionar uma verificação de que existe um valor antes de mostrá-lo dá a chance de mostrar uma variação de "campo ausente" do cartão. Adicionar uma classe "desativada" ao cartão quando o valor está ausente nos permitirá estilizar os cartões indisponíveis.
? php if (get_field ('field_name')):?> var13 -> exibido quando o field_name tem um valor? php else: // field_name retornou falso?> var13 -> exibido quando o campo não existe? php endif ; // fim da lógica if field_name?> var13 ->
15. Arrume a interface
Agora que a estrutura da interface está finalizada, ela pode ser estilizada adequadamente. Usando CSS, a aparência dos cartões e cores na página pode ser melhorada. A cor da navegação foi alterada para um azul mais claro e a direção do usuário foi aprimorada com a adição de um texto de introdução.
16. Exclua-o do mapa do site
Os tipos de postagem 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 por meio de um plug-in de SEO ou manualmente usando uma metatag e robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / customers /
Quer criar um novo site? Use um excelente construtor de sites para tornar o processo extremamente simples.
