Zaawansowana personalizacja AMP w WordPress

Przy­spie­szone strony mobil­ne­

AMP jest otwar­to­źró­dłową tech­no­lo­gią zapro­jek­to­waną z myślą o szyb­kim dostar­cza­niu tre­ści dla urzą­dzeń mobil­nych. Z tech­nicz­nego punktu widze­nia, AMP to uprosz­czony HTML, kilka skryp­tów JS oraz zauto­ma­ty­zo­wany i roz­pro­szony cache przy­spie­sza­jący łado­wa­nie stron z dowol­nego miej­sca na ziemi (AMP CDN).

Wdro­że­nie AMP dla ist­nie­ją­cego ser­wisu www w prak­tyce ozna­cza wyge­ne­ro­wa­nie stron zawie­ra­ją­cych tre­ści iden­tyczne z ory­gi­na­łem, ale speł­nia­ją­cych wyma­ga­nia stan­dardu AMP oraz ich połą­cze­nie za pomocą lin­ków amphtml dla stron pod­sta­wo­wych i odpo­wied­nio cano­ni­cal dla stron AMP.

Pra­wi­dłowo wyge­ne­ro­wana strona AMP posia­da­jąca kopię na ser­we­rach AMP CDN na urzą­dze­niach mobil­nych ładuje się nie­malże natych­mia­stowo, nawet przy wyko­rzy­sta­niu wol­niej­szych połą­czeń sie­cio­wych. Ponadto, strona posia­da­jąca swój odpo­wied­nik AMP zosta­nie ozna­czona ikoną tej tech­no­lo­gii (bły­ska­wica w okręgu) w wyni­kach wyszu­ki­wa­nia Google. W prak­tyce wyko­rzy­sta­nie AMP pozwala na wyświe­tla­nie ory­gi­nal­nych stron inter­ne­to­wych na urzą­dze­niach sta­cjo­nar­nych z dostę­pem do szyb­kiego inter­netu oraz ich uprosz­czonych wer­sji w for­ma­cie AMP na smart­fo­nach.

Jeżeli choć raz prze­rwa­łeś łado­wa­nie strony na swoim tele­fo­nie po kilku sekun­dach cze­ka­nia, to korzy­ści pły­nące z wyko­rzy­sta­nia AMP po prze­czy­ta­niu powyż­szych para­gra­fów powinny być dla Cie­bie wyraźne.

Jak uru­cho­mić AMP w WordPress?

W przy­padku CMS WordPress strony AMP możemy wygene­ro­wać auto­ma­tycz­nie dzięki insta­la­cji ofi­cjal­nej wtyczki AMP for WordPress. Nie­stety, to roz­sze­rze­nie pozwala jedy­nie na stwo­rze­nie pro­stych stron AMP dla wpi­sów, nie dając użyt­kow­ni­kowi prak­tycz­nie żad­nej kon­troli nad pro­cesem konwer­sji tre­ści i jej wyglą­dem. Tekst wpisu zosta­nie umiesz­czony w sza­blonie domyśl­nym z jed­nym zesta­wem fon­tów i stałą kon­fi­gu­ra­cją. Oczy­wi­ście możemy napi­sać swój wła­sny sza­blon AMP lub zako­do­wać indy­wi­du­alne roz­wią­za­nie (tzn. napi­sać wła­sną wtyczkę), ale moim zda­niem w bar­dzo wielu przy­pad­kach będzie to próba wywa­że­nia otwar­tych drzwi.

Na szczę­ście, dzięki olbrzy­miej popu­lar­no­ści CMS WordPress, mamy dostęp do róż­no­rod­nych wty­czek, umoż­li­wiających gene­ro­wa­nie stron w stan­dar­dzie AMP — zarówno dar­mo­wych, jak i w modelu pre­mium. Wśród roz­wią­zań dar­mo­wych z moż­li­wo­ścią doku­pie­nia opcjo­nal­nych funk­cjo­nal­no­ści (np. inte­gra­cji z popu­lar­nym Con­tact Form 7 lub AMP dla WooCom­merce) bar­dzo atrak­cyj­nie pre­zen­tuje się roz­sze­rze­nie AMP for WP (uwaga, ofi­cjalna wtyczka auto­rów WordPress to AMP for WordPress), autor­stwa Ahmeda Kaludi oraz Moham­meda Kaludi.

Roz­sze­rze­nie umoż­li­wia zaawan­so­waną per­so­na­li­za­cję zarówno wyglądu final­nego stron AMP, jak i ele­men­tów skła­do­wych. Co cie­kawe, wtyczka potrafi gene­ro­wać AMP nie tylko dla wpi­sów, ale rów­nież dla stron oraz innych typów tre­ści (doda­wa­nych przez kod sza­blonu lub inne wtyczki, choć jest to funk­cja pre­mium).

Funk­cjo­nal­no­ści wer­sji dar­mo­wej są impo­nu­jące. Od wer­sji 0.9.80 wtyczki możemy nie­mal dowol­nie sper­so­na­li­zo­wać wygląd stron AMP, kon­tro­lu­jąc ich kolo­ry­stykę, typo­gra­fię, menu, tre­ści powią­zane, reklamy, ana­li­tykę oraz wiele innych.

• Cztery uni­ka­towe sza­blony do wyboru (w wer­sji 0.9.80) – każdy z moż­li­wo­ścią per­so­na­li­za­cji
• Wspar­cie dla wpi­sów, stron oraz wła­snych typów tre­ści (pre­mium)
• Zaawan­so­waną obsługę WooCom­merce z uwzględ­nie­niem list pro­duk­tów oraz koszyka (pre­mium)
• Wspar­cie dla for­mu­la­rzy kon­tak­to­wych (pre­mium)
• Moż­li­wość wsta­wia­nia reklam AdSense w tre­ści
• Inte­gra­cja z Yoast SEO
• Inte­gra­cja z narzę­dziami ana­li­tycz­nymi (Google Ana­ly­tics, Face­book Pixel, Piwik, Yan­dex, Alexa oraz wiele innych)
• Gene­ro­wa­nie meta­da­nych schema.org
• Wyświe­tla­nie i obsługa komen­ta­rzy WordPress
• Gene­ro­wa­nie kanału RSS dla Face­book Instant Artic­les
• Moż­li­wość two­rze­nia auto­ma­tycz­nych prze­kie­ro­wań dla urzą­dzeń mobil­nych
• Umiesz­cza­nie wła­snego kodu w nagłówku oraz stopce
• Edy­tor CSS
• Edy­tor tłu­ma­czeń
• Zmiana kolo­ry­styki, kro­jów pisma (Google Fonts), wyglądu i para­me­trów nagłówka i stopki
• Moż­li­wość umiesz­cze­nia uni­ka­towego menu dla AMP w nagłówku lub stopce
• Wspar­cie dla wid­ge­tów w stopce
• Przy­ci­ski udo­stęp­nia­nia dla mediów spo­łecz­no­ścio­wych
• Edy­tor wizu­alny dla postów oraz stron
• Wspar­cie dla roz­sze­rzeń (Gra­vity Forms, Con­tact Form 7, Advan­ced Custom Fields Pro, Call to Action, etc.)
• Import / eks­port usta­wień

Jeżeli moż­li­wo­ści per­so­na­li­za­cji okażą się nie­wy­star­cza­jące, możemy rów­nież przy­go­to­wać swój wła­sny sza­blon oparty o spe­cjalny szkie­let apli­ka­cji przy­go­to­wany przez auto­rów wtyczki. Auto­rzy udo­stęp­niają szcze­gó­łową doku­men­ta­cję, zachę­ca­jąc tym samym do two­rze­nia wła­snych, uni­ka­to­wych sza­blonów.

Podsumowanie

Pod­sta­wowa nie­do­god­ność for­matu AMP to koniecz­ność zain­we­sto­wa­nia spo­rych nakła­dów pracy w uspój­nie­nie wize­runku stron bazo­wych oraz ich odpo­wied­ników w uprosz­czo­nej wer­sji AMP. Narzę­dzia takie jak AMP for WP zna­ko­mi­cie uła­twiają ten pro­ces, czy­niąc imple­men­ta­cję przy­spie­szo­nych stron mobil­nych znacz­nie prost­szą.

Korzy­stasz z for­matu AMP na swoim blogu? Podziel się Two­imi doświad­cze­niami z wyko­rzy­sta­nia tego stan­dardu w komen­ta­rzach poni­żej.