Come utilizzare AMP con WordPress

AMP è uno sforzo comune che promette a prestazioni di caricamento della pagina migliori per i siti Web nell'ambiente mobile. Ma, come puoi trovare dal nostro precedente tutorial, 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, no??

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 di ciò che soddisfa l'occhio. Quindi, vediamo come funziona.

Attivazione

Per cominciare, accedi al tuo sito web, vai a Plugin> Aggiungi nuovo schermo. Cercare “AMP; installa e attiva quello di Automattic.

Una volta attivato, è possibile visualizzare il post convertito da AMP aggiungendo il / Amp / tracciare alla fine dell'URL del post (ad es. http://wp.com/post/amp/), o con ?amp = 1 (per 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:

• archivio - Categoria, Etichetta e Tassonomia personalizzata - al momento non sono 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 è fatta a livello di codice con azioni, filtri, classe.
• Il plug-in non include attualmente tutti gli elementi personalizzati AMP come amp-analytics e amp-AD fuori dalla scatola. 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 plugin, 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 utilizzare il amp_post_template_css Azione nel functions.php file 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