Cum se configurează suportul AMP pentru WordPress

În acest tutorial vom trece prin insultele și generațiile de generare a versiunilor valide AMP ale postărilor site-ului dvs. WordPress. Vom face acest lucru folosind pluginul AMP creat de Automattic.

Există pluginuri alternative pe care le puteți utiliza în schimb, dacă alegeți, dar deoarece avem doar într-adevăr spațiu să privim la un singur plugin în acest tutorial, vom păstra accentul pe cel creat de echipa din spatele WordPress.

Notă: acest articol presupune că sunteți deja familiarizat cu modul de creare a paginilor valide AMP și, ca atare, se va concentra pe detaliile specifice pentru utilizarea WordPress și AMP împreună. Dacă sunteți nou la AMP, verificați:

AMP în 60 de secunde
Sus și a alerga cu AMP
Cum să faci o pagină AMP de bază de la zero
Proiectul AMP: va face site-urile dvs. mai rapide
Cum să utilizați amp-img și amp-video pentru a accelera site-ul dvs.

De asemenea, presupune că sunteți familiarizat cu rularea unui site WordPress găzduit de sine. Dacă nu, puteți găsi aceste resurse utile:

Cum să începeți cu WordPress
Ghidul începătorului pentru WordPress

Pluginul AMP al lui Automattic

Acest plugin, numit pur și simplu AMP, automatizează generarea posturilor unice valide AMP. Pentru fiecare post pe care îl creați, oa doua versiune va fi de asemenea disponibilă cu / Amp / anexat la permalink. Dacă nu utilizați funcția de rescriere a textului WordPress pe site-ul dvs. /? Amp = 1 vor fi adăugate în schimb la adresa URL.

De exemplu, acesta este un post regulat WordPress:

Rețineți că aici am instalat extensia AMP Validator în Chrome, care detectează că există o versiune AMP a acestei pagini și care afișează o mică pictogramă de legătură albastră:

AMP Validator extensie

Dacă fac clic pe pictograma link-ului albastru al extensiei, ne duce la versiunea AMP a postării:

Folosirea acestui plugin în starea lui implicită este destul de mult "plug and play". Instalați, activați și sunteți în funcțiune. Nu există opțiuni de configurare care să necesite atenția dvs. ca parte a configurației.

În prezent, acest plugin funcționează numai pe postări individuale - nu afectează pagini, tipuri personalizate de posturi sau arhive. Pagina de plugin-uri de la depozitul WordPress care conține suport pentru acestea este în curs de dezvoltare.

Plugin AMP
AMP plugin README

Utilizați cu SEO Yoast prin lipici

Dacă vă place să utilizați pluginul Yoast SEO pentru postările obișnuite, există un plugin suplimentar numit "Adeziv pentru Yoast SEO & amp; AMP" disponibil pentru a genera metadate în stil Yoast în posturile dvs. AMP, de asemenea. De exemplu, a adăugat aceste metaetichete la postul demo prezentat mai devreme:

Pentru a utiliza acest plugin, va trebui mai întâi să aveți instalat principalul plugin Yoast SEO. Pluginul Adăugați apoi o secțiune suplimentară etichetă AMP la plugin-ul principal SEO admin meniu.

Adeziv pentru plug-in-ul Yoast
Cea mai mare parte pe AMP și WordPress Partea I
Cea mai mare parte pe AMP și WordPress Partea a II-a

Media și elemente AMP personalizate

Una dintre cele mai importante părți ale creării paginilor valide AMP utilizează elementele personalizate necesare pentru plasarea media, cum ar fi amp-img in loc de img de exemplu. Cu toate acestea, atunci când creați mesaje în WordPress, de obicei lucrați în editorul WYSIWYG TinyMCE și nu controlați direct marcajul utilizat pentru inserarea suportului media.

Cu pluginul Automattic AMP instalat, nu trebuie să vă faceți griji în legătură cu acest lucru, deoarece acesta va filtra în mod automat conținutul dvs. și va efectua următoarele conversii la elemente personalizate AMP:

img → amp-img sau amp-anim
video → amp video
audio = → amp-audio
iframe → amp-iframe
YouTube oEmbed → amp-youtube
Instagram eEmbed → amp-instagram
Twitter oEmbed → amp-twitter
Viță de vie → amp-de-vie

Notă: dacă utilizați Flash oriunde pe site-ul dvs., acesta nu este acceptat. Orice alt tip de suport media poate fi folosit în posturile AMP atâta timp cât este adăugat folosind unul dintre elementele din lista de mai sus.

Despre WordPress oEmbeds

Coduri scurte și pluginuri

O altă analiză atunci când utilizați pluginul Automattic AMP pe posturile dvs. WordPress este modul în care se vor comporta codurile scurte și pluginurile.

Antet și subsol de ieșire

Pluginul lui Automattic împiedică posturile AMP să utilizeze normal wp_header () și wp_footer () funcții de temă care sunt adesea accesate de pluginuri pentru a genera JavaScript, CSS și HTML personalizate. Dacă un plugin pe care îl utilizați depinde de oricare dintre aceste funcții, acesta nu va funcționa.

Pentru ca un plugin să genereze cod personalizat în combinație cu pluginul AMP, acesta trebuie să utilizeze acțiuni speciale și filtre care înlocuiesc funcționalitatea obișnuită a temei WP. De exemplu, nu puteți adăuga meta taguri la astfel cum ați procedat de obicei, utilizând wp_head acțiune pentru a ieși codul prin wp_header () funcția, dar puteți utiliza amp_post_template_metadata filtre în loc.

Pluginul pentru lipici de la Yoast utilizează aceste acțiuni speciale și filtre, care este modul în care este capabil să emită date SEO și CSS personalizate pe paginile AMP fără a rupe validarea.

