Özel bir widget yerleştirin

Özel bir widget (oynatıcı) yerleştirin; bunu altbilgiye, kenar çubuğuna veya herhangi bir düzen alanına yerleştirin.

A özel widget yerleşimi Bu özellik, düzeninizin izin verdiği herhangi bir yere (altbilgi, kenar çubuğu, üstbilgi şeridi veya özel bir HTML bloğu) tam boyutlu / düğme / daire şeklinde bir oynatıcı yerleştirmenizi sağlarken, kontrolü de elinizde tutmanıza olanak tanır. ne Anlatım yapılır. İki alan eşlemeyi gerçekleştirir: İşleme Öğesi (oyuncunun göründüğü yer) ve İçerik Seçici (Okunan metin nedir?)

  • Neden faydalı? — Kullanıcı arayüzü, içeriğin seçilme şeklini değiştirmeden makale gövdesinin dışında (sabit altbilgi, kenar çubuğu harekete geçirici mesaj) yer alabilir.
  • İşleme Öğesi — Oynatıcı arayüzünün eklendiği bileşen/konteyner için CSS seçici.
  • İçerik Seçici — CSS seçici (veya parent_class / self_classSes dosyasına dönüştürülen metin için.
  • HTML ve oluşturucular için de aynı fikir geçerli. — HTML / Wix / Shopify / Squarespace'te özel HTML bağlantıları aynı alan çiftini kullanır.

Açık Bulut Konsolu HTML bağlantı kılavuzu Tüm Nasıl Yapılırlar

Öğeyi Oluşturma ve İçerik Seçici Arasındaki Fark

  • İşleme Öğesi = yer. Örnek montaj yerleri: .gsp_full_player, .gsp_button_player, .gsp_circle_player — veya bir düzen düğümü gibi #footer-listen.
  • İçerik Seçici = Ne okunmalı. Tek bir hedef veya virgülle ayrılmış birkaç hedef — örneğin #main or #intro,.product-description,#specs.
  • ebeveyn_sınıfı — Bağlantı öğesinin üst öğesini okuyun (bağlantı öğesi içerik bloğunun içinde yer aldığında kullanışlıdır).
  • self_class — Montaj aparatının içinde bulunduğu ambalajı okuyun.
  • Listeyi Hariç Tut — ayrıca virgülle ayrılmış; seçilen içerikteki gezinme çubuğunu, reklamları, yorumları atla (örneğin) #comments,.ads,.share-buttons).

Temel kural: İçerik Seçici, kontrol ettiğiniz metni gösterir; Oluşturulacak Öğe ise oyuncunun görünmesi gereken boş alanı (veya konteyneri) gösterir.

id, class ve virgül nasıl yazılır?

HTML'i derinlemesine bilmenize gerek yok; iki öneki hatırlayın, ardından virgüllerle birleştirin veya kısaltın:

  • id → # - id="footer-listen" → #footer-listen.
  • sınıf → . - class="gsp_button_player" → .gsp_button_player.
  • Sadece etiket - article, section, h1 (önek yok).
  • Parçaları bir araya getirin — İçerik Seçici birden fazla sarmalayıcı listeleyebilir: #intro,.body,#cta-note.
  • Kırpma parçaları — Hariç Tutma Listesi aynı yöntemi kullanır # / . + virgüller. Bakınız. Hariç Tutma Listesi ve konuşma yok ve HTML çağrı kılavuzunun HTML değerleri Bölüm.
  • Bul onları — Canlı sayfadaki bloğa sağ tıklayın → İncele → Kopyala id / class Konsola doğru öneki ekleyerek yazın.

Ses, dil ve çoğu oynatıcı Chrome hala web sitesini takip ediyor. Ayarlar widget alanı şöyle dediğinde Küresel Kullan — Yerleştirme, özel bir ses kullanımını zorunlu kılmaz. Bakınız Genel ayarlar mı yoksa özel ayarlar mı?.

Özel bir widget nasıl yerleştirilir?

  1. Site bağlantı kodunun (veya WordPress/CMS entegrasyonunun) aktif olduğundan emin olun.
  2. Oyuncunun görünmesi gereken yere boş bir binek ekleyin — örneğin <div class="gsp_button_player"></div> Altbilgi veya kenar çubuğunda özel HTML.
  3. Bulut Konsolunda, ilgili Tam / Düğme / Daire widget'ını açın (veya oluşturun) ve Yayınlamak bunu.
  4. set İşleme Öğesi montaj sınıfına (örneğin .gsp_button_player).
  5. set İçerik Seçici makale/ürün ambalajına (veya virgülle ayrılmış birkaç parçaya, örneğin) #intro,.entry-content). Kale parent_class Montaj parçası o içeriğin içine oturduğunda. Unutmayın: id → #, class → ..
  6. İsteğe bağlı: Listeyi Hariç Tut (virgülle ayrılmış, aynı) # / . Kurallar) ve İzin Verilen/Engellenen URL'ler sayesinde oynatıcı yalnızca istediğiniz yerlerde görünür.
  7. Kaydedin, canlı sayfayı yeniden yükleyin ve oynatıcının doğru içeriği okurken özel konumda göründüğünü doğrulayın.

Ortak düzenler

  • Kenar çubuğu dinleme düğmesi — Öğeyi Oluştur .gsp_button_player Kenar çubuğunda; İçerik Seçici article or .entry-content.
  • Altbilgi şeridi — Altbilgi şablonuna ekleyin; İçerik Seçici hala ana makaleyi hedeflediği için altbilgi şablonundan bahsedilmiyor.
  • Özel HTML Oluşturucu — Wix / Shopify / Squarespace Özel Kod / HTML bloklarında aynı bağlantılar; sınıfları tıpkı şuradaki gibi eşleştirin: HTML kılavuzu.

Özel widget hakkında SSS

  • Oynatıcı eksik ama içerik seçici doğru görünüyor?

    Öncelikle "Render Element"i kontrol edin — mount sınıfının o sayfada mevcut olması ve widget ile eşleşmesi gerekir. Ayrıca widget'ın yayınlanmış olduğundan ve URL izin/engelleme kurallarının onu gizlemediğinden emin olun.
  • Tek bir cihaz birçok montaj aletine güç sağlayabilir mi?

    Evet. Yayınlanan bir widget, URL kurallarınızın izin verdiği her eşleşen Render Element yuvasını doldurabilir. Yalnızca ses, tasarım veya seçicilerin farklı olması gerektiğinde ek widget'lar oluşturun.