Close Menu
    Facebook X (Twitter) Instagram
    Select Game
    • Notícias e Posts Recentes
    • Games
      • Fortnite
      • World of Warcraft
      • Honkai Star Rail
      • Elden Ring
      • Listas de Troféus
      • Listas de Conquistas
    • Cosplays e Animes
      • Cosplays
      • One Piece
    • Stories, Looks
      • Web Stories
      • Looks
    Facebook X (Twitter) Instagram
    Select Game
    Início » Dicas » 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

    Rodrigo Flausino10/01/2018
    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

    Foto-Rodrigo-100px
    Rodrigo Flausino

    Atualmente como desenvolvedor de software backend, mas já foi jornalista e editor de conteúdos por mais de 10 anos, trabalhando também em portais importantes como o START UOL, Card na Manga e A Pá Ladina, além de outros sites de esports e MMOs. Hoje cobre com especialidade jogos como Fortnite, World of Warcraft, souls-likes, animes, games, cultura pop e é fã de cosplays!

    Share. Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp

    Posts Relacionados

    O Bing PubHub, a demora no retorno de uma solicitação de entrada e a falta de transparência para novos editores e sites

    Posts recentes
    • NARUTO SHIPPUDEN: Ultimate Ninja STORM 4 – Tempo para terminar, listas de troféus e conquistas e mais
    • GTA 6 pode ser o título mais caro da franquia, mesmo após um GTA 7, segundo ex-funcionário
    • Roblox Lendas do Voleibol – Novos códigos de julho de 2025 (Volleyball Legends Codes)
    • Roblox Brookhaven RP – Novos códigos de julho de 2025 (Codes)
    • Roblox Crescer um Jardim (Grow a Garden) – Jogo tem novos códigos em julho de 2025 ? Saiba mais
    • Genshin Impact: Novo teaser em preparação a Nod-Krai, com possíveis novas personagens
    • Troll Gear Tower – Códigos ativos de julho de 2025 no Roblox (Codes)
    • Fortnite ganha teaser da chegada do Superman
    • Termos de Serviço e Política de privacidade
    • Sobre
    • Contato
    © 2025 Select Game - Todos os Direitos Reservados. Imagens e embeds tem foco em divulgação!

    Type above and press Enter to search. Press Esc to cancel.