30 of janeiro de 2014

Saiba como adaptar layout de WordPress para smartphones

Pimp your blog, Publishers Postado por

Cada vez mais a internet é considerada o tipo de mídia mais consumida no país, superando com grande margem a TV, os jornais, as revistas e as rádios. O interesse nas atividades online, principalmente nas redes sociais, vem aumentando gradualmente nos últimos anos. De acordo com uma pesquisa realizada pela Interactive Advertising Bureau (IAB Brasil), em parceria com a comScore, 88% dos brasileiros consideram que a internet é visivelmente o tipo de mídia mais importante.

Segundo a pesquisa, o ano de 2013 apresentou um crescimento recorde, fora da faixa média que vinha sendo registrada. Grande parte desse aumento foi devido à massificação dos dispositivos móveis como smartphones e tablets. Atualmente, 17.4% do tráfego da Internet mundial é proveniente de dispositivos mobile, e esse número vem aumentando geometricamente. Hoje, 10% dos acessos da rede de anúncios da boo-box vem por celulares, smartphones e tablets. A tendência é o crescimento exponencial nos próximos anos, portanto é necessário preparar seu blog para plataformas mobile, de forma que o conteúdo seja facilmente consumido pelos visitantes.

Hoje a boo-box irá ensinar blogueiros que tem WordPress em hospedagem própria a configurarem o ‘tema mobile’ e como implementar banners boo-box nesse layout.

Passo 1: Instalando Tema Mobile para WordPress utilizando Jetpack

1. Acesse seu painel administrativo do WordPress, vá ao menu Plugins > Adicionar Novo

2. Digite “Jetpack” no formulário de pesquisa e clique em “Pesquisar Plugins

3) A pesquisa retornará a última versão do plugin “Jetpack by WordPress.com”. Clique em “Instalar Agora” e logo depois em “Ativar Plugin”

4) Acesse o novo menu “Jetpack” na barra lateral do WordPress e clique “Conectar ao WordPress.com”. Logue com sua conta WordPress, caso não tenha, basta clicar em “Preciso de uma conta” e crie seu cadastro.

5) Após a conta vinculada no WordPress.com, acesse novamente a área “Jetpack” e desça até o addon “Tema para Mobile” e clique em “Ativar”

Pronto, agora seu blog tem uma versão mobile!

Passo 2: implementação do código boo-box no Layout mobile.

Você precisará de acesso ao FTP do servidor onde está instalado WordPress e um editor de texto simples (ex: Bloco de Notas ou Notepad++).

1) Acesse o FTP e siga o caminho: /public_html/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven

2) Baixe o arquivo content.php para seu computador e abra no editor de texto. É recomendável fazer backup dos arquivos antes de realizar os próximos passos.

3) Encontre o código “<?php the_content” (aproximadamente na linha 40) dentro do arquivo content.php.

4) Copie a o script do banner 300×250 (Medium Rectangle) de Criar Inventário e adicione a tag da boo-box antes do código “<?php the_content””, assim como no print screen abaixo:

5) Salve o arquivo content.php e suba novamente em seu servidor, substitua o arquivo existente. Pronto! Seu tema mobile agora veicula os banners da boo-box. Veja exemplo do tema mobile do Jetpack veiculando anúncios boo-box:

Assegure o funcionamento do tema, acesse através de seu smartphone e também, se possível, de outros dispositivos como tablets e smartphones diferentes do seu.
Existem ferramentas online para checar a versão mobile, uma delas é o PageSpeed, que mostrará uma prévia do seu site em um celular.

Enfatizamos no tutorial a implementação do formato 300×250 (Medium Rectangle), pois é um dos mais utilizados pelos anunciantes e que se encaixa em resoluções dos smartphones, potencializando o rendimento do seu blog.

As oportunidades que existem no mercado de publicidade online são gigantes, ainda mais com grande migração dos telespectadores para a internet. Este ano será o ano da sofisticação dos anunciantes na mídia online, e a boo-box quer, junto com você, continuar apostando na evolução deste mercado.

 

  1. Derraus | março 30, 2015 @ 23:08 - Responder

    Muito obrigado pela dica. Eu já estava desesperado! :)

  2. Leo | junho 9, 2016 @ 19:36 - Responder

    Realmente o procedimento acima funciona.