Інструкцыі
Размясціце карыстальніцкі віджэт — плэер — у ніжнім калантытуле, бакавой панэлі або ў любым іншым месцы макета
A размяшчэнне карыстальніцкага віджэта дазваляе размясціць паўнавартасны / кнопачны / круглы плэер у любым месцы, дзе дазваляе макет — у ніжнім калантытуле, бакавой панэлі, паласе загалоўка або ў блоку карыстальніцкага HTML — захоўваючы пры гэтым кантроль. што агучваецца. Адлюстраванне выконваецца двума палямі: Элемент візуалізацыі (дзе з'яўляецца гулец) і Выбар змесціва (які тэкст чытаецца).
- Чаму карысна — інтэрфейс listen можа знаходзіцца па-за тэкстам артыкула (ліпкі калантытул, заклік да дзеяння ў бакавой панэлі), не змяняючы спосаб выбару кантэнту.
- Элемент візуалізацыі — CSS-селектар для мантавання / кантэйнера, куды ўстаўляецца інтэрфейс гульца.
- Выбар змесціва — CSS-селектар (або parent_class / self_class) для тэксту, які становіцца аўдыё.
- Тая ж ідэя наконт HTML і канструктараў — Карыстальніцкія HTML-мантажы ў HTML / Wix / Shopify / Squarespace выкарыстоўваюць адну і тую ж пару палёў.
Адкрыць воблачную кансоль
Кіраўніцтва па падключэнні HTML
Усе інструкцыі
роднасны
Выклік з HTML
Асобны тэкст кантэнту
Шматстаронкавы віджэт
Кароткія коды па змаўчанні
Глабальны супраць карыстальніцкага
Гулец не паказваецца
Стварыць паўнавартасны прайгравальнік
Стварыць кнопачны прайгравальнік
Карт
Элемент рэндэрынгу супраць селектара кантэнту
- Элемент візуалізацыі = месца. Прыклады мацаванняў: .gsp_full_player, .gsp_button_player, .gsp_circle_player — або вузел макета, напрыклад #footer-listen.
- Выбар змесціва = што чытаць. Адна мэта або некалькі, падзеленых коскамі — напрыклад #main or #intro,.product-description,#specs.
- бацькоўскі_клас — прачытаць бацькоўскі элемент мантавання (зручна, калі мантаванне знаходзіцца ўнутры блока змесціва).
- сам_клас — гаворыцца на той жа абгортцы, у якой знаходзіцца мацаванне.
- Спіс выключэнняў — таксама падзелены коскамі; прапускаць навігацыю, рэкламу, каментарыі ўнутры выбранага кантэнту (напрыклад, #comments,.ads,.share-buttons).
Правіла: «Селектар змесціва» паказвае на тэкст, якім вы кіруеце; «Элемент рэндэрынгу» паказвае на пустое мацаванне (або кантэйнер), дзе павінен з'явіцца гулец.
Значэнні HTML
Як пісаць ідэнтыфікатар, клас і коскі
Вам не трэба глыбока ведаць HTML — запомніце два прэфіксы, а потым збярыце або абрэжце коскамі:
- ідэнтыфікатар → # - id="footer-listen" → #footer-listen.
- клас → . - class="gsp_button_player" → .gsp_button_player.
- Толькі тэг - article, section, h1 (без прэфікса).
- Збярыце часткі — Выбар змесціва можа пералічыць некалькі абгортак: #intro,.body,#cta-note.
- Абрэзаць кавалачкі — Спіс выключэнняў выкарыстоўвае тое ж самае # / . + коскі. Глядзіце Спіс выключэнняў і nospeech і кіраўніцтва па выкліках у HTML Значэнні HTML падзел.
- Знайдзіце іх — пстрыкніце правай кнопкай мышы на блоку на старонцы → Праверыць → Скапіяваць id / class у кансоль з правільным прэфіксам.
Голас, мова і большасць прайгравальнікаў Chrome усё яшчэ адпавядаюць вэб-сайту налады калі ў полі віджэта напісана Выкарыстоўвайце Global — размяшчэнне не прымушае выкарыстоўваць уласны голас. Глядзіце Глабальныя супраць карыстальніцкіх налад.
Ўстаноўка
Як размясціць уласны віджэт
- Пераканайцеся, што код падключэння сайта (або інтэграцыя WordPress / CMS) працуе.
- Дадайце пустое мацаванне там, дзе павінен з'явіцца гулец — напрыклад <div class="gsp_button_player"></div> у ніжнім калонтытуле або бакавой панэлі карыстальніцкага HTML.
- У кансолі Cloud адкрыйце (або стварыце) адпаведны віджэт Full / Button / Circle і Апублікаваць яго.
- Усталёўка Элемент візуалізацыі да класа мантавання (напрыклад, .gsp_button_player).
- Усталёўка Выбар змесціва да артыкула / абгорткі прадукту (або некалькіх частак праз коскі, напрыклад #intro,.entry-content). Захоўваць parent_class калі мацаванне знаходзіцца ўнутры гэтага змесціва. Памятайце: id → #, class → ..
- Дадаткова: Спіс выключэнняў (падзеленыя коскамі, тое ж самае # / . правілы) і дазволеныя/заблакіраваныя URL-адрасы, каб гулец з'яўляўся толькі там, дзе вы хочаце.
- Захавайце, перазагрузіце старонку актыўнага рэжыму і пераканайцеся, што прайгравальнік адлюстроўваецца ў карыстальніцкім месцы падчас чытання патрэбнага кантэнту.
Прыкладаў
Распаўсюджаныя макеты
- Кнопка праслухоўвання на бакавой панэлі — Элемент рэндэрынгу .gsp_button_player на бакавой панэлі; Выбар змесціва article or .entry-content.
- Ніжні калантытул — мантаваць у шаблон ніжняга калантытула; селектар змесціва ўсё яшчэ арыентуецца на асноўны артыкул, таму хром ніжняга калантытула не агучваецца.
- Канструктар карыстальніцкага HTML — тыя ж мантажы на блоках Wix / Shopify / Squarespace Custom Code / HTML; класы адлюстроўваюцца дакладна так, як у Кіраўніцтва па HTML.
Часта задаваныя пытанні
Часта задаваныя пытанні па карыстальніцкіх віджэтах
-
Спачатку праверце элемент рэндэрынгу — клас мантавання павінен існаваць на гэтай старонцы і адпавядаць віджэту. Таксама пераканайцеся, што віджэт апублікаваны, і правілы дазволу/блакавання URL-адрасоў не хаваюць яго.
-
Так. Адзін апублікаваны віджэт можа запоўніць усе адпаведныя мацавання элементаў рэндэрынгу, дазволеныя вашымі правіламі URL. Стварайце дадатковыя віджэты толькі тады, калі голас, дызайн або селектары павінны адрознівацца.
