Hur-tos
Placera en anpassad widget — spelare i sidfoten, sidofältet eller valfri layoutplats
A anpassad widgetplacering låter dig placera en Full / Knapp / Cirkel-spelare var som helst din layout tillåter — sidfot, sidofält, sidhuvud eller ett anpassat HTML-block — samtidigt som du fortfarande kontrollerar vad blir berättad. Två fält utför mappningen: Render element (där spelaren visas) och Innehållsväljare (vilken text läses).
- Varför användbart — lyssna-gränssnittet kan finnas utanför artikelns brödtext (fast sidfot, uppmaning till handling i sidofältet) utan att ändra hur innehållet väljs.
- Render element — CSS-väljare för monteringen/containern där spelarens användargränssnitt injiceras.
- Innehållsväljare — CSS-väljare (eller parent_class / self_class) för texten som blir ljud.
- Samma idé om HTML och byggverktyg — Anpassade HTML-monteringar på HTML / Wix / Shopify / Squarespace använder samma fältpar.
Öppna molnkonsolen
Guide för HTML-anslutning
Alla instruktioner
Relaterad
Anrop från HTML
Fristående innehållstext
Flersidig widget
Standardkortkoder
Global kontra anpassad
Spelaren visas inte
Skapa fullständig spelare
Skapa knappspelare
Kartläggning
Renderingelement kontra innehållsväljare
- Render element = plats. Exempel på fästen: .gsp_full_player, .gsp_button_player, .gsp_circle_player — eller en layoutnod som #footer-listen.
- Innehållsväljare = vad som ska läsas. Ett mål eller flera, kommaseparerade — t.ex. #main or #intro,.product-description,#specs.
- förälderklass — läs den föräldrade monteringsfilen (praktiskt när monteringsfilen sitter inuti innehållsblocket).
- självklass — läs samma omslag som fästet sitter i.
- Uteslut lista — även kommaseparerad; hoppa över navigering, annonser, kommentarer inuti det valda innehållet (t.ex. #comments,.ads,.share-buttons).
Tumregel: Innehållsväljaren pekar på texten du kontrollerar; Render Element pekar på den tomma monteringen (eller behållaren) där spelaren ska visas.
HTML-värden
Hur man skriver id, klass och kommatecken
Du behöver inte kunna HTML på djupet – kom ihåg två prefix och montera eller trimma sedan med kommatecken:
- id → # - id="footer-listen" → #footer-listen.
- klass → . - class="gsp_button_player" → .gsp_button_player.
- Endast tagg - article, section, h1 (inget prefix).
- Samla bitar — Innehållsväljaren kan lista flera omslag: #intro,.body,#cta-note.
- Trimma bitar — Exkluderingslista använder samma # / . + kommatecken. Se Exkludera lista och ingen talfunktion och HTML-anropsguidens HTML-värden sektion.
- Hitta dem — högerklicka på blocket på livesidan → Inspektera → kopiera id / class i konsolen med rätt prefix.
Röst, språk och de flesta Chrome-spelare följer fortfarande webbplatsen Inställningar när widgetfältet säger Använd Global — placering tvingar inte fram en anpassad röst. Se Globala kontra anpassade inställningar.
Inställning
Hur man placerar en anpassad widget
- Se till att webbplatsens anslutningskoden (eller WordPress/CMS-integrationen) är aktiv.
- Lägg till en tom monteringsplats där spelaren ska visas — till exempel <div class="gsp_button_player"></div> i sidfoten eller sidofältet Anpassad HTML.
- I Cloud Console, öppna (eller skapa) matchande Fullständig / Knapp / Cirkel-widget och Publicera det.
- uppsättning Render element till mount-klassen (t.ex. .gsp_button_player).
- uppsättning Innehållsväljare till artikel-/produktomslaget (eller flera delar med kommatecken, t.ex. #intro,.entry-content). Förvara parent_class när fästet sitter inuti det innehållet. Kom ihåg: id → #, class → ..
- Frivillig: Uteslut lista (kommaseparerade, samma # / . regler) och tillåtna/blockerade webbadresser så att spelaren bara visas där du vill.
- Spara, ladda om livesidan och bekräfta att spelaren visas på den anpassade platsen medan rätt innehåll läses.
Exempel
Vanliga layouter
- Lyssna-knapp i sidofältet — Rendera element .gsp_button_player i sidofältet; Innehållsväljare article or .entry-content.
- Sidfotsremsa — montera i sidfotsmallen; Innehållsväljaren riktar sig fortfarande mot huvudartikeln så sidfotens krom läses inte upp.
- Skapare Anpassad HTML — samma monteringar på Wix / Shopify / Squarespace Custom Code / HTML-block; mappar klasser exakt som i HTML-guide.
FAQ
Vanliga frågor om anpassade widgetar
-
Kontrollera Render Element först – monteringsklassen måste finnas på den sidan och matcha widgeten. Bekräfta också att widgeten är publicerad och att URL-tillåtelse-/blockeringsregler inte döljer den.
-
Ja. En publicerad widget kan fylla alla matchande renderingselementmonteringar som tillåts enligt dina URL-regler. Skapa extra widgetar endast när röst, design eller väljare måste skilja sig åt.
