Kako uporabljati AMP z WordPressom
AMP je skupna prizadevanja, ki obljubljajo boljša zmogljivost nalaganja strani za spletna mesta v mobilnem okolju. Toda, kot lahko ugotovite iz našega predhodnega vodnika, boste morali žrtvovati modne stvari s svojega spletnega mesta in strogo upoštevati pravila, upoštevati smernice in preveriti veljavnost strani. Sliši se kot veliko dela, kajne?
Na srečo, če ste zgradili svojo spletno stran z WordPressom, lahko aplikacijo AMP uporabite na svojem spletnem mestu v trenutku z uporabo plugina z imenom AMP-WP. Dobavljeno je z več funkcijami, kot je tisto, kar ustreza. Torej, poglejmo, kako deluje.
Aktivacija
Za začetek se prijavite na svoje spletno mesto, pojdite na Vtičniki> Dodaj novo na zaslonu. Išči “AMP; namestite in aktivirajte funkcijo Automattic.
Ko je aktiviran, lahko pogledate AMP-pretvorjeno objavo z dodajanjem / amp /
sledi na koncu URL-ja objave (npr. http://wp.com/post/amp/
) ali z ?amp = 1
(npr. http://wp.com/post/?amp=1
) če na svoji spletni strani ne uporabljate funkcije Pretty Permalinks.
Kot lahko vidite zgoraj, so postu dodeljeni osnovni stylingsi, ki jih lahko dodatno prilagodite.
Zabeležiti
Trenutno je nekaj stvari, ki jih morate vedeti o stanju vtičnika:
- Arhivi - Kategorija, Oznaka in Taksonomija po meri - trenutno niso podprte. Ne bodo pretvorjene v format, skladen z AMP. Vendar pa lahko po meri po meri v AMP začnete s pomočjo filtra.
- Ne dodaja novega zaslona nastavitev na nadzorni plošči. Prilagajanje poteka na ravni kode z Dejanja, Filtri, Razred.
- Vtičnik trenutno ne zajema vseh AMP prilagojenih elementov, kot je
amp-analytics
inamp-ad
iz škatle. Če potrebujete te elemente, jih boste morali vključiti tako, da se priključite na dejanja ali filtre vtičnika.
Prilagajanje
Vtičnik ponuja številne akcije in filtre, ki omogočajo prilagodljivost glede prilagajanja slogov, vsebine strani in celo oznake HTML za celotno stran AMP..
Slogi
Prepričan sem, da je to ena stvar, ki jo želite spremeniti takoj po aktiviranju vtičnika, kot je sprememba barve ozadja glave, družine pisav in velikosti pisave, da se bolje ujema z znamko in osebnostjo vaše spletne strani..
Za to lahko uporabimo amp_post_template_css
Ukrep v functions.php
datoteko naše teme.
funkcija theme_amp_custom_styles () ?> nav.amp-wp-title-bar barva ozadja: oranžna;Če pregledamo orodja Chrome DevTools, se ti slogi dodajo v
element in preglasi prejšnja pravila za slog. Zato je v glavi uporabljena oranžna barva ozadja.
Lahko nadaljujete s pisanjem slogskih pravil, kot običajno. Vendar pa upoštevajte nekaj omejitev in ohranite velikosti slog spodaj
50Kb
. Če ste v dvomih, preberite naš prejšnji članek o tem, kako preveriti veljavnost AMP strani.Templating
Če se vam zdi, da boste morali veliko spremeniti preko stylinga, se boste lahko prepričali, da boste prilagodili celotno predlogo. Vtičnik, amp-wp, ponuja številne vgrajene predloge, in sicer:
header-bar.php
meta-author.php
meta-taxonomy.php
meta-time.php
single.php
style.php
Te predloge so zelo podobne običajni hierarhiji predlog WordPress.
Vsako od teh predlog se lahko prevzame z zagotavljanjem datoteke z istim imenom pod / amp /
v temi. Ko so te datoteke nameščene, jih bo plugin dvignil namesto privzetih datotek in nam omogočil, da v celoti spremenimo rezultate teh predlog.
twentytwelve ├── 404.php ├── amp │ met── meta-author.php │ ├── meta-taxonomy.php │ ── single.php │ ─── style.php
Celotne sloge lahko prepišete prek style.php
datoteko ali spremenite celotno strukturo strani AMP glede na vaše potrebe z single.php
. Kljub temu boste morali ohraniti spremembe v skladu s predpisi AMP.
Seznam kljuk in filtrov
Kot smo že omenili, je ta vtičnik dobavljen s številnimi dejanji in filtri. V tem članku ni mogoče obravnavati vsakega. Lahko pa gremo z varilcem, povzetkom in odrezki, ki jih potrebujete:
Ukrepi
The amp_init
; Dejanje je uporabno za vtičnike, ki se zanašajo na AMP, da lahko njihov vtičnik deluje; teče, ko je vtičnik že zagnan.
funkcija amp_customizer_support_init () zahteva_once dirname (__FILE__). '/amp-customizer-class.php'; add_action ('amp_init', 'amp_customizer_support_init');
Podoben wp_head
lahko uporabimo amp_post_template_head
vključiti dodatne elemente v. \ t glavo
na straneh AMP meta
, slog
, ali skript
.
funkcija theme_amp_google_fonts () ?>
amp_post_template_footer
ta akcija je podobnawp_footer
.funkcija theme_amp_end_credit () ?>Filtri
amp_content_max_width
se uporablja za nastavitev največje širine strani AMP. Širina bo uporabljena tudi za nastavitev širine vdelanih elementov, kot je videoposnetek Youtube.funkcija theme_amp_content_width () vrne 700; add_filter ('amp_content_max_width', 'theme_amp_content_width');
amp_site_icon_url
se uporablja za nastavitev ikone - ikona favikona in ikone Apple - URL. Privzeto pade na sliko, naloženo prek vmesnika Site Icon, ki je bila predstavljena v različici 4.3.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
je za to, kdaj morate prilagoditi izhodne podatke meta podatkov objave, kot so ime avtorja, kategorija in časovni žig. S tem filtrom lahko premešate privzeti vrstni red ali odstranite eno od meta iz strani AMP.funkcija theme_amp_meta ($ meta) foreach (array_keys ($ meta, 'meta-čas', true) kot $ key) unset ($ meta [$ key]); vrne $ meta; ; add_filter ('amp_post_template_meta_parts', 'theme_amp_meta');
amp_post_template_metadata
je za prilagajanje podatkovne strukture Schema.org na straneh AMP. V naslednjem primeru je prikazan logotip spletnega mesta, ki bo v Googlovem rezultatu iskanja prikazan v vrtiljaku AMP, in odstranite spremenjeni časovni žig strani..funkcija amp_schema_json ($ metapodatki) unset ($ metadata ['dateModified']); $ metadata ['publisher'] ['logo'] = array ('@type' => 'ImageObject', 'url' => get_template_directory_uri (). '/images/logo.png', 'height' => 60, 'width' => 325,); vrne $ metapodatke; add_filter ('amp_post_template_metadata', 'amp_schema_json', 30, 2);
amp_post_template_file
to je alternativni način za preglasitev datotek s predlogami. Uporabno je, če želite, da gostite svoje predloge AMP po meri v drugem imeniku, kot je/ amp /
.funkcija theme_custom_template ($ file, $ type, $ post) if ('meta-author' === $ type) $ file = get_template_directory_uri (). '/partial/amp-meta-author.php'; vrne $ file; add_filter ('amp_post_template_file', 'theme_custom_template', 10, 3);
amp_query_var
se uporablja za spremembo končne točke strani AMP, ko je omogočena Permalink URL. Privzeto je nastavljeno na/ amp /
. Glede na naslednje, je stran AMP zdaj dostopna z dodajanjem/ m /
na URL-ju (npr.www.example.com/post-slug/m/
).funkcija custom_amp_endpoint ($ amp) return 'm'; add_filter ('amp_query_var', 'custom_amp_endpoint');