WordPress (Divi)

Diese Seite beschreibt zwei Ansätze für WordPress-Websites, die auf dem Divi-Theme aufgebaut sind.

Ansatz 1: Statischer Link mit Sound-Icon

Fügen Sie dieses HTML an der Stelle ein, an der ein „Namen hören”-Link erscheinen soll:

<p align="center" style="font-size:.9em; color:grey;">
  Namen hören
  <a href="https://namedrop.io/{{namedrop username}}">
    <img />
  </a>
</p>

Ein Beispiel dieses Ansatzes in der Produktion finden Sie unter ocj.org/about/staff-and-board/:

OCJ-Mitarbeiterverzeichnisseite mit dem „Namen hören"-Link und NameDrop Sound-Icon neben dem Namen eines Teammitglieds

Ansatz 2: Divi Header-Script (seitenweite Auto-Erkennung)

Dieser Ansatz durchsucht jede Seite nach namedrop.io-Links und fügt neben jedem einen Inline-Abspiel-Button hinzu. Am besten für Websites mit vielen Mitarbeiter- oder Vorstandsseiten geeignet.

Wo Sie das Script einfügen

Im Divi-Admin:

Divi → Theme-Optionen → Integration.
Suchen Sie den Abschnitt „Code zum <head> Ihres Blogs hinzufügen”.
Fügen Sie das folgende Script am Ende ein.
Klicken Sie auf Änderungen speichern.

Das Script

<script>
  window.onload = (e) => {
    const audioURL = 'https://data.namedrop.io/audio';
    const ArrayOfHrefs = document.querySelectorAll('a');
    const convertHrefToArray = Array.from(ArrayOfHrefs);
    convertHrefToArray.map((href) => {
      const url = new URL(href.href);
      const pathnames = ['/', '/stories', '/offerings', '/dashboard', '/login', '/signup'];
      if (url.origin === 'https://namedrop.io' && !pathnames.includes(url.pathname)) {
        const audio = new Audio();
        let isPlaying = false;
        const parentElement = href;
        const parentHeight = parentElement.offsetHeight;
        const nameDropUserName = url.pathname.substring(1);
        audio.src = `${audioURL}/${nameDropUserName}.mp3`;

        const imageElement = document.createElement('img');
        // Ersetzen Sie dies durch eine gehostete Abspiel-Button-Bild-URL auf Ihrer Website
        imageElement.src = './images/play-btn.png';
        imageElement.style.maxWidth = '100%';
        imageElement.style.transform = 'translateY(5px)';
        imageElement.style.display = 'inline-block';
        imageElement.height = parentHeight;
        imageElement.style.margin = '0px 5px';
        parentElement.appendChild(imageElement);

        href.addEventListener('click', (e) => {
          if (e.target.tagName === 'IMG') {
            e.preventDefault();
            isPlaying = !isPlaying;
            if (isPlaying) {
              audio.play();
              imageElement.src = './images/pause-btn.png';
            } else {
              imageElement.src = './images/play-btn.png';
              audio.pause();
            }
          }
        });

        audio.onended = () => {
          isPlaying = false;
          imageElement.src = './images/play-btn.png';
        };
      }
    });
  };
</script>

Was es tut

Durchsucht nach dem Laden alle Links auf der Seite
Filtert auf Links, die auf ein NameDrop-Profil zeigen (https://namedrop.io/<benutzername>)
Fügt neben jedem einen Abspiel-Button als Bild hinzu
Spielt die Audiodatei (https://data.namedrop.io/audio/<benutzername>.mp3) beim Klicken ab, ohne die Seite zu verlassen

Erforderliches Asset

Sie müssen play-btn.png und pause-btn.png auf Ihrem eigenen Server hosten (oder die imageElement.src-URLs auf gehostete Icons anpassen). Das obige Script erwartet sie unter ./images/play-btn.png relativ zur Seite — passen Sie dies entsprechend an.

Welchen Ansatz sollte ich verwenden?

Situation	Verwenden Sie
Sie möchten die einfachste mögliche Installation	Website-Plugin
Sie verlinken bereits auf NameDrop-Profile	Website-Plugin (Auto-Erkennung)
Nur ein Name auf einer einzelnen Seite	Ansatz 1 (statischer Link)
Viele Namen, Divi-Theme, kein `<script>` pro Seite möglich	Ansatz 2 (Header-Script)