• Articles
• admin

Como criar uma versão mobile de um site WordPress

Admitir: Ter um belo e pleno funcionamento versão móvel do seu site WordPress é uma obrigação, considerando que o volume significativo de navegação na internet se origina a partir de dispositivos móveis. É fácil criar um site móvel com WordPress na Namecheap, se você se inscrever para hospedagem compartilhada ou EasyWP WordPress Hosting.

você já deve ter notado que, às vezes, as versões web e móveis do mesmo site têm um conteúdo um pouco diferente. Isso é feito para excluir recursos específicos da versão móvel do WordPress, pois eles podem surgir ou funcionar incorretamente, ou simplesmente ser esmagadores em uma tela menor. Além disso, o algoritmo do mecanismo de pesquisa do Google classifica os sites compatíveis com dispositivos móveis mais altos.

neste artigo, abordaremos várias maneiras de tornar seu site WordPress compatível com dispositivos móveis:
criando Sites com design responsivo: O mesmo conteúdo e URL são carregados em cada dispositivo, mas o CSS é usado para alterar a renderização da página de acordo com a resolução da tela móvel.
Dynamic Serving Sites: um URL é carregado, mas diferentes conteúdos e CSS são usados, dependendo do dispositivo usado.
criando URLs separados para dispositivos móveis e Desktop: URLs diferentes e, portanto, sites são carregados, por exemplo, nctest.info e m.nctest.info

tenha em mente que cada maneira tem seus prós e contras, é por isso que recomendamos fazer uma pesquisa de SEO antes de prosseguir.
Web Design Responsivo
Web design responsivo usa consultas de mídia CSS3. Media Queries é um módulo CSS3 que permite que a renderização de conteúdo se adapte a condições como resolução de tela, largura e altura, orientação.
Normalmente, o arquivo que você precisará editar é estilo.Forum. Ele está localizado no diretório/wp-content/themes/ theme_name/.
uma consulta de mídia CSS3 geralmente se parece com:
@media only screen e (largura máxima: 480px) {
}
é um código condicional que diz ao navegador para ajustar todos os parâmetros de estilo se o tamanho da tela for menor ou igual a 480px.
para ficar mais granular, você pode adicionar intervalos de largura mínima e largura máxima para direcionar diferentes dispositivos:
@media apenas tela e (largura mínima: 768px) e (largura máxima: 959px) {
}
todos os ajustes de estilo adicionais devem ser adicionados entre o {…} suporte.
como exemplo, tomaremos o tema vinte e dez padrão que não responde por padrão.
o primeiro código define o tamanho do quadro principal do tema para 550px:
# access .menu-cabeçalho, div.se você está procurando uma solução para o problema, por favor entre em contato conosco.;
}
Compare como, neste caso, o site ficará em um dispositivo móvel:

embora, como você pode ver, nem todos os elementos são ajustados para a tela do dispositivo. Você precisa ajustar separadamente basicamente todos os elementos que você tem em seu site – Imagem de cabeçalho, descrição do blog, largura da barra de navegação, posição da camada de conteúdo, etc.
é possível ocultar alguns deles, como Controles deslizantes ou imagens de cabeçalho, por exemplo. Desta forma, a aparência da versão móvel do seu site será otimizada e amigável.
o seguinte código deve ser usado (por exemplo, para imagem de cabeçalho):
#branding img {
display:none;
}
Se você deseja redimensionar o elemento (imagem de cabeçalho no exemplo), use
#branding img {
> largura:100%
}
NOTA: Editar o estilo.o arquivo css também requer conhecimento de desenvolvimento web. Não se esqueça de fazer backup do seu arquivo antes de alterá-lo.
uma vez que todas as partes do seu site são ajustadas de acordo, ele deve ter uma boa aparência em dispositivos móveis:

a maioria dos temas do WordPress são criados para serem responsivos – ao instalar um novo tema, você pode verificar sua aparência anexada em dispositivos móveis adicionalmente.
se não houver nenhum e você não tiver certeza se o tema que você gostou é responsivo ou não, você poderá defini-lo nos filtros de recursos ao pesquisar o tema.
1. Faça login no painel de administração do WordPress (yourdomain.com/wp-admin), navegue até o menu Aparência, clique em temas.
2. Clique Em Adicionar Novo:

3. Clique em Filtro de recursos e verifique o Layout responsivo. Verifique outras opções, se necessário, para encontrar um tema desejado.
4. Clique em Aplicar filtros:

em alguns momentos, você verá a lista de temas que correspondem aos recursos de pesquisa que você definiu.
Dynamic Serving Websites
Alternativamente, você pode configurar diferentes CSS e conteúdo a ser puxado dependendo do tipo de dispositivo. Isso pode ser alcançado por meio dos plug-ins do WordPress. A maioria deles tem várias configurações básicas disponíveis gratuitamente.
como exemplo, usaremos um dos plug – ins mais populares para projetar blogs amigáveis para dispositivos móveis-WPtouch Mobile Plugin.
primeiro, você precisa instalá-lo e ativá-lo no painel de Administração.
uma vez feito isso, você deve escolher um tema para sua versão móvel do site – navegue até o menu WPtouch, clique em temas & Extensões (1). Escolha o tema necessário e clique em Configuração (2):

assim que a configuração terminar, você poderá fazer as alterações e correções necessárias. As opções do plugin permitem realizar muitas ações, e a maioria delas é autoexplicativa.
aqui está como o menu do plugin móvel WPtouch parece:

uma Vez que todos os ajustes terminado, salve as alterações e verificar como o site é exibido em um desktop e dispositivo móvel:

a Criação de URLs Separadas para Desktop e Dispositivos Móveis
A última forma é a mais demorada, como você vai precisar de:
1. Crie um subdomínio correspondente para sua versão móvel, como m.nctest.info.
2. Desenvolva ou copie o conteúdo do site para o caminho do diretório do subdomínio criado.
3. Instale e configure um plugin de redirecionamento móvel.
nota: Se você estiver usando essa opção, Lembre-se de que as duas versões do seu site não serão sincronizadas automaticamente, pois tecnicamente são instalações diferentes. Quaisquer edições que você fizer precisarão ser replicadas para a outra versão.
assim que o subdomínio for criado e o site for ajustado, vá em frente e instale o plugin no painel de administração do site principal.
como exemplo, usaremos o plugin Mobile Site Redirect.
1. Navegue até o Menu Configurações e clique em Redirecionamento do site móvel.
2. Insira o URL móvel que você gostaria de ter. Verifique quaisquer opções adicionais, se necessário.
3. Clique em Atualizar configurações:

nota: não fornecemos depuração de código e serviços de desenvolvimento de sites. Este artigo é fornecido como uma questão de cortesia apenas para sua conveniência.Caso você enfrente algum problema com a versão móvel do seu site, sugerimos que você consulte fóruns de suporte ou entre em contato com o desenvolvedor do site.
é isso!