Share
In questo tutorial stiamo andando a fare i conti con la generazione di versioni AMP valide dei post del tuo sito WordPress. Lo faremo utilizzando il plug-in AMP creato da Automattic.
Ci sono plugin alternativi disponibili che potresti usare, se lo desideri, ma dato che abbiamo solo spazio per guardare un singolo plugin in questo tutorial, ci concentreremo su quello creato dal team dietro a WordPress stesso.
Nota: questo articolo presume che tu abbia già familiarità con la creazione di pagine AMP valide e, in quanto tale, si concentri sui dettagli specifici dell'utilizzo combinato di WordPress e AMP. Se non conosci l'AMP, controlla:
Si presuppone inoltre che tu abbia familiarità con l'esecuzione di un sito WordPress ospitato autonomamente. In caso contrario, potresti trovare utili queste risorse:
Questo plug-in, denominato semplicemente AMP, automatizza la generazione di post singoli validi per AMP. Per ogni post che crei, sarà disponibile anche una seconda versione / Amp / aggiunto al permalink. Se non stai utilizzando la funzionalità di riscrittura permalink di WordPress sul tuo sito /? Amp = 1 verrà invece aggiunto all'URL.
Ad esempio questo è un normale post WordPress:
Tieni presente che qui ho l'estensione AMP Validator installata in Chrome che rileva che è disponibile una versione AMP di questa pagina e visualizza un'icona di collegamento blu:
Estensione Validator AMPSe faccio clic sull'icona dell'icona piccolo blu dell'estensione, ci porta alla versione AMP del post:
L'uso di questo plug-in nel suo stato predefinito è praticamente "plug and play". Installa, attiva e sei attivo e funzionante. Non ci sono opzioni di configurazione che richiedono attenzione come parte del setup.
Al momento questo plug-in funziona solo su singoli post: non influisce su pagine, tipi di post personalizzati o archivi. La pagina del plugin nel repository di WordPress afferma che il supporto per questi è attualmente in fase di sviluppo.
Se ti piace utilizzare il plug-in SEO di Yoast per i tuoi post regolari, è disponibile un plug-in aggiuntivo denominato "Colla per Yoast SEO & AMP" per generare metadati in stile Yoast anche nei tuoi post AMP. Ad esempio, ha aggiunto questi meta tag al post demo illustrato in precedenza:
Per utilizzare questo plugin devi prima installare il plugin principale di Yoast SEO. Il plug-in Colla aggiungerà quindi una sezione aggiuntiva etichettata AMP al principale del plugin SEO menu di amministrazione.
Una delle parti più significative della creazione di pagine AMP valide sta utilizzando i suoi elementi personalizzati richiesti per il posizionamento multimediale, come ad esempio amp-img invece di img per esempio. Tuttavia, quando si creano post in WordPress di solito si lavora nell'editor WYSIWYG TinyMCE e non si controlla direttamente il markup utilizzato per l'inserimento dei media.
Con il plug-in AMP di Automattic installato non devi preoccuparti di questo poiché filtrerà automaticamente i tuoi contenuti e realizzerà le seguenti conversioni su elementi AMP personalizzati:
Accentsconagua
img → amp-img o amp-anim video → amp-video Audio = → amp-audio iframe → amp-iframe amp-youtube amp-instagram amp-twitter amp-vineNota: se utilizzi Flash ovunque sul tuo sito non è supportato. Qualsiasi altro tipo di supporto può essere utilizzato nei post AMP a condizione che venga aggiunto utilizzando uno degli elementi dall'elenco sopra.
Un'altra considerazione quando si utilizza il plug-in AMP di Automattic sui tuoi post WordPress è come si comportano shortcode e plug-in.
Il plug-in di Automattic impedisce ai post di AMP di utilizzare il normale wp_header () e wp_footer () funzioni a tema che sono spesso sfruttate dai plugin per generare JavaScript, CSS e HTML personalizzati. Se un plugin che stai utilizzando dipende da una di queste funzioni, non funzionerà.
Affinché un plugin generi codice personalizzato in combinazione con il plug-in AMP, deve fare uso di azioni e filtri speciali che sostituiscono la normale funzionalità del tema WP. Ad esempio, non puoi aggiungere meta tag al file sezione come di solito, usando il wp_head azione per generare il codice attraverso il wp_header () funzione, ma puoi usare il amp_post_template_metadata filtro invece.
Il plug-in Yoast's Glue utilizza queste azioni e filtri speciali, ovvero è in grado di generare dati SEO e CSS personalizzati su pagine AMP senza interrompere la convalida.
Se si utilizzano plug-in basati su shortcode, è necessario assicurarsi che il codice che emettono sia:
Per verificarlo, vai a un post che conosci usa lo shortcode (i) in questione e usa il plug-in AMP Validator in Chrome / Chromium per vedere se il post supera la convalida.
Qualcos'altro da tenere a mente quando si utilizzano plug-in su un sito AMP è che non è consentito alcun JavaScript personalizzato, quindi i plugin che dipendono da JavaScript non funzioneranno affatto. Ad esempio, se stai utilizzando un plug-in per attivare un dispositivo di scorrimento di immagini con JavaScript, non funzionerà.
Se utilizzi analisi che dipendono da uno snippet di JavaScript, l'esclusione di JS personalizzato da parte di AMP significa che dovrai sostituire lo snippet con amp-analytics elemento sulle tue pagine AMP.
Ciò significa che sei limitato ai servizi di analisi che Google ha scelto di supportare in AMP, ma la buona notizia è che ci sono diversi fornitori nell'elenco.
Puoi utilizzare un plug-in per generare codice di analisi AMP amichevole oppure puoi aggiungere manualmente il codice di monitoraggio.
Per l'inclusione tramite un plug-in, il plug-in Colla di Yoast ha una sezione in cui è possibile aggiungere il codice di Google Analytics e convertirà il codice in formato AMP adatto per te. Per trovarlo vai al AMP sezione in SEO menu per il plugin di Yoast, quindi per analitica tab:
Se non riesci a trovare un plug-in per integrare il servizio di analisi che desideri utilizzare, dovrai codificarlo in modo autonomo. Il plug-in AMP Automattic offre un filtro che puoi utilizzare per fare ciò.
Il codice personalizzato per integrare la tua analisi personale deve essere aggiunto al file "functions.php" di un tema personalizzato o di un tema figlio o a un plug-in personalizzato che crei tu stesso.
Ci sono alcuni modi in cui puoi dare alle tue pagine AMP un po 'del tuo stile e del tuo marchio.
Il plug-in AMP Automattic ha una pagina integrata nel customizer con tre impostazioni di aspetto che è possibile modificare. Per accedervi vai su Aspetto> AMP nel menu di amministrazione:
Una volta nell'area di personalizzazione non vedrai le opzioni di progettazione AMP finché non fai clic Design nella colonna di sinistra. Da qui potrai selezionare il colore dell'intestazione, lo sfondo dell'intestazione e il colore del link e puoi scegliere tra uno schema di colori chiari o scuri.
Le opzioni del customizer incorporato sono limitate, quindi se vuoi giocare con alcune impostazioni extra il plug-in Glue di Yoast ha il vantaggio in più di alcuni controlli di design, trovati andando a SEO> AMP e poi al Design linguetta.
Il plugin Yoast's Glue e i relativi controlli di progettazioneSe i personalizzatori basati su GUI disponibili non sono sufficienti, potresti voler iniziare a scavare in qualche codice in modo da poter utilizzare il tuo codice CSS o il tuo modello. Per fare questo puoi:
Se non hai già familiarità con il modo di fare uno dei precedenti la tua migliore scommessa è probabilmente quella di rimanere con le opzioni di personalizzazione dell'interfaccia grafica disponibili.
Tutti i CSS che controllano la presentazione delle pagine AMP nel plugin Automattic possono essere trovati nella sottocartella "templates" nel file "style.php". Non dovresti modificare direttamente il codice in questo file poiché perderai tutte le modifiche quando il plugin si aggiorna. Tuttavia puoi sostituire questo file con uno dei tuoi.
Se stai creando il tuo tema personalizzato o tema figlio, crea una cartella al suo interno denominata "amp" e lì aggiungi il tuo CSS in un file chiamato "style.php". Il plugin AMP troverà automaticamente questo file e lo userà.
Se stai creando il tuo plugin puoi usare qualsiasi file PHP che ti piace per contenere il tuo CSS personalizzato, quindi specificare detto file usando il amp_post_template_file filtro combinato con un controllo condizionale per 'style' === $ type.
Per i dettagli su come eseguire questa operazione, consultare la documentazione di Automattic su GitHub.
Se hai solo bisogno di aggiungere un piccolo codice personalizzato al CSS esistente del plugin, puoi usare il amp_post_template_css azione. Per ulteriori dettagli su come è fatto, oltre ad alcuni esempi, consultare la sezione pertinente nella documentazione di Automattic.
In caso di aggiunta di CSS, hai anche la possibilità di aggiungere del codice personalizzato tramite il plug-in Colla di Yoast, nell'area di testo denominata "Extra CSS" nella parte inferiore della sua Design linguetta.
Nota: Se stai aggiungendo o ignorando il CSS del plugin AMP, assicurati di non includerne nessuno