Asennusohje

Tämä asennusohje on tarkoitettu tekniselle henkilölle, jolla on kokemusta WordPress-sivustojen kehittämisestä. VI Widgetin yleinen asennusohje löytyy osoitteesta: https://static.voiceintuitive.com/installation.

Käsitteet

• VI Widget – Voice Intuitiven widget Kuuntele ja Translate toiminnoilla
• JavaScript Snippet tai HYTML Snippet – Lyhyt koodinpätkä, joka suorittaa tietyn toiminnon tai lisää ominaisuuden web-sivulle.

Demo-valikon valinnat ja CSS-asetukset

Valikon valintoihin pitää lisätä CSS-asetus, jonka avulla kutsutaan VI Widgetin JavaScript snippetiä, joka suorittaa sivun käännöksen.

Oletuksena CSS-valinta ei näy valikon valinnoissa, vaan se pitää kytkeä päälle valitsemalla WordPressistä Appearance > Menus > Screen Options (ihan oikeassa ylälaidassa) > CSS Classes.

• Suomi – Linkki demosivun suomenkieliseen versioon
• English – Linkki demosivun englanninkieliseen versioon
• Ruotsi – Linkki demosivun ruotsinkieliseen versioon
• English from the Current Page – Kääntää nykyisen sivun englanniksi VI Widgetillä
  • CSS Classes: vi-translate-current-en
• Swedish from the Current Page – Kääntää nykyisen sivun ruotsiksi VI Widgetillä
  • CSS Classes: vi-translate-current-sv
• Estonian from the Current Page – Kääntää nykyisen sivun viroksi VI Widgetillä
  • CSS Classes: vi-translate-current-et
• English from FI – Siirtyy suomenkieliselle pääsivulle ja kääntää nykyisen sivun englanniksi VI Widgetillä
  • CSS Classes: vi-translate-main-en
• Swedish from FI – Siirtyy suomenkieliselle pääsivulle ja kääntää nykyisen sivun ruotsiksi VI Widgetillä
  • CSS Classes: vi-translate-main-sv
• Estonian from FI – Siirtyy suomenkieliselle pääsivulle ja kääntää nykyisen sivun viroksi VI Widgetillä
  • CSS Classes: vi-translate-main-et

WordPress asennusympäristön vaatimukset

Sivustolle lisätään JavaScript Snippet koodia, jotta VI Widget saadaan näkymään ja tekemään käännöksiä. WordPress tarjoaa WPCode Lite liitännäisen, jolla voidaan luoda helposti JavaScript Snippet koodeja. Asennuksen esimerkit on tehty WPCode Lite liitännäisellä.

VI Widget perusasennus

Luodaan WPCode Lite liitännäisellä Code Snippet VI Widget.

• Name: VI Widget
• Code Type: JavaScript Snippet
• Location: Site Wide Header
• Device Type: Any device type
• Status: Active

(function (w, d, s, o, f, js, fjs) {
w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', '_vi', 'https://static.voiceintuitive.com/widget.js'));
_vi('init');

VI Widget napin asennus

VI Widget napin sijainti riippuu WordPress-sivuston vaatimuksista. Demossa nappi on sijoitettu sivun alkuun.

Luodaan WPCode Lite liitännäisellä Code Snippet VI Widget Button.

• Name: VI Widget Button
• Code Type: HTML Snippet
• Location: Insert Before Content
• Device Type: Any device type
• Status: Active

<div id="voice-intuitive-root"></div>

VI Translate from the Current Page asennus

Tämä snippet suorittaa nykyisen sivun käännöksen VI Widgetiä käyttäen. Snippetiä kutsuaan CSS-luokalla vi-translate-current-[languagecode] esimerkiksi vi-translate-current-en.

Luodaan WPCode Lite liitännäisellä Code Snippet VI Translate from the Current Page.

• Name: VI Translate from the Current Page
• Code Type: JavaScript Snippet
• Location: Insert Site Wide Header
• Device Type: Any device type
• Status: Active

document.addEventListener('DOMContentLoaded', function() {
    var customLinks = document.querySelectorAll('[class*="vi-translate-current-"] a');
    customLinks.forEach(function(link) {
        link.onclick = function(event) {
            event.preventDefault();
            var languageClass = Array.from(link.parentElement.classList).find(cls => cls.startsWith('vi-translate-current-'));
            if (languageClass) {
                var languageCode = languageClass.split('-').pop(); // Extracts the language code from the class name
                window._vi('translate-page', languageCode);
            }
        };
    });
});

VI Translate from the Main Language asennus

Tämä snippet siirtyy suomenkieliselle pääsivulle ja suorittaa sen käännöksen VI Widgetiä käyttäen. Snippetiä kutsuaan CSS-luokalla vi-translate-main-[languagecode] esimerkiksi vi-translate-main-en.

Luodaan WPCode Lite liitännäisellä Code Snippet VI Translate from the Main Language.

• Name: VI Translate from the Main Language
• Code Type: JavaScript Snippet
• Location: Insert Site Wide Header
• Device Type: Any device type
• Status: Active

document.addEventListener('DOMContentLoaded', function() {
    var customLinks = document.querySelectorAll('[class*="vi-translate-main-"] a');
    customLinks.forEach(function(link) {
        link.onclick = function(event) {
            event.preventDefault();
            var languageClass = Array.from(link.parentElement.classList).find(cls => cls.startsWith('vi-translate-main-'));
            if (languageClass) {
                var languageCode = languageClass.split('-').pop(); // Extracts the language code from the class name
                window.location.href = 'https://demo-pohde-wp.voicehub.fi?vitranslate=' + languageCode;
            }
        };
    });
});

function viCheckAndExecuteTranslation(languageCode) {
    if (document.getElementById('voice-intuitive-player')) {
        window._vi('translate-page', languageCode);
    } else {
        setTimeout(function() {
            viCheckAndExecuteTranslation(languageCode);
        }, 100); // Check every 100 milliseconds
    }
}

var urlParams = new URLSearchParams(window.location.search);
var languageCode = urlParams.get('vitranslate');
if (window.location.href.includes('https://demo-pohde-wp.voicehub.fi') && languageCode) {
    viCheckAndExecuteTranslation(languageCode);
}

Ohje päivitetty 17.1.2024.