Kuidas kasutada AMP-d WordPressiga
AMP on ühiskondlikud jõupingutused, mis lubavad a parem veebilehe laadimisvõime mobiilses keskkonnas. Kuid nagu leiate meie eelmisest õpetusest, peate oma veebisaidilt uhkeid asju ohverdama ning järgima rangelt eeskirju, järgima juhiseid ja hankima lehekülgi valideeritult. See kõlab nagu palju teha, kas pole?
Õnneks, kui olete oma veebisaidi WordPressiga üles ehitanud, saate AMP-d oma veebilehele kiiresti rakendada, kasutades selleks pluginat, mille nimi on AMP-WP. See on varustatud rohkem omadustega kui see, mis vastab silma. Niisiis, vaatame, kuidas see toimib.
Aktiveerimine
Kõigepealt külastage oma veebisaidile sisselogimist Pluginad> Lisa uus ekraanil. Otsima “AMP; installige ja aktiveerige see Automatticist.
Kui see on aktiveeritud, saate vaadata AMP-konverteeritud postitust / amp /
rada URL-i lõppu (nt. http://wp.com/post/amp/
) või ?amp = 1
(nt. http://wp.com/post/?amp=1
) kui te ei kasuta oma veebisaidi funktsiooni Pretty Permalinks.
Ja nagu näete eespool, on postitusele antud põhilised kujundused, mida saate veelgi kohandada.
Märkida
Hetkel on mõned asjad, mida peaksite teadma plugina olekust:
- Arhiiv - Kategooria, Silt ja Kohandatud taksonoomia - pole praegu toetatud. Neid ei konverteerita AMP-ühilduvasse vormingusse. Kohandatud postituste tüüpe saab siiski käivitada filtri kaudu AMP-sse.
- See ei lisa armatuurlaual uues seadistuskuval. Kohandamine toimub koodi tasemel toimingute, filtritega, klassiga.
- Plugin ei hõlma praegu kõiki AMP kohandatud elemente, näiteks
amp-analytics
jaamp-ad
Karbist välja. Kui vajate neid elemente, peate selle lisama, lisades pistikprogrammi toimingud või filtrid.
Kohandamine
Plugin pakub arvukalt toiminguid ja filtreid, mis pakuvad paindlikkust AMP-lehekülje stiilide, lehekülje sisu ja isegi HTML-märgistuse kohandamisel..
Stiilid
Olen kindel, et see on üks asi, mida soovite kohe pärast plugina aktiveerimist muuta, näiteks päise taustavärvi, fontide perekonna ja fondi suuruse muutmine, et see sobiks paremini teie veebisaidi brändi ja isiksusega.
Selleks saame kasutada amp_post_template_css
Tegevus funktsioonid.php
meie teema fail.
funktsioon theme_amp_custom_styles () ?> nav.amp-wp-title-bar taustavärv: oranž;Kui vaatame läbi Chrome DevToolsi, lisatakse need stiilid
elementi ja tühistab eelmised stiilieeskirjad. Seega kantakse päisele oranži taustavärvi.
Stiilieeskirjade kirjutamist saate jätkata nagu tavaliselt. Kuid pidage meeles mõningaid piiranguid ja hoidke stiili suurused allpool
50Kb
. Kui teil tekib kahtlus, vaadake palun meie eelmist artiklit, kuidas saada AMP-lehekülgede valideerimine.Mallid
Kui tundub, et peate muutuma palju kaugemale vaid stiilist, siis pööra väände, et uurida kogu malli sobitamist. Plugin, amp-wp, pakub mitmeid sisseehitatud malle, nimelt:
header-bar.php
meta-author.php
meta-taxonomy.php
meta-time.php
single.php
style.php
Need mallid sarnanevad tavalisele WordPressi malli hierarhiale.
Kõiki neid malle saab üle võtta, esitades sama nimega faili / amp /
kausta. Kui need failid on paigas, valib plugin need vaikefailide asemel ja võimaldab meil nende mallide väljundit täielikult muuta.
twentytwelve ├── 404.php ├── am │. meta-author.php │ ├── meta-taxonomy.php ├── ├── single.php └── └── style.php
Kogu stiili saate ümber kirjutada style.php
faili või muuta kogu AMP lehekülje struktuuri vastavalt vajadusele koos single.php
. Siiski peate muutust järgima, et järgida AMP eeskirju.
Konksude ja filtrite loend
Nagu varem mainitud, saadetakse see plugin koos mitmete toimingute ja filtritega. Selles artiklis ei ole võimalik katta. Kuid me võime minna koos töölehe, kokkuvõtte ja vajalike väljavõtetega:
Meetmed
The amp_init
; toiming on kasulik pluginate jaoks, mis toetuvad AMP-le nende plugina tööks; see käivitub, kui plugin on juba käivitatud.
funktsioon amp_customizer_support_init () required_once dirname (__FILE__). '/amp-customizer-class.php'; add_action ('amp_init', 'amp_customizer_support_init');
Sarnane wp_head
me võime kasutada amp_post_template_head
lisama täiendavaid elemente pea
sildi AMP lehekülgedel meta
, stiili
, või skript
.
funktsioon theme_amp_google_fonts () ?>
amp_post_template_footer
see tegevus on sarnanewp_footer
.funktsioon theme_amp_end_credit () ?>Filtrid
amp_content_max_width
kasutatakse AMP lehekülje maksimaalse laiuse määramiseks. Laiust kasutatakse ka sisseehitatud elementide, näiteks Youtube'i video, laiuse määramiseks.funktsioon theme_amp_content_width () return 700; add_filter ('amp_content_max_width', 'theme_amp_content_width');
amp_site_icon_url
kasutatakse ikooni - favicon ja Apple'i ikooni - URL-i määramiseks. Vaikeväärtus langeb saidi ikooniliidese kaudu üles laaditud pildile, mis võeti kasutusele versioonis 4.3.funktsioon 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
on mõeldud siis, kui teil on vaja kohandada postituse metaandmete väljundit, näiteks autori nime, kategooriat ja ajatempel. Selle filtri abil saate segada vaikekorraldust või eemaldada üks meta AMP lehelt.funktsioon theme_amp_meta ($ meta) foreach (array_keys ($ meta, 'meta-time', true) kui $ võti) unset ($ meta [$ key]); tagasi $ meta; ; add_filter ('amp_post_template_meta_parts', 'theme_amp_meta');
amp_post_template_metadata
on Schema.org-i andmestruktuuri kohandamine AMP-lehekülgedel. Järgnev näide näitab, kuidas me esitame saidi logo, mis kuvatakse AMP karussellil Google'i otsingutulemuses, ja eemaldage lehekülje muudetud ajatempel.funktsioon amp_schema_json ($ metadata) unset ($ metadata ['dateModified']); $ metaandmed ['publisher'] ['logo'] = array ('@type' => 'ImageObject', 'url' => get_template_directory_uri (). '/images/logo.png', 'kõrgus' => 60, 'laius' => 325,); tagastab $ metaandmed; add_filter ('amp_post_template_metadata', 'amp_schema_json', 30, 2);
amp_post_template_file
see on alternatiivne viis malli failide ülekirjutamiseks. See on kasulik, kui eelistate oma kohandatud AMP malli failide vastuvõtmist mõnes muus kataloogis kui/ amp /
.funktsioon theme_custom_template ($ file, $ type, $ post) if ('meta-autor' === $ tüüp) $ file = get_template_directory_uri (). '/partial/amp-meta-author.php'; tagasi faili $; add_filter ('amp_post_template_file', 'theme_custom_template', 10, 3);
amp_query_var
kasutatakse selleks, et muuta AMP lehekülje lõpp-punkti, kui URL-i Permalink on lubatud. Vaikimisi on see seadistatud/ amp /
. Arvestades järgmist, on AMP-leht nüüd saadaval lisades/ m /
URL-is (nt.www.example.com/post-slug/m/
).funktsioon custom_amp_endpoint ($ amp) return 'm'; add_filter ('amp_query_var', 'custom_amp_endpoint');