Recentemente, um de nossos leitores nos perguntou como alterar o lado da barra lateral de um tema WordPress.
Normalmente, recebemos essa pergunta de usuários que desejam alterar o local da barra lateral da esquerda para a direita ou da direita para a esquerda.
Neste tutorial, mostraremos como alterar a localização da barra lateral no WordPress.
Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog
Então, voltemos ao porquê de estarmos aqui.
Por que mudar a localização da barra lateral no WordPress?
Os especialistas em usabilidade acreditam que as pessoas digitalizam as páginas da esquerda para a direita. Eles recomendam colocar conteúdo importante à esquerda para que os usuários vejam esse conteúdo primeiro. No entanto, isso pode ser revertido se o seu site estiver em um idioma RTL (direita à esquerda).
Descubra se seu blog WordPress deve ter barras laterais
Muitos sites WordPress usam o layout típico de blog com duas colunas. Uma para o conteúdo e a outra coluna para a barra lateral.
Se você é novo nos sites, deve selecionar um tema do WordPress que tenha uma barra lateral no seu local preferido.
muitos Temas do WordPress oferecem opções para alterar o lado da barra lateral nas configurações da barra lateral. No entanto, se o seu tema WordPress não tiver essa opção, você terá que alterar o lado da barra lateral manualmente. Vá mais longe descobrindo como remover a barra lateral no WordPress
Dito isso, vamos dar uma olhada no método que você precisa usar para alterar facilmente o lado da barra lateral do WordPress usando CSS.
Alterando a barra lateral com CSS
Antes de fazer qualquer alteração em seu tema WordPress, você deve primeiro considerar o criando um tema filho. Ao usar um tema filho, você poderá atualizar o tema pai sem perder as alterações.
Discover Como exibir uma barra lateral diferente para cada item no WordPress
Segundo, você sempre deve criar um backup do seu site WordPress ao fazer alterações em tempo real no seu tema ativo.
Você precisará de um cliente FTP para editar os arquivos de tema do WordPress. Consulte o orientar sobre como usar o FTP.
Faça login no seu site WordPress usando o cliente FTP e navegue até a pasta de temas. Geralmente está localizado em:
/ Yoursite / wp-content / themes / your-theme-pasta /
Agora você precisa baixar e abrir o arquivo de folha de estilo principal do seu tema WordPress em um editor de texto como o Bloco de notas. Este arquivo é chamado style.css, e está no diretório raiz do seu tema WordPress.
Discover como gerenciar arquivos e pastas do WordPress
Neste arquivo, encontre a classe CSS da sua barra lateral. Geralmente essa classe é " barra lateral ". Neste exemplo, usamos o tema padrão do WordPress " vinte quinze Quem tem essa classe para a barra lateral:
.sidebar {flutuar: esquerda; margem direita: -100%; largura máxima: 413px; posição: relativa; largura: 29.4118%; }
Como você pode ver, a barra lateral flutua para a esquerda com uma margem de -100%. Vamos mudar o flutuador para a direita:
.sidebar {float: direita; margem esquerda: -100%; largura máxima: 413px; posição: relativa; largura: 29.4118%; }
Salve suas alterações e faça o upload do arquivo style.css no seu site usando um cliente FTP. Agora, se você visitar seu site, ele ficará assim:
Na verdade, movemos a barra lateral, mas não movemos a área de conteúdo. " Vinte Fifteen Usa esse CSS para definir a posição da área de conteúdo.
.site-content {display: bloco; flutuar: esquerda; margem esquerda: 29.4118%; largura: 70.5882%; }
Vamos alterá-lo para mover o conteúdo para a direita. Como segue:
.site-content {display: bloco; flutuar: esquerda; margem direita: 29.4118%; largura: 70.5882%; }
Aqui está a aparência do seu site depois de aplicar esse código CSS.
Como você pode ver, alteramos o local da área de conteúdo e da barra lateral. No entanto, ainda há um bloco branco à esquerda.
Vá além descobrindo como gerenciar arquivos e pastas do WordPress
Você freqüentemente encontrará esses erros ao trabalhar com CSS. Vai demorar algum trabalho de detetive para entender o que está causando isso e como corrigi-lo.
Use a ferramenta "Inspetor" do seu navegador para visualizar o código-fonte. Aponte o mouse para a região afetada no navegador, clique com o botão direito e selecione "Inspetor" no menu do navegador.
Conforme você move o mouse ao redor da visualização do código-fonte, você notará as áreas afetadas destacadas na visualização ao vivo. No painel direito, você poderá ver o CSS usado para o elemento selecionado.
Descubra nossos 5 WordPress plugins para editar visualmente CSS no seu blog
Portanto, o CSS correspondente ao item destacado deve ser reajustado.
@media screen e (largura mínima: 59.6875em) {body: before {background-color: #fff; caixa-sombra: 0 0 1px rgba (0, 0, 0, 0.15); conteúdo: ""; display: bloco; altura: 100%; altura mínima: 100%; posição: fixa; topo: 0; esquerda: 0; largura: 29.4118%; índice z: 0; / * Corrige bug piscando com rolagem no Safari * /}
Este código CSS adiciona um bloco vazio de 29,4118% de largura e uma largura de 100% à parte superior esquerda. Veja como vamos movê-lo para a direita.
@media screen e (largura mínima: 59.6875em) {body: before {background-color: #fff; caixa-sombra: 0 0 1px rgba (0, 0, 0, 0.15); conteúdo: ""; display: bloco; altura: 100%; altura mínima: 100%; posição: fixa; topo: 0; direita: 0; largura: 29.4118%; índice z: 0; / * Corrige bug piscando com rolagem no Safari * /}
Depois de salvar e enviar a folha de estilo para o servidor, seu site ficará assim.
Trabalhar com CSS pode ser confuso para iniciantes. Se você não quiser fazer todo o trabalho manual, tente o WordPress CSS Hero plugin. Ele permite que você edite CSS sem escrever código e funciona com todos os temas do WordPress.
Descubra também alguns plugins premium do WordPress
Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.
Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.
1. Zxeion
Zxeion é um poderoso WordPress Plugin premium responsável por melhorar a segurança do seu site. Este plugin contém uma coleção de ferramentas de proteção e segurança que protegerão seu site contra possíveis ataques.
Seu sistema de proteção em tempo real o ajudará a identificar ameaças ao seu site e bloqueá-las, sem que você precise fazer nada.
Descubra também o nosso 7 plugins para aumentar suas barras laterais no WordPress
Suas características são: proteção em tempo real, excelente suporte ao cliente, atualizações regulares, bloqueador de endereço IP, excelente documentação, interface moderna e profissional, suporte dedicado ao cliente e outros
Descarregar | Demo | hospedagem na web
2. Slaido
Slaido é um WordPress Plugin premium que permite que você escolha entre quase 320 modelos de sliders responsivos e importe um deles para o seu site em apenas alguns cliques. É um pacote completo de templates, perfeito para Revolução Slider. Então você terá que instalá-lo primeiro para usar totalmente este WordPress Plugin
Suas principais características são: um layout responsivo de seus controles deslizantes, a facilidade de importar ou exportar controles deslizantes, atualizações regulares, suporte ao cliente disponível 24/7, animações fluidas e muito legais, a disponibilidade de tutoriais em vídeo para um início rápido, suporte para Google Fonts e muito mais.
Descarregar | Demo | hospedagem na web
3. Entre em contato conosco
O Formulário de Contato é um plugin premium responsivo para WordPress e uma ferramenta simples, mas rica em opções de personalização que permite a você exibir um formulário claro e encorajador, no qual seus visitantes podem contatá-lo deixando sua mensagem.
Você poderá definir os campos necessários, escolher o melhor layout dos campos e personalizá-lo completamente para incentivar seus clientes ou visitantes a deixarem suas sugestões ou mensagens.
Também convidamos você a ler: 10 WordPress plugins para criar e gerenciar um site de restaurante
Basta configurar o endereço de e-mail em que deseja receber as mensagens e usá-lo para expandir seus negócios na direção mais lucrativa.
Descarregar | Demo | hospedagem na web
Recursos Recomendados
Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.
- Como encontrar o URL de login do seu blog WordPress
- Como criar uma zona de super-herói com texto animado
- Como personalizar o CSS do seu site WordPress
- Como adicionar categorias para o menu do seu blog WordPress
Conclusão
Aqui! É isso para este tutorial. Esperamos que isso ajude você a mudar a barra lateral do seu blog do WordPress. sinta-se livre para compartilhe este artigo com seus amigos em suas redes sociais favoritas.
No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.
Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários.
...