Scurtăturile

Dacă utilizați pluginuri care se bazează pe coduri scurte, va trebui să vă asigurați că codul pe care îl emit este:

AMP valabil, de ex. nu JS sau CSS inline
și / sau
Marcați din lista din secțiunea anterioară că pluginul AMP se convertește automat la elementele personalizate necesare.

Pentru a verifica acest lucru, mergeți la o postare despre care știți că utilizează codurile scurte în cauză și utilizați pluginul AMP Validator în Chrome / Chromium pentru a vedea dacă postarea trece validarea.

JavaScript particularizat

Alt lucru pe care trebuie să-l aveți în vedere atunci când utilizați pluginuri pe un site AMP'ed este că nu este permis JavaScript particularizat, astfel încât pluginurile care depind de JavaScript nu vor funcționa deloc. De exemplu, dacă utilizați un plugin pentru a conduce un cursor de imagine alimentat cu JavaScript, acesta nu va funcționa.

Google Analytics

Dacă utilizați analize care depind de un fragment JavaScript, excluderea de către AMP a JS personalizat înseamnă că va trebui să înlocuiți fragmentul cu amp-analiză element pe paginile dvs. AMP.

Aceasta înseamnă că sunteți limitat la serviciile de analiză pe care Google le-a ales să le susțină în AMP, însă vestea bună este că există mai mulți vânzători pe listă.

Puteți utiliza fie un plugin pentru a genera un cod de analiză prietenos AMP, fie puteți adăuga manual codul de urmărire.

Pentru includerea printr-un plugin, pluginul Yoast's Glue are o secțiune în care puteți adăuga codul Google Analytics și va converti codul în format prietenos AMP pentru dvs. Pentru a găsi aceasta mergeți la AMP secțiune în SEO meniu pentru plugin-ul Yoast, apoi la Google Analytics fila:

Dacă nu puteți găsi un plugin pentru a integra serviciul de analiză pe care doriți să-l utilizați, va trebui să-l codificați cu greu. Pluginul Automattic AMP oferă un filtru pe care îl puteți utiliza pentru a face acest lucru.

Codul personalizat pentru integrarea analizei proprii ar trebui adăugat la fișierul "functions.php" al temei personalizate sau temei copil sau la un plugin personalizat pe care îl creați.

Personalizarea aspectului

Există câteva moduri diferite în care puteți oferi paginilor dvs. AMP un pic de stil propriu și de branding.

Built-in personalizat

Pluginul Automattic AMP are o pagină încorporată în personalizatorul cu trei setări de aspect pe care le puteți schimba. Pentru al accesa, mergeți la Aspect> AMP în meniul de administrare:

Odată ajuns în zona de personalizare, nu veți vedea opțiunile de proiectare AMP până când nu faceți clic Proiecta în coloana din stânga. De aici veți putea selecta culoarea antetului, fundalul antetului și culoarea linkului și puteți alege între o schemă de culori ușoare sau întunecate.

Glue Customizer

Opțiunile personalizate ale personalizării sunt limitate, așadar, dacă doriți să jucați cu unele setări suplimentare, pluginul Yoast's Glue are bonusul adăugat al unor controale de proiectare, găsite prin accesarea SEO> AMP și apoi la Proiecta fila.

Plug-ul pentru lipici al lui Yoast și comenzile sale de proiectare

Modificări ale codului

Dacă personalizatorii disponibili bazați pe GUI nu sunt suficienți, vă recomandăm să începeți săpelați într-un anumit cod, astfel încât să puteți utiliza propriile marcaje CSS sau șabloane. Pentru a face acest lucru puteți:

Creați o temă personalizată, (sau temă copil) și adăugați codul în fișierul "functions.php"
Creați un plugin personalizat

Dacă nu sunteți deja familiarizat cu modul de a face unul dintre cele de mai sus, cel mai bun pariu este probabil să rămânem cu opțiunile de personalizare GUI disponibile.

Înlocuiți fișierul "style.php" al pluginului AMP

Toate CSS-urile care controlează prezentarea paginilor AMP în pluginul Automattic pot fi găsite în subdosarul "templates" din fișierul "style.php". Nu trebuie să editați direct codul în acest fișier, deoarece veți pierde toate modificările când plugin-ul se actualizează. Cu toate acestea, aveți posibilitatea să înlocuiți acest fișier cu unul dintre dvs..

Dacă creați propria temă personalizată sau subiectul copilului, creați un dosar în interiorul acestuia numit "amp" și acolo adăugați CSS într-un fișier numit "style.php". Pluginul AMP va găsi automat acest fișier și îl va folosi.

Dacă creați propriul plugin, puteți utiliza orice fișier PHP pe care doriți să îl păstrați pe CSS personalizat, apoi specificați fișierul respectiv utilizând amp_post_template_file filtru combinat cu o verificare condiționată pentru 'style' === $ tip.

Pentru detalii despre cum se procedează, consultați documentația Automattic pe GitHub.

Adăugați CSS

Dacă aveți nevoie doar să adăugați un cod personalizat la plugin-ul CSS existent puteți utiliza amp_post_template_css acțiune. Pentru mai multe detalii despre cum se face acest lucru, plus câteva exemple, consultați secțiunea relevantă din documentația Automattic.

În cazul adăugării CSS, aveți și opțiunea de a adăuga un anumit cod personalizat prin pluginul Yoast's Adhesion, în zona de text numită "Extra CSS" în partea de jos a acestuia Proiecta fila.

Notă: Indiferent dacă vă alăturați sau suprascrieți CSS plugin-ului AMP, asigurați-vă că nu includeți niciunul