Zufällige Inhalte in einem WordPress-Widget darstellen

Um zufällige Inhalte in einem WordPress-Widget darzustellen, gibt es einige Plugins, welche sich dieser Anforderung annehmen. Allerdings wirken sie in den meisten Fällen leicht überdimensioniert, sodass ich auf der Suche nach einer leichtgewichtigen Lösung war. Herausgekommen ist dabei folgendes Snippet:

<div id="content0" style="display: none;">A</div>
<div id="content1" style="display: none;">B</div>

<script>
  randomIndex = Math.floor(Math.random()*2);
  document.getElementById("content" + randomIndex).style.display = "inline";
</script>

Für jeden zufälligen Inhalt wird ein div-Container angelegt und dieser ist initial nicht sichtbar. Im Skriptteil wird nun zufällig einer dieser div-Container sichtbar geschaltet. Einziger Wermutstropfen ist, dass der Widget-Titel auf diese Art und Weise nicht angepasst werden kann. Durch eine erweitere Version des Skriptes kann dieses Problem beseitigt werden:

<div id="content0" style="display: none;">A</div>
<div id="content1" style="display: none;">B</div>

<script>
  randomIndex = Math.floor(Math.random()*2);
  document.getElementById("content" + randomIndex).style.display = "inline";
  
  const titles = ["A", "B"];
  document.getElementById("custom_html-6").getElementsByClassName("widget-title")[0].textContent=titles[randomIndex];
</script>

In dieser Version werden die Titel in einem Array hinterlegt. Die entsprechende ID des gewünschten Widgets muss vorher einmalig per Hand ermittelt werden und kann dann genutzt werden, um den Titel zu setzen.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.