Kutsu mukautettua widgettiä HTML:stä

Miten kutsut mukautettua widgetiä HTML:stä

Ajattele kolmea tasoa. Yhteysskripti latautuu. GSpeech koko sivustolle. Cloud Consolen widget on soittimen määritelmä (ääni, Chrome, valitsimet, URL-säännöt). HTML-koodisi liitoskohta on tyhjä solmu, jossa soitin voi näkyä.

• 1. Yhteysskripti — kerran sivustoa kohden (Integraatiot → Html-verkkosivusto), yleensä ennen </body>.
• 2. Julkaistu widget — Täysi / Painike / Ympyrä, jonka luot tai mukautat konsolissa.
• 3. Asenna HTML-muodossa - esimerkiksi <div class="my_listen_btn"></div>Renderöintielementin on oltava .my_listen_btn.
• Sisällön valitsin — CSS-kohde sivutekstille selostusta varten (tai jätä tyhjäksi ja käytä Content Text -kohtaa itsenäiselle äänelle).

Nyrkkisääntö: HTML ei koskaan "tuo" widgetiä nimen perusteella. Yhteensopiva Render Elementin ja mount-luokan kanssa. is Soitto.

Kuinka kirjoittaa id, class ja pilkut (ei tarvita koodaustutkintoa)

Sisällönvalitsin, Renderöintielementti ja Poissulkemisluettelo käyttävät samaa yksinkertaista kieltä. Tarvitset vain kaksi etuliitettä – ja sitten voit kokoa puhuttu sisältö osiin ja kaivertaa roskaa ja sulje pois.

• tunnus → # — HTML-muodossa id="article" → sisään GSpeech kirjoittaa #article (hajautusarvo + tarkka tunniste).
• luokka → . — HTML-muodossa class="post-content" → kirjoita .post-content (piste + tarkka luokka). Jos elementillä on useita luokkia, yksi vastaava luokka riittää.
• Vain tunniste — pelkät tagien nimet toimivat myös: article, section, h1 (ei # or .).
• Sisällönvalitsin + pilkut — kerää sisältö palasina yhteen kenttään: #intro,.chapter-body,#summaryOsumat luetaan järjestyksessä – täydellinen ratkaisu, kun sivu on jaettu useisiin kääreisiin.
• Poissulkemisluettelo + pilkut — poista kohina kyseisestä valinnasta samalla syntaksilla: #comments,.ads,.share-buttonsPoikkeukset koskevat Content Selectorin keräämiä tietoja.
• Arvojen löytäminen — live-sivulla: napsauta lohkoa hiiren kakkospainikkeella → Tarkasta. Etsi id="…" or class="…", kirjoita ne sitten # or . konsolissa. Syvä poissulkemisen läpikäynti: Poissuljettava luettelo ja puheen puute.

Kolme oletuskiinnitystä vs. oma mukautettu widget

Dokumenteissa usein näytetään kolme kätevää asennusluokkaa, koska ne toimitetaan valmiina pilvioletusarvoilla. Mukautettu widget ei ole eri tuote – se on sama Täysi / Painike / Ympyrä -tyyppi, jolla on omaa Renderöintielementti (ja yleensä sisällönvalitsin).

• Oletusarvoinen täysi — kiinnitys <div class="gsp_full_player"></div> → Renderöintielementti .gsp_full_player.
• Oletuspainike - .gsp_button_player kiinnitys + vastaava renderöintielementti.
• Oletusympyrä - .gsp_circle_player kiinnitys + vastaava renderöintielementti.
• Mukautettu puhelusi — mikä tahansa omistamasi luokka tai tunnus (esim. #promo-listen or .footer_tts) → aseta juuri tuo valitsin julkaisemasi widgetin renderöintielementiksi.

WordPressin lyhytkoodit ([gspeech] / button / circle) ovat eri sijoittelupolku viesteille. Raa'assa HTML:ssä ei ole lyhytkoodia — vain mount + Render Element -pari. Katso oletuslyhytkoodit vain WP:lle.

Kokonaisvaltainen: mukautetun widgetin määrittäminen ja kutsuminen

1. Luo / avaa oma verkkosivusto vuonna Cloud Console ja vahvista globaalit oletusarvot kohdassa Asetukset (ääni, kieli) — katso Globaali vs. mukautettu.
2. Kopioi Html-verkkosivusto yhteysskripti Integrationsista ja liitä se kerran jaettuun malliisi ennen </body>Ota käyttöön niin, että jokainen ääntä tarvitseva sivu lataa skriptin.
3. Luo Täysi / Painike / Ympyrä widget (tai avaa olemassa oleva mukautettu). Anna sille selkeä nimi, jotta tunnistat sen myöhemmin.
4. Lisää sivun HTML-koodiin tyhjä kiinnitys missä pelaajan tulisi näkyä — valitse ainutlaatuinen luokka, jota et käytä uudelleen muuhun käyttöliittymään. Esimerkki: <div class="my_custom_player"></div>.
5. Aseta widgetissä Renderöintielementti juuri tuohon valitsimeen: .my_custom_player (luokan etupiste; #id tunnukselle).
6. Asettaa Sisällön valitsin mitä vierailijoiden tulisi kuulla. Yksi kääre riittää (#main or .product-description). Tai yhdistä osat pilkuilla: #intro,.body-copy,#summary. Käyttää parent_class / self_class kun teline on kyseisen sisältölohkon sisällä.
7. Valinnainen: Poissulje luettelo (myös pilkulla erotettuna, sama # / . säännöt) navigointiin / mainoksiin / kommentteihin — esim. #comments,.ads,.share-buttonsValinnainen: Sallitut / Estetyt URL-osoitteet, jotta tämä widget toimii vain haluamissasi paikoissa.
8. Aseta tilaksi Julkaistu, Säästä, lataa HTML-sivu uudelleen ja varmista, että pelaaja täyttää mounttisi ja lukee oikean tekstin.

Tarvitsetko ääntä Nro ympäröivä sivuteksti (demo-/kioskityyli)? Jätä sisällönvalitsin tyhjäksi ja täytä se Sisältöteksti sen sijaan — täydellinen läpikäynti: Erillinen soitin, jossa on sisältöteksti.

Minimalistinen HTML-sivu, joka kutsuu widgetiäsi

Alla on toimivan sivun muoto. Korvaa yhteysskripti omalla Integrations-osiosta löytyvällä skriptilläsi. Liitosluokan on vastattava julkaistun widgetin Render Elementtiä; sisällönvalitsimen tulisi kohdistua #article tässä esimerkissä.

• Liitä HTML-muodossa - <div class="my_custom_player"></div> (tyhjä).
• Widget-renderöintielementti - .my_custom_player.
• Widgetin sisällönvalitsin - #article.
• Yhteysskripti — verkkosivustosi yhden rivin HTML-upotus ennen </body>.

Luuranko (kommentit näyttävät kartoituksen):

<!-- spoken content -->
<article id="article">…your text…</article>
<!-- player mount (Render Element = .my_custom_player) -->
<div class="my_custom_player"></div>
<!-- GSpeech connection script from Integrations -->

Voit sijoittaa kiinnityskohdan artikkelin yläpuolelle, sivupalkkiin tai alatunnisteeseen — sisällönvalitsin osoittaa edelleen kohtaan #article, joten Chrome-asettelua ei lueta ääneen. Tämä asettelukuvio on käsitelty myös kohdassa Aseta mukautettu widget.

Jos mukautettu widget ei tule näkyviin

1. Yhteysskripti ladattu kyseiseen URL-osoitteeseen (Näytä lähdekoodi / Verkko).
2. Widgetin tila on Julkaistu (ei luonnos / poistettu käytöstä).
3. Sivulla on liitoskohta ja luokan/tunnuksen kirjoitusasu täsmää Renderöintielementti täsmälleen (mukaan lukien johtava . or #).
4. Sisällön valitsin löytää oikeaa tekstiä (tai sisältöteksti täytetään, jos kyseessä on erillinen teksti).
5. Sallitut/estetyt URL-osoitteet eivät sulje pois tätä polkua.
6. Lataa uudelleen tallennuksen jälkeen — HTML/CDN-välimuisti voi säilyttää vanhan komentotulkin lyhyen aikaa.

Täydellinen vianmäärityspolku: Pelaaja ei näy.