Come utilizzare AMP con WordPress

AMP è uno sforzo comune che promette una migliore prestazione di caricamento della pagina per i siti Web nell'ambiente mobile . Ma, come puoi trovare dal nostro tutorial precedente, dovrai sacrificare cose fantastiche dal tuo sito web, e seguire rigorosamente le regole, rispettare le linee guida e ottenere pagine convalidate. Sembra molto da fare, vero?

Fortunatamente, se hai creato il tuo sito Web con WordPress, puoi applicare AMP al tuo sito web in un attimo utilizzando un plug-in chiamato AMP-WP. Viene fornito con più funzioni rispetto a ciò che soddisfa l'occhio. Quindi, vediamo come funziona.

Attivazione

Per cominciare, accedi al tuo sito web, vai su Plugin> Aggiungi nuova schermata. Cerca "AMP; installa e attiva quello di Automattic.

Una volta attivato, è possibile visualizzare il post convertito da AMP aggiungendo il /amp/ trail alla fine dell'URL del post (ad es. http://wp.com/post/amp/ ) o con ?amp=1 (ad esempio http://wp.com/post/?amp=1 ) se non stai utilizzando la funzione Pretty Permalinks sul tuo sito web.

E come puoi vedere sopra, al post sono stati assegnati degli stili di base che puoi personalizzare ulteriormente.

Da notare

Al momento ci sono alcune cose che dovresti sapere sullo stato del plugin:

• Gli archivi - Categoria, Tag e Tassonomia personalizzata - non sono attualmente supportati. Non saranno convertiti in formato compatibile con AMP. Tuttavia, i tipi di messaggi personalizzati possono essere avviati in AMP tramite un filtro.
• Non aggiunge una nuova schermata di impostazione in Dashboard. La personalizzazione avviene a livello di codice con Azioni, Filtri, Classe.
• Al momento il plug-in non comprende tutti gli elementi personalizzati AMP come amp-analytics e amp-ad out of the box. Se hai bisogno di questi elementi dovrai includerlo collegandoti alle Azioni o ai Filtri del plugin.

Personalizzazione

Il plug-in offre numerose azioni e filtri che offrono flessibilità sulla personalizzazione degli stili, del contenuto della pagina e persino del markup HTML della pagina AMP nel suo complesso.

stili

Sono sicuro che questa è una cosa che si desidera modificare immediatamente dopo l'attivazione del plug-in, come cambiare il colore di sfondo dell'intestazione, la famiglia di caratteri e la dimensione del carattere per adattarsi meglio al marchio e alla personalità del tuo sito web.

Per fare ciò, possiamo usare l'azione amp_post_template_css nel file functions.php del nostro tema.

 function theme_amp_custom_styles () {?> nav.amp-wp-title-bar {background-color: orange; } 
Se guardiamo attraverso il Chrome DevTools, questi stili sono aggiunti all'interno del