Návody
Umiestnite vlastný widget – prehrávač – do päty stránky, bočného panela alebo na akékoľvek miesto v rozložení
A vlastné umiestnenie widgetu umožňuje umiestniť prehrávač Full / Button / Circle kdekoľvek, kde to vaše rozloženie umožňuje – päta, bočný panel, hlavička alebo vlastný blok HTML – a zároveň si zachovať kontrolu čo je rozprávaný. Mapovanie vykonávajú dve polia: Render Element (kde sa hráč objaví) a Výber obsahu (aký text sa číta).
- Prečo užitočné — používateľské rozhranie Listen sa môže nachádzať aj mimo tela článku (lepivá päta, výzva na akciu v bočnom paneli) bez zmeny spôsobu výberu obsahu.
- Render Element — Selektor CSS pre mount / kontajner, kam sa vkladá používateľské rozhranie prehrávača.
- Výber obsahu — Selektor CSS (alebo parent_class / self_class) pre text, ktorý sa stane zvukom.
- Rovnaký nápad na HTML a tvorcov — Pripojenia Vlastného HTML na HTML / Wix / Shopify / Squarespace používajú rovnaký pár polí.
Otvoriť cloudovú konzolu
Sprievodca pripojením HTML
Všetky návody
príbuzný
Volanie z HTML
Samostatný obsahový text
Viacstránkový widget
Predvolené krátke kódy
Globálne vs. vlastné
Hráč sa nezobrazuje
Vytvoriť plnohodnotného prehrávača
Vytvoriť prehrávač tlačidiel
Mapovanie
Vykresľovací prvok vs. selektor obsahu
- Render Element = miesto. Príklady držiakov: .gsp_full_player, .gsp_button_player, .gsp_circle_player — alebo uzol rozloženia ako #footer-listen.
- Výber obsahu = čo čítať. Jeden cieľ alebo viacero, oddelených čiarkou – napr. #main or #intro,.product-description,#specs.
- rodičovská_trieda — prečítať rodičovskú položku pripojenia (užitočné, keď sa pripojenie nachádza vo vnútri bloku obsahu).
- self_class – prečítajte si ten istý obal, v ktorom je držiak umiestnený.
- Vylúčiť zoznam — aj oddelené čiarkou; preskočiť navigáciu, reklamy, komentáre vo vnútri vybraného obsahu (napr. #comments,.ads,.share-buttons).
Pravidlo palca: Selektor obsahu ukazuje na text, ktorý ovládate; Vykresľovací prvok ukazuje na prázdny pripojovací bod (alebo kontajner), kde by sa mal prehrávač zobraziť.
Hodnoty HTML
Ako napísať ID, triedu a čiarky
Nemusíte poznať HTML hlboko – zapamätajte si dva prefixy a potom ich zostavte alebo orežte čiarkami:
- id → # - id="footer-listen" → #footer-listen.
- trieda → . - class="gsp_button_player" → .gsp_button_player.
- Iba štítok - article, section, h1 (bez predpony).
- Zhromaždite kúsky — Výber obsahu môže zobraziť niekoľko obalov: #intro,.body,#cta-note.
- Orezať kusy — Zoznam vylúčení používa to isté # / . + čiarky. Pozri Zoznam vylúčení a nospeech a sprievodcu hovormi HTML Hodnoty HTML Sekcia.
- Nájdi ich — kliknite pravým tlačidlom myši na blok na aktívnej stránke → Skontrolovať → kopírovať id / class do konzoly so správnym prefixom.
Hlas, jazyk a väčšina prehrávačov v prehliadači Chrome stále sledujú webovú stránku nastavenie keď pole widgetu uvádza Použite globálne — umiestnenie nevyžaduje vlastný hlas. Pozri Globálne vs. vlastné nastavenia.
nastavenie
Ako umiestniť vlastný widget
- Uistite sa, že kód pripojenia stránky (alebo integrácia WordPressu/CMS) je aktívny.
- Pridajte prázdneho koňa na miesto, kde sa má hráč zobraziť – napríklad <div class="gsp_button_player"></div> v päte alebo bočnom paneli Custom HTML.
- V Cloud Console otvorte (alebo vytvorte) zodpovedajúci widget Full / Button / Circle a Publikovať to.
- Sada Render Element k triede pripojenia (napr. .gsp_button_player).
- Sada Výber obsahu k obalu článku/produktu (alebo k viacerým častiam oddeleným čiarkami, napr. #intro,.entry-content). Ponechajte parent_class keď sa držiak nachádza vo vnútri tohto obsahu. Pamätajte: id → #, class → ..
- Voliteľné: Vylúčiť zoznam (oddelené čiarkou, rovnaké # / . pravidlá) a povolené/blokované adresy URL, aby sa prehrávač zobrazoval iba tam, kde chcete.
- Uložte, znova načítajte aktívnu stránku a skontrolujte, či sa prehrávač zobrazuje na vlastnom mieste a zároveň číta správny obsah.
Príklady
Bežné rozloženia
- Tlačidlo počúvania na bočnom paneli — Vykresľovací prvok .gsp_button_player v bočnom paneli; Výber obsahu article or .entry-content.
- Pás päty — pripojiť k šablóne päty; Výber obsahu stále cieli na hlavný článok, takže päta v prehliadači Chrome sa neprečíta.
- Vlastný HTML editor — rovnaké pripojenia na Wix / Shopify / Squarespace Custom Code / HTML bloky; mapovanie tried presne ako v Sprievodca HTML.
Často kladené otázky
Často kladené otázky o vlastných widgetoch
-
Najprv skontrolujte Render Element – trieda pripojenia musí na danej stránke existovať a zhodovať sa s widgetom. Taktiež skontrolujte, či je widget publikovaný a či ho pravidlá povolenia/blokovania URL nezakrývajú.
-
Áno. Jeden publikovaný widget môže zaplniť každé zodpovedajúce pripojenie Render Element povolené vašimi pravidlami URL. Ďalšie widgety vytvárajte iba vtedy, keď sa hlas, dizajn alebo selektory musia líšiť.
