Pular para o conteúdo
Início » AMP » Alterações manuais do plugin AMP: CSS nos Posts Relacionados e correção de mixed content de HTTPS

Alterações manuais do plugin AMP: CSS nos Posts Relacionados e correção de mixed content de HTTPS

Teclado Foto

Dependendo do servidor de hospedagem onde você tem o seu blog/site, quando você atualiza o AMP for WP diversas opções acabam sendo resetadas, tendo de refazer elas no plugin. CSS, alteração de logo para deixar uma com a imagem já tendo o HTTPS… são algumas coisas que você pode mexer para melhorar a usabilidade do site, acessibilidade do leitor E o “push” do One Signal funciona melhor.

Decidi listar aqui algumas alterações, primeiro pra uso interno, e outras com dicas diversas. Mas tome cuidado com o tema escolhido do AMP, já que dependendo do layout, você pode ter alguns problemas, principalmente com galerias de imagens com captions.

Alteração de Logo

Rota: Components –> Logo –> Logo.php

Explicação: Você pode mudar o atributo da URL pra não pegar o que já esteja cadastrado previamente no plugin. Basta abrir uma página de AMP de um post e pegar a URL da loto no topo da página.

Resultado: Essa alteração deve resolver o problema de “Mixed Contend” que aparecerá em alguns navegadores.

AMP Alteração 01

Alteração de CSS para os Posts relacionados

Rota: Design Manager –> Design 1 –> Style.php

Explicação: No design padrão do AMP, sabe-se lá porquê, as thumbnails de Posts Relacionados ficam distorcidas e quadradas, e não é tão simples alterar. Para alterar, você terá de buscar no CSS a tag “related_posts ol li amp-img”, botando uma tag height com um tamanho variável, mas que seja condizente com a proposta do site. No meu caso, por conta das thumbs de topo dos posts serem retangulares (800×450), optei por deixar em 150 de largura por 84 de altura. Um programa que ajuda a setar uma medição é o Gimp, bastando redimensionar uma imagem qualquer e pegando as dimensões, alterando direto no código.

Resultado: usabilidade melhor para o leitor de smartphone.

Alteração AMP 2

Exemplo de valores para usar no CSS dos temas

CSS AMP 02