Como usar AMP com o WordPress

AMP é um esforço comum que promete uma melhor desempenho de carregamento de página para sites no ambiente móvel. Mas, como você pode encontrar em nosso tutorial anterior, você terá que sacrificar coisas extravagantes do seu site e seguir estritamente as regras, seguir as diretrizes e obter as páginas validadas. Parece muito a fazer, não é?

Felizmente, se você criou o seu site com o WordPress, poderá aplicar AMP ao seu site rapidamente usando um plug-in chamado AMP-WP. Ele é enviado com mais recursos do que o que se vê. Então, vamos ver como funciona.

Ativação

Para começar, faça login no seu site, vá para Plugins> Adicionar Novo tela. Procurar por “AMP; instalar e ativar o da Automattic.

Depois de ativado, você pode visualizar a postagem convertida por AMP adicionando o / amp / trilha no final do URL da postagem (por exemplo,. http://wp.com/post/amp/), ou com ?amp = 1 (por exemplo. http://wp.com/post/?amp=1) se você não estiver usando o recurso Pretty Permalinks no seu site.

E como você pode ver acima, o post recebeu estilos básicos, que você pode personalizar ainda mais.

Anotar

Existem algumas coisas que você deve saber sobre o estado do plugin no momento:

• Arquivos - Categoria, Tag e Taxonomia Personalizada - atualmente não são suportados. Eles não serão convertidos em formato compatível com AMP. No entanto, os tipos de postagem personalizados podem ser iniciados em AMP por meio de um filtro.
• Não adiciona uma nova tela de configuração no Painel. A personalização é feita no nível do código com ações, filtros, classe.
• No momento, o plug-in não abrange todos os elementos personalizados de AMP, como amp-analytics e amp-ad sai da caixa. Se você precisar desses elementos, terá que incluí-los conectando-se às ações ou filtros do plug-in.

Costumização

O plug-in fornece várias ações e filtros que oferecem flexibilidade ao personalizar os estilos, o conteúdo da página e até mesmo a marcação HTML da página AMP como um todo.

Estilos

Tenho certeza de que essa é uma coisa que você deseja alterar imediatamente após ativar o plug-in, como alterar a cor do plano de fundo do cabeçalho, a família de fontes e o tamanho da fonte para melhor corresponder à marca e à personalidade do seu website.

Para fazer isso, podemos empregar amp_post_template_css Ação no funções.php arquivo do nosso tema.

function theme_amp_custom_styles () ?> nav.amp-wp-title-bar cor de fundo: laranja;   
Se examinarmos as DevTools do Chrome, esses estilos serão anexados ao