1. Início
  2. Back-end
  3. Guia de WordPress para Iniciantes: Aplicando um Tema e Instalando o WooCommerce

Guia de WordPress para Iniciantes: Aplicando um Tema e Instalando o WooCommerce

Pessoa configurando um tema Wordpress em seu site.

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.

Tela de login do WordPress
Tela de login do WordPress.

Após efetuar o login com sucesso, teremos a apresentação geral do nosso dashboard ou popularmente conhecido como Painel Administrativo do WordPress!

Painel administrativo do WordPress
Tela inicial ou 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 PostsCRUD (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

  • BibliotecaCRUD 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áginasCRUD 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

  • TemasCRUD de Temas Instalados no WordPress.
  • Personalizar – Área de edição de atributos, layout, cores e muitos outros itens pré definidos em cada tema.
  • WidgetsCRUD 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.
  • MenusCRUD 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áriosCRUD 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:

Tela principal dos temas WordPress.
Página de configuração dos temas WordPress.

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, ó:

Opções para adicionar novo tema WordPress.
Opções para adicionar novo tema WordPress.

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/.

Tema WordPress que vamos selecionar ase chama "Storefront".
Tema WordPress que vamos selecionar ase chama “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:

Datelhes do tema wordpress escolhido "Storefront".
Uma página que detalha as informações sobre o tema WordPress escolhido “Storefront”.

Ativando o seu tema WordPress

Feito isso, vamos clicar no botão superior escrito Instalar e em seguida em Ativar.

Instalação e ativação do tema WordPress em nosso site.
Instalação e ativação do tema WordPress “Storefront” em nosso site.

Após a ativação bem sucedida do tema, devemos ver essa tela:

Tela de sucesso na ativação do tema WordPress, que solicita a instalação do Woocommerce.
Tela de sucesso na ativação do tema WordPress, que solicita a instalação do Woocommerce.

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!

Cliques para ativar o WooCommerce.
Ativação do WooCommerce.

Configurações básicas do WooCommerce

Após a ativação bem sucedida, o WooCommerce irá abrir uma tela de configuração:

Tela de registro no WooCommerce.
Tela de registro no WooCommerce.

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.

Seleção do setor da loja e tipo de produto que será vendido no e-commerce.
Seleção do setor da loja e tipo de produto que será vendido no 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.

Seleção das integrações do e-commerce e do tema wordpress.
Seleção das integrações do e-commerce e do tema wordpress.

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.

Wordpress solicta integração com Jetpack e WooCommerce Shipping & Tax
WordPress solicta integração com Jetpack e WooCommerce Shipping & Tax.

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:

Solicitação de cadastro do primeiro produto no site
Solicitação de cadastro do primeiro produto no site.

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:

Adicionando um nome e uma descrição rápida do novo produto.
Adicionando um nome e uma descrição rápida do novo produto.

Feito isso, vamos precificar nosso produto!

Tela para adicionar um preço ao novo produto do tema wordpress.
Tela para adicionar um preço ao novo produto.

Mais abaixo vamos encontrar o painel de descrição:

Tela para adicionar uma descrição ao seu produto
Adicione uma descrição detalhada do seu produto!

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:

Tela para adicionar nova categoria de produto.
Adicione uam categorização para seu produto ficar bem posicionado no site.

No painel abaixo do de categorias encontraremos o de tags, vamos criar algumas, para isso basta digitar uma e clicar no botão “Adicionar”:

Tela para adicionar tags aos seus produtos
Adicione quantas tags quiser para classificar seus produtos.

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).

Tela para seleção da imagem do produto.
É aqui que você fazer upload e selecionar a imagem do seu produto.

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:

Tela para publicação do produto
Agora é hora de publicar o seu produto!

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:

Tela de confirmação de produto publicado.
Aqui você verá a mensagem de confirmação da publicação do produto, junto com sua URL.

Acessando esse link, podemos ver o nosso produto cadastrado em nosso WordPress:

Produto à venda em seu site wordpress.
Essa é a página de venda do seu produto publicado. Venda muito!

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!

Categorias

Leituras Recomendadas

Quer receber conteúdos incríveis como esses?

Assine nossa newsletter para ficar por dentro de todas as novidades do universo de TI e carreiras tech.