Kaip naudoti AMP su WordPress
AMP yra bendruomeninės pastangos, kurios žada a geresnis tinklalapių našumas mobiliojo ryšio aplinkoje. Tačiau, kaip galite rasti iš ankstesnės pamokos, turėsite paaukoti iš jūsų svetainės išgalvotas prekes ir griežtai laikytis taisyklių, laikytis gairių ir gauti patvirtintų puslapių. Tai skamba kaip daug ką padaryti, ar ne?
Laimei, jei sukūrėte savo svetainę naudodamiesi „WordPress“, galite naudoti AMP į savo svetainę naudodami papildinį, pavadintą „AMP-WP“. Ji yra pristatoma su daugiau funkcijų, nei atitinka akis. Taigi, pažiūrėkime, kaip tai veikia.
Aktyvinimas
Norėdami pradėti, prisijunkite prie savo svetainės, eikite į Įskiepiai> Pridėti naują ekranas. Ieškoti “AMP; įdiegti ir aktyvuoti iš „Automattic“.
Įjungus, galite peržiūrėti AMP konvertuotą įrašą pridėdami / amp /
tako posto URL pabaigoje (pvz.,. http://wp.com/post/amp/
) arba ?amp = 1
(pvz.,. http://wp.com/post/?amp=1
) jei nenaudojate „Pretty Permalinks“ funkcijos jūsų svetainėje.
Ir kaip matote aukščiau, paštu buvo suteikti pagrindiniai stiliai, kuriuos galite toliau pritaikyti.
Užsirašyti
Šiuo metu turite keletą dalykų, kuriuos turėtumėte žinoti apie papildinio būklę:
- Archyvai - Kategorija, Žyma ir Individuali taksonomija - šiuo metu nepalaikomi. Jie nebus konvertuojami į AMP reikalavimus atitinkantį formatą. Tačiau „Custom Post“ tipai gali būti inicijuoti AMP per filtrą.
- Jis neįtraukiamas į naują nustatymo ekraną prietaisų skydelyje. Pritaikymas atliekamas pagal kodo lygį su veiksmais, filtrais, klase.
- Įskiepis šiuo metu neapima visų AMP pritaikytų elementų, tokių kaip
amp-analitika
irpapildomas skelbimas
iš dėžutės. Jei jums reikia šių elementų, turėsite jį įtraukti įkišdami į „Plugin“ veiksmus arba filtrus.
Tinkinimas
Įskiepis suteikia daug veiksmų ir filtrų, kurie suteikia lankstumo pritaikant stilius, puslapio turinį ir netgi HTML žymėjimą visame AMP puslapyje..
Stiliai
Aš tikiu, kad tai yra vienas dalykas, kurį norite iš karto keisti po įjungimo, pvz., Pakeitus antraštės fono spalvą, šriftų šeimą ir šrifto dydį, kad jis geriau atitiktų jūsų svetainės prekės ženklą ir asmenybę.
Tam mes galime panaudoti amp_post_template_css
Veiksmas funkcijos.php
mūsų temos failas.
funkcija theme_amp_custom_styles () ?> nav.amp-wp-title-bar fono spalva: oranžinė;Jei peržiūrime „Chrome DevTools“, šie stiliai pridedami prie „
elementą ir nepaiso ankstesnių stiliaus taisyklių. Taigi, oranžinė fono spalva dabar taikoma antraštei.
Galite tęsti stiliaus taisyklių rašymą, kaip paprastai. Tačiau atminkite keletą apribojimų ir išlaikykite stiliaus dydžius žemiau
50Kb
. Jei kada nors abejojate, žr. Ankstesnį straipsnį apie tai, kaip patvirtinti AMP puslapius.Šablonai
Jei, atrodo, turėsite keisti daug daugiau nei tik stilius, jūs supjaustysite, kad norėtumėte ištirti visą šabloną. Įskiepis, amp-wp, turi keletą įmontuotų šablonų, būtent:
header-bar.php
meta-author.php
meta-taxonomy.php
meta-time.php
single.php
style.php
Šie šablonai yra panašūs į įprastą WordPress šablono hierarchiją.
Kiekvienas iš šių šablonų gali būti perimtas pateikiant to paties pavadinimo failą / amp /
aplanke. Kai šie failai bus įdiegti, įskiepiai juos rinks vietoj numatytųjų failų ir leis mums visiškai pakeisti šių šablonų išvestį.
twentytwelve ├── 404.php ├── │ ├── meta-author.php a ├── meta-taxonomy.php. ├── single.php └── p style.php
Visą stilių galite perrašyti per style.php
failą, arba pakeisti visą AMP puslapio struktūrą pagal savo poreikius su single.php
. Vis dėlto turėsite išlaikyti pakeitimus, kad būtų laikomasi AMP taisyklių.
Kabliukų ir filtrų sąrašas
Kaip minėta anksčiau, šis įskiepis yra pristatytas su daugybe veiksmų ir filtrų. Šiame straipsnyje neįmanoma padengti kiekvieno. Bet mes galime eiti su cheatsheet, santrauka, taip pat jums reikalingais fragmentais:
Veiksmai
The amp_init
; veiksmas yra naudingas įskiepiams, kurie naudoja „AMP“, kad gal ÷ tų dirbti; jis veikia, kai jau įjungtas įskiepis.
funkcija amp_customizer_support_init () required_once dirname (__FILE__). '/amp-customizer-class.php'; add_action ('amp_init', 'amp_customizer_support_init');
Panašus į wp_head
mes galime naudoti amp_post_template_head
įtraukti papildomus elementus galva
žymės AMP puslapiuose meta
, stilius
, arba scenarijus
.
funkcija theme_amp_google_fonts () ?>
amp_post_template_footer
šis veiksmas yra panašus įwp_footer
.funkcija theme_amp_end_credit () ?>Filtrai
amp_content_max_width
nustatomas maksimalus AMP puslapio plotis. Plotis taip pat bus naudojamas nustatyti įterptųjų elementų, pvz., „YouTube“ vaizdo įrašo, plotį.funkcija theme_amp_content_width () return 700; add_filter ('amp_content_max_width', 'theme_amp_content_width');
amp_site_icon_url
naudojamas nustatyti piktogramą - „favicon“ ir „Apple“ piktogramą - URL. Numatytoji reikšmė priskiriama vaizdui, įkeltam per Svetainės piktogramos sąsają, kuri buvo įdiegta 4.3 versijoje.funkcija theme_amp_site_icon_url () return get_template_directory_uri (). '/images/site-icon.png'; add_filter ('amp_site_icon_url', 'theme_amp_site_icon_url');
amp_post_template_meta_parts
yra skirtas, kai reikia pritaikyti skelbimo metaduomenų išvestį, pvz., autoriaus vardą, kategoriją ir laiko žyma. Per šį filtrą galite maišyti numatytąjį užsakymą arba pašalinti vieną iš meta iš AMP puslapio.funkcija theme_amp_meta ($ meta) foreach (array_keys ($ meta, „meta-time“, tiesa) kaip $ raktas) unset ($ meta [$ key]); grąžinti $ meta; ; add_filter ('amp_post_template_meta_parts', 'theme_amp_meta');
amp_post_template_metadata
skirta pritaikyti „Schema.org“ duomenų struktūrą AMP puslapiuose. Toliau pateiktame pavyzdyje parodyta, kaip mes pateikiame svetainės logotipą, kuris bus rodomas AMP karuselėje „Google“ paieškos rezultate, ir pašalins puslapio modifikuotą laiko žymę.funkcija amp_schema_json ($ metadata) unset ($ metadata ['dateModified']); $ metaduomenys ['publisher'] ['logo'] = array ('@type' => 'ImageObject', 'url' => get_template_directory_uri (). '/images/logo.png', 'height' => 60, „plotis“ => 325,); grąžinti $ metaduomenis; add_filter ('amp_post_template_metadata', 'amp_schema_json', 30, 2);
amp_post_template_file
tai yra alternatyvus būdas ignoruoti šablonų failus. Tai naudinga, jei pageidaujate, kad galėtumėte talpinti savo priskirtus AMP šablonų failus kitame kataloge/ amp /
.funkcija theme_custom_template ($ file, $ type, $ post) if ('meta-author' === $ type) $ file = get_template_directory_uri (). „/partial/amp-meta-author.php“; grąžinti $ failą; add_filter ('amp_post_template_file', 'theme_custom_template', 10, 3);
amp_query_var
naudojamas norint pakeisti AMP puslapio pabaigos tašką, kai yra įgalintas URL leidimas. Pagal numatytuosius nustatymus jis yra/ amp /
. Atsižvelgiant į tai, AMP puslapis dabar pasiekiamas pridedant/ m /
URL (pvz.,.www.example.com/post-slug/m/
).funkcija custom_amp_endpoint ($ amp) return 'm'; add_filter ('amp_query_var', 'custom_amp_endpoint');