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 ja amp-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.
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 sarnane wp_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.
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');