Os utilizadores globais da Internet confiam cada vez mais nos telemóveisAcesso ao dispositivotornou-se uma tarefa essencial garantir que o seu sítio Web WordPress funciona sem problemas em todos os tamanhos de ecrã. Embora existam muitosplug-in (componente de software)pode ajudar com isso, mas esses plugins geralmenteAumento do tempo de carregamento do sítio Web e da complexidade do código.

Este artigo mostra-lhe como criar um sítio Web WordPress verdadeiramente compatível com dispositivos móveis sem plug-ins, personalizando a codificação e o CSS.

Porque é que a compatibilidade com os telemóveis é vital?

Antes de entrarmos nos passos específicos, vamos perceber porque é que a compatibilidade com dispositivos móveis é crucial para os sítios Web modernos.

1. experiência do utilizadorDesign responsivo garante que o seu sítio WebExperiência óptima em qualquer dispositivo.
2. Rankings dos motores de buscaOs motores de busca como o Google deixam claro queA compatibilidade com dispositivos móveis é um fator importante nas classificações de pesquisa.
3. taxa de conversãoUm sítio móvel de fácil utilização tem mais probabilidades de envolver os utilizadores numa navegação mais profunda, o que aumenta a probabilidade de acções de conversão importantes, como compras e registos.
4. tendências futurasO futuro ambiente de rede caraterizar-se-á porcentrado nos dispositivos móveisOs sítios que não conseguirem otimizar correm o risco de ser eliminados.

Compreender os princípios básicos de um sítio Web compatível com dispositivos móveis

Antes de entrarmos nas etapas específicas da implementação, precisamos primeiro de compreender o que é um sítio Web compatível com dispositivos móveis. Aqui estão alguns dos elementos-chave:

1. Sistema de grelha de fluidos::Sistema de grelha de fluidosPermitir que a apresentação do sítio varie em função do tamanho do ecrãregulação automática. É responsivo ao núcleo do design e garante que o conteúdo da página é apresentado corretamente em diferentes dispositivos.
2. Imagiologia flexívelAs imagens desempenham um papel importante nas páginas Web e as definições de imagem flexíveis garantem que são apresentadas adequadamente em diferentes ecrãs. Isto pode ser conseguido através deDefinição de diferentes resoluções e tamanhosIsto evita que as imagens se tornem demasiado volumosas ou desfocadas nos dispositivos móveis.
3. Pedido de informações aos meios de comunicação socialAs consultas multimédia podem basear-se nas caraterísticas do dispositivo (como o tamanho ou a resolução do ecrã) paraAplicar diferentes estilos CSS. Tornar possível que o seu sítio webAdaptação a vários equipamentos, do computador para o smartphone.

Passos para criar um site WordPress compatível com dispositivos móveis sem plug-ins

Em seguida, vamos explicar como conseguir um design compatível com dispositivos móveis para o seu sítio WordPress sem um plugin.

Passo 1: Verificar a conceção atual do sítio Web

Antes de efetuar quaisquer alterações, é necessário saber o que está atualmente no sítio. Utilize oChrome DevToolstalvezFerramentas de desenvolvimento do Mozilla FirefoxseguintesondaA disposição, o tamanho da imagem e a estrutura da grelha do sítio.Identificar áreas de melhoriae documentar os elementos de conceção que possam causar problemas.

Passo 2: Criar ou modificar o tema do WordPress

Para tornar um sítio Web compatível com dispositivos móveis, é necessário modificar um tema existente ou começar do zero.Começar a criar um novo tópico. Se não estiver familiarizado com o desenvolvimento de temas para WordPress, recomenda-se que comece com um tema existente e efectue alterações.

Por exemplo, podemos utilizar o tema predefinido do WordPress Twenty Twenty-One para efetuar alterações.

No diretório de temas do WordPress (normalmente localizado no diretório wp-content/themes/ caminho), crie uma nova pasta e dê-lhe o nome do seu tema personalizado, por exemplo vinte e vinte e um filho.

Na pasta do novo tema personalizado, alguns dos ficheiros do tema original têm de ser copiados e modificados. Pode ser necessário copiar style.css,functions.phpbem como ficheiros modelo (por exemplo header.php,rodapé.php (etc.). Estes ficheiros são a base para a realização de modificações de design e funcionais personalizadas.

existir style.css No topo do ficheiro, adicione informações básicas sobre o tema secundário, como o nome do tema, o modelo, o autor, etc:

Código cssCopy
/*
 Nome do tema: Twenty Twenty-One Child
 Modelo: twentytwentyone
 Autor: Seu nome
 Descrição: Um tema filho para o tema Twenty Twenty-One.
 Versão: 1.0
*/Versão: 1.0

existir functions.php certifique-se de que carrega a folha de estilos do tema principal para herdar os estilos do tema original:

Código phpCopy
get('Version')
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Passo 3: Configurar o sistema de malha de fluidos

O sistema de grelha fluida é fundamental para a implementação do design reativo. Ao configurar uma grelha fluida, a disposição do sítio pode ajustar-se automaticamente ao tamanho do ecrã. Abaixo está o código CSS básico que pode adicionar à folha de estilos do seu tema:

Código de cópia CSS
body {
  font-family: Arial, sans-serif; font-size: 16px; font-size: 16px
  font-size: 16px; line-height: 1.5; }
  line-height: 1.5;
  line-height: 1.5; margin: 0;
  line-height: 1.5; margin: 0; padding: 0;
}

.contentor {
  largura máxima: 1280px;
  margin: 0 auto; padding: 0 20px; } .container { max-width: 1280px; }
  padding: 0 20px;
}

.grid {
  display: grid; grid-template-columns: repeat(12, 1fr); }
  grid-template-columns: repeat(12, 1fr); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); }
  grelha; grelha-template-colunas: repetir(12, 1fr); gap: 10px; }
}

.grid-item {
  coluna da grelha: span 4; }
}

Este código define um sistema de grelha básico com 12 colunas e pode ser adaptado às suas necessidades.colunas do modelo de grelhapode ser definido para cada coluna do ficheirorácio de largura(matemática) génerolacunaé utilizado para definir o valor do atributoespaçamento.

Passo 4: Adicionar imagens flexíveis

As imagens flexíveis são essenciais para a otimização dos ecrãs móveis. Isto é conseguido através da utilização deconjunto de fontesresponder com cânticostamanhospode escolher diferentes tamanhos de imagem com base na densidade do ecrã do dispositivo. Segue-se um exemplo de código:

htmlCódigo de cópia<code><img src="image.jpg"
     alt="Descrição da imagem"
     srcset="image.jpg 1x, image@2x.jpg 2x"
     sizes="(max-width: 768px) 50vw, 100vw"
     loading="lazy"
     style="width: 100%; height: auto; margin: 0 auto; display: block;">

Neste exemplo, oconjunto de fontespermite ao navegadorSelecionar o tamanho de imagem ideal(matemática) génerotamanhosO atributo define a largura da imagem com base na largura do dispositivoTamanho do ecrã.loading="lazy"As propriedades podemAtraso no carregamento da imagematé o utilizador se deslocar para essa posição da imagem, reduzindo assim o tempo de carregamento inicial.

Etapa 5: Candidatar-se a um inquérito sobre os meios de comunicação social

As consultas multimédia podem otimizar o design responsivo de um sítio Web, aplicando estilos diferentes com base nas caraterísticas do dispositivo. Segue-se um exemplo de como aplicar consultas multimédia em CSS:

código cssCopy

@media only screen and (max-width: 1.0) 800px) {
  .grid {
    grid-template-columns: repeat(6, 1fr); }
  }
}

@media only screen and (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); }
  }
}

Neste código, a consulta multimédia ajusta o número de colunas da grelha com base na largura do ecrã do dispositivo. Quando a largura do ecrã é inferior a800 píxeisQuando isto for feito, a grelha será alterada deRedução de 12 para 6 colunase quando a largura do ecrã for inferior a600 píxeisQuando a grelha será maisReduzido para 2 colunas. Esta adaptabilidade garante que o seu conteúdo é apresentado da melhor forma possível em todos os dispositivos.

Etapa 6: Testar e otimizar o sítio Web

Depois de concluir todas as etapas anteriores, teste e optimize o seu sítio Web utilizando diferentesDispositivos e navegadores para testar a capacidade de resposta do sítio Webe garantir que todas as funcionalidades estão a funcionar corretamente. Dependendo dos resultados dos testes, poderá ser necessário ajustar o estilo CSS ou a estrutura HTML para garantir uma experiência óptima para o utilizador.

Sugestões e truques adicionais

1. Utilizar o pré-processador CSS: Considerar a utilização dePré-processadores de CSS, como Sass ou Lesspara escrever código mais eficiente e modular. Estas ferramentas podem ajudá-lo a gerir ficheiros CSS complexos e a tornar o código mais fácil de manter.
2. Manter o design simplesNo design responsivo, manter um design limpo não só ajuda a melhorar a experiência do utilizador, como também acelera o carregamento.
3. Actualizações e manutenção regularesO design responsivo não é definitivo e é necessário verificar e atualizar regularmente o seu código para garantir que o seu sítio Web tem sempre o melhor aspeto possível.
4. Pré-visualização em direto utilizando ferramentas de desenvolvimento: UtilizaçãoChrome DevToolstalvezFirefox Developer EditionA execução de uma pré-visualização em direto pode ajudá-lo a escrever código instantaneamente enquantoVer o efeito das modificações.

chegar a um veredito

A criação de um sítio Web WordPress compatível com dispositivos móveis não tem de depender de plug-ins. Utilizando técnicas básicas de front-end, como sistemas de grelha fluidos, imagens flexíveis, consultas de meios e outras, é possível otimizar eficazmente um sítio Web para diferentes dispositivos e tamanhos de ecrã.

Para aqueles que desejam aprender e dominar estas técnicas em profundidade, o Construtor de sítios Web autodidata WP Pode aprender a criar e otimizar um sítio Web para dispositivos móveis a partir do zero, adquirindo um conjunto completo de conhecimentos, desde conceitos básicos a técnicas avançadas.