Aleluia, saiu a parte III do nosso Guia de WordPress! Hoje você vai aprender a instalar um Tema WordPress em nosso site!
Você pode acompanhar a parte I – “Desenvolvedor WordPress: O que você precisa saber para se aventurar?” e a parte II – “Guia de WordPress para Iniciantes: Instalando e configurando o WordPress”.
Seguindo em frente, meus queridos Padawans, na parte II instalamos o WordPress no servidor e ficamos com ele “vazio”, sem conteúdo, layout, cores… nadinha!
Hoje vamos ver como aplicar um tema ou theme em nosso WordPress e criar um conteúdo para o nosso site fictício, além de menu, textos, fotos, vitrine e contatos!
Ok, Godoy, mas que raios é um “WordPress theme“? – Simples, no WordPress os temas são layouts, áreas, espaçamentos, e até conteúdo pré-formatado para uma manipulação simples, rápida e intuitiva de conteúdo!
É como uma revista que já tem as áreas delimitadas para facilitar a inserção de conteúdo.
Vamos ao que nos interessa e colocar a mão na massa, ou melhor, no WordPress!
Apresentação do painel WordPress
Acessando a URL administrativa do nosso site em https://oticasgalocego.godahtech.com.br/wp-admin, devemos ver a seguinte tela, que é o login do WordPress. Colocamos nosso usuário e senha para acessar.
Após efetuar o login com sucesso, teremos a apresentação geral do nosso dashboard ou popularmente conhecido como Painel Administrativo do WordPress!
Agora, meus queridos Padawans, vou fazer uma apresentação geral e rápida item a item, ok?
Painel WordPress
- Início – Em Painel, temos o nosso painel administrativo (não brinca!), um dashboard configurável de pequenas ferramentas de apoio e/ou acesso rápido!
- Atualizações – Área usada para o controle de atualizações do próprio WordPress, com plugins, temas e pacotes de traduções.
Posts (Blog)
- Todos os Posts – CRUD (Create (Criar), Read (Ler), Update (Atualizar) e Delete (Deletar)) de exibição de todos os posts criados no nosso WordPress.
- Adicionar Novo – Iniciamos o desenvolvimento de uma nova postagem para o nosso blog WordPress.
- Categorias – CRUD de categorias linkáveis, para melhor organização e exibição dos posts para os usuários.
- Tags – CRUD de Tags para enfatizar e atribuir marcações linkáveis aos posts do WordPress.
Mídias
- Biblioteca – CRUD de arquivos de mídias do nosso site, tais como: Imagens, vídeos, PDF’s, etc.
- Adicionar Nova – Ferramenta de upload de mídia do nosso site.
Páginas
- Todas as Páginas – CRUD de páginas do nosso site WordPress.
- Adicionar Nova – Iniciamos o desenvolvimento de uma nova página para o nosso site.
Comentários
- CRUD de comentários dos usuários em páginas ou posts do WordPress.
Aparência
- Temas – CRUD de Temas Instalados no WordPress.
- Personalizar – Área de edição de atributos, layout, cores e muitos outros itens pré definidos em cada tema.
- Widgets – CRUD de Widgets. Eles adicionam conteúdo extra ao seu site e em áreas específicas, como o footer (Rodapé), sidebars (Barras laterais) e ou áreas personalizadas pré definidas em cada tema do WordPress.
- Menus – CRUD de Menus do nosso site. Aplicados no topo do site e/ou no rodapé, mas nada impede uma área ou um menu personalizado em outra parte do site.
- Editor de Temas – Editor de códigos de algumas partes do tema instalado, tais como .css, .js e .php que garantem o funcionamento do tema como um todo.
⚠️ ALERTA: não mexa diretamente nesses códigos por aqui, principalmente se você não tem experiência com programação. Usamos essa área apenas em último caso, mas último caso mesmo, pois toda e qualquer alteração realizada aqui tem um efeito imediato e irreversível na programação do tema do WordPress. O correto é editá-los em um ambiente de desenvolvimento, testar e depois subir a alteração por FTP.
Plugins
- Plugins Instalados – CRUD de Plugins do WordPress. Plugins são conjuntos de códigos adicionais que aumentam a capacidade de funções existentes ou criam novas em seu site para turbiná-lo!
- Adicionar Novo – Área de Upload e pesquisa no repositório WordPress de Plugins para instalar no site.
- Editor de Plugins – Funciona da mesma maneira que o Editor de Temas, mas em vez de editar o tema wordpress, aqui abre a edição dos códigos de plugins. Também não é recomendado mexer nesses códigos se você não possui experiência.
Usuários
- Todos os Usuários – CRUD de usuários do nosso site, que podem ser:
- Super Admin – Usuário com acesso à administração total de todos os sites quando habilitado o Modo Multi-Site do WordPress, possuindo o controle de toda a rede de sites.
- Administrador – Usuário com acesso administrativo total do site.
- Editor – Usuário com permissão de publicar e gerenciar posts e páginas, bem como gerenciar posts de outros usuários, e algumas coisas a mais.
- Autor – Usuário que pode somente publicar e gerenciar seus próprios posts.
- Colaborador – Usuário com permissão de escrever e gerenciar suas postagens, mas não pode publicá-las.
- Assinante – Usuário com acesso a áreas restritas no front-end do site e na admin, quando tem acesso, só pode editar seu próprio perfil e nada mais.
- Adicionar Novo – Adiciona um novo usuário ao WordPress.
- Perfil – Área de edição do seu próprio perfil de usuário.
Ferramentas
- Ferramentas Disponíveis – Área que exibe certas ferramentas de apoio a tarefas administrativas ou não já instaladas no core do WordPress, bem como no tema e/ou nos plugins.
- Importar – Ferramenta de importação de conteúdo de outros sistemas como Blogger e um Feed RSS para dentro do WordPress, ou mesmo de um WordPress para outro.
- Exportar – Ferramenta de Exportação de dados, posts, páginas e todo conteúdo em geral do seu WordPress em formato XML.
- Diagnóstico – O diagnóstico do site mostra informações críticas sobre as configurações do seu WordPress e itens que precisam de atenção.
- Exportar Dados Pessoais – Ferramenta de exportação de dados cadastrados de um determinado usuário, que é enviado ao email deste usuário e exigido uma autenticação de email para então seja liberado o download em formato .html. Atribuído à Lei Geral de Proteção de Dados (LGPD) ou do inglês GDPR (General Data Protection Regulation).
- Apagar Dados Pessoais – Solicitação para apagar seus dados pessoais do site, também com uma confirmação de email ao usuário a ser apagado, para então ser deletado. Atribuído à LGPD.
Configurações
- Geral – Editor de configurações gerais do site WordPress, tais como: Título do site, Descrição, Idiomas, etc.
- Escrita – Editor de funções de escrita do site, tais como: Categoria padrão de post, formato padrão de post, etc.
- Leitura – Editor de funções de leitura do site, tais como: As quantidade posts a mostrar nas páginas de loop (ou “Ciclo”, em programação, é uma repetição dentro de um programa) de posts, indexação do site, etc.
- Discussão – Editor de opções de comentários do site, tais como: Habilitar ou desabilitar a função de comentários, moderação de comentários, exigir registro e login de usuário para comentar, etc.
- Mídia – Editor de opções de mídias do site, tais como: Tamanho das imagens, thumbnails, organizações de arquivos, etc.
- Links Permanentes – Editor de como suas páginas e posts são exibidos na URL do site ao visitantes, exemplo:
- Nome do post – https://oticasgalocego.godahtech.com.br/post-exemplo/
- Mês e nome – https://oticasgalocego.godahtech.com.br/2021/03/post-exemplo/
- Privacidade – Configurações de Privacidade, como proprietário de um site, você pode ter de seguir a legislação nacional ou internacional de privacidade. Por exemplo, você pode ter de criar e exibir uma política de privacidade aos seus usuários e é aqui que realizamos a configuração dela.
Recolher Menu
- Sim, é para isso mesmo! Minimiza o menu ao lado esquerdo deixando apenas os ícones de cada sessão à mostra.
E aí, meus Padawans, tudo tranquilo até o momento? Temos bastante funcionalidades me nosso painel WordPress, né? Sim, Godoy, temos… Agora lascou! Que nada! Fiquem tranquilos, cada tela é muito intuitiva!
Instalando um tema WordPress (theme) no seu site!
Vamos em frente que atrás vem códigos… Bora aplicar um tema bacana para o nosso site fictício “Óticas Galo Cego”? Pois bem, para isso vamos ao repositório de temas nativo do wordpress.
Acessando a nossa Admin do WordPress ou Dashboard e clicando no menu à esquerda em Aparência, depois Temas, temos a seguinte tela:
Vamos clicar no botão na parte superior, Adicionar novo. Nos é apresentado uma tela com algumas opções de temas e uma barra com algumas opções de filtro. Assim, ó:
Aqui, podemos pesquisar temas que supram a nossa necessidade de desenvolvimento para tal cliente ou assunto de site, que no nosso caso é uma Ótica.
Qual tema WordPress escolher
Precisamos de uma loja virtual, mas não vou entrar em detalhes de loja e sua configuração de vendas agora!
Em breve faremos um artigo utilizando o plugin WooCommerce sobre como montar uma loja completa com sistemas de pagamento como o PagSeguro e MercadoPago, mas por hora vamos nos atentar ao conteúdo apenas.
Vamos buscar pelo tema “Storefront”, digitando no campo de pesquisa. Você pode encontrá-lo em https://br.wordpress.org/themes/storefront/.
O que vamos usar é o primeiro da esquerda para a direita, marcado com uma borda vermelha.
Clicando nele, teremos uma apresentação em detalhes do tema:
Ativando o seu tema WordPress
Feito isso, vamos clicar no botão superior escrito Instalar e em seguida em Ativar.
Após a ativação bem sucedida do tema, devemos ver essa tela:
Ativando o WooCommerce
Notem que na tela acima o tema está solicitando a instalação do plugin do WooCommerce. Ele gerenciará os produtos e muitas outras funções da loja do nosso site WordPress. Neste momento, com a instalação deste plugin, ela se tornará um e-commerce.
Bem, meus caros Padawans, vamos atender essa solicitação do tema do WordPress e instalar o WooCommerce! Para isso basta clicar em Instale o WooCommerce e aguarde uns minutinhos. Pronto, agora vamos clicar em Ativar WooCommerce!
Configurações básicas do WooCommerce
Após a ativação bem sucedida, o WooCommerce irá abrir uma tela de configuração:
As primeiras são configurações físicas (endereço)! Basta preencher e clicar no botão Continuar.
Depois, iremos escolher o setor em que a loja opera e os tipos de produtos, pensando nas futuras possiblidades. Isso vai dar uma configurada inicial em nosso e-commerce.
Em seguida, delimitamos as quantidades a serem exibidas e as integrações, as quais vamos desmarcar todas agora e por fim, se queremos instalar outro tema, mas vamos clicar em Continuar com meu tema ativo.
Após essas configurações, o WooComerce nos oferece uma integração com o Jetpack e WooCommerce Shipping & Tax, devemos clicar no botão Não Obrigado.
Feito esses passos, o Woocoomerce nos direciona para configurar algumas coisas em nossa loja, mas esse não é o foco neste momento, portanto não o faremos. Calma, Padawans, em breve faremos um artigo especial para lojas virtuais! 🤩
Cadastrar produtos na sua loja WordPress
Seguindo em nossa loja, vamos aprender a cadastrar alguns produtos, que tal?
Bem, vamos lá! 🏃♂️💨
Agora podemos ver que em nosso menu esquerdo foi acrescentadas quatro áreas novas, mas vamos nos atentar apenas na de Produtos agora. Vamos clicar em Todos os produtos, que é o nosso CRUD de Produtos do site.
Logo vemos uma introdução, já que não temos nenhum produto cadastrado, nos impulsionando a cadastrar o primeiro:
Ué, por que não?! Vamos clicar no botão Criar Produto.
Criando o seu primeiro produto WordPress
Vamos preencher o formulário de cadastro do nosso primeiro produto! Vamos dar um nome e uma breve descrição ao nosso produto:
Feito isso, vamos precificar nosso produto!
Mais abaixo vamos encontrar o painel de descrição:
Categorizando seus produtos
Agora, vamos criar uma categoria para o nosso produto no painel Categorias de Produto. Preencha com o nome da categoria e depois clique no botão abaixo no painel, Adicionar nova categoria:
No painel abaixo do de categorias encontraremos o de tags, vamos criar algumas, para isso basta digitar uma e clicar no botão “Adicionar”:
E ai meus queridos Padawans, tudo tranquilo até agora, simples não?
Hora de adicionar as imagens!
Seguindo, vamos definir uma imagem de destaque ao nosso produto, ela aparecerá como a imagem primária em locais de apresentação deste produto. Para isso vamos ao painel – Imagem do Produto e vamos clicar em Definir imagem do produto. O painel deve ficar como essa da direita.
(Se necessário, faça upload usando a ferramenta do próprio WordPress).
No painel abaixo, vamos encontrar a Galeria de Imagens do Produto e vamos clicar em Adicionar galeria de imagens do produto. Basta selecionar as outras imagens que representam seu produto para serem exibidas no momento da compra. Lembre-sede não incluir a imagem de destaque, afinal de contas já incluímos no destaque do produto:
Feito esses passos, vamos acessar o painel Publicar, e vamos clicar no botão Publicar:
Agora o produto será salvo no banco de dados e publicado em nosso site. Será exibido o seguinte alerta e junto com ele, o slug ou link permanente (Links permanentes são as URLs de cada postagem, categoria e outras listagens do blog) do nosso produto cadastrado:
Acessando esse link, podemos ver o nosso produto cadastrado em nosso WordPress:
Faremos mais uns 9 cadastros de produtos antes de continuar ok? Meus queridos Padawans, está ficando bom, né? Já temos nosso tema WordPress mas ainda estamos sem layout, cores e firulas. A paciência é uma virtude! Chegaremos lá, eu prometo! 🤔🙏
Na parte 4 e final desta “Tetralogia WordPress”, faremos a home page, página de loop, de contatos, o blog e o nosso menu!
O que acharam? Deixe seu comentário, dúvidas, críticas e sugestões, eu sempre responderei a todos!
Um forte abraço digital a todos e venham para o lado WordPress da força!