Script: Radio portal
Dit betreft een eigen ontworpen radio portal. Dit script / wordpress plugin is geschikt om op je website een scala aan radiostations te tonen. Met 1 klik op het radiostation naar keuze begint de audioplayer met afspelen. Versie 2 van de WP plugin is live! Compleet nieuwe versie! Nog mooier, nog beter, en geoptimaliseerd voor snelheid!

Alle informatie over dit script / WP plugin kun je bekijken op mijn website: https://websiteplugin.nl

Demo: https://internetradioluisteren.nl/

Plugin informatie

● Versie: 2.1
● Auteur: Dave Gerrits
● Vereisten: WordPress 5.0 of hoger.

Changelog
- V1.1: Categoriebeheer voor radiostations is toegevoegd.
- V1.2: Populaire radiostations is verwijderd.
- V2.0: Compleet nieuwe versie gelanceerd, met nog meer opties.
- 24-02-2025 - V2.1: Op de frontend wanneer je over een radiostation beweegt komt er nu een play knop in beeld, het play teken kun je zelf de kleur van kiezen. En in de audio player is nu een sluiten knop toegevoegd die ervoor zorgt dat je de hele audio player direct afsluit.


Beschrijving van de plugin

Radio Portal is een WordPress-plugin waarmee je een radio pagina kunt maken. Met deze plugin kun je:

• Radiostations beheren (toevoegen, wijzigen, verwijderen) met bijbehorende gegevens zoals naam, stream URL, logo en volgorde.
• Radiostation Categorieën beheren, zodat je de stations kunt onderverdelen in groepen en de volgorde van deze categorieën kunt bepalen.
• Luister Statistieken bijhouden: elke keer wanneer een bezoeker op een radiostation klikt, wordt dit gelogd.
• Een aanpasbare audio player tonen op de frontend, waarbij je zowel de achtergrondkleur als de tekstkleur (via HEX-codes) kunt instellen.
• Een responsive grid weergeven waarin per categorie de radiostations (met ronde hoeken) worden getoond.
• Een zoekfunctionaliteit aanbieden: bezoekers kunnen snel zoeken naar een radiostation. Zoekresultaten (met logo en naam) verschijnen direct onder de zoekbalk, en er is een knop om het zoekveld te wissen.
• Shortcode: Gebruik de shortcode [radio_portal] om het radio portal op een pagina weer te geven.

Backend (Admin) Functionaliteiten

1. Radiostations beheren en Audio Player Instellingen
Audio Player Instellingen:
In dit gedeelte kun je via een formulier twee instellingen aanpassen:
Achtergrondkleur: Voer een HEX-code in (bijv. #f1f1f1) om de achtergrondkleur van de audio player in te stellen.
Tekstkleur: Voer een HEX-code in (bijv. #000000) voor de tekstkleur die in de audio player wordt getoond.
Radiostation toevoegen of bewerken:
Via het formulier kun je een nieuw radiostation toevoegen of een bestaand station bewerken. Hierbij geef je de volgende gegevens op:
Naam radiostation
Stream URL (de URL naar de audio stream)
Logo URL (het logo van het radiostation)
Volgorde (bepaalt de positie in de frontend)
Categorie: Kies uit de beschikbare radiostations categorieën.
Radiostations Lijst:
Onder het formulier zie je een tabel met alle radiostations, inclusief de toegewezen categorie en volgorde. Hier kun je bewerken of verwijderen.
2. Luister Statistieken
Statistieken:
Deze pagina toont per radiostation het aantal keer dat er op is geklikt (geluisterd). Hiermee krijg je inzicht in de populariteit van de verschillende stations.
3. Categorieën beheren
Categorie toevoegen/bewerken:
Hier kun je nieuwe categorieën aanmaken en bestaande categorieën wijzigen of verwijderen. Voor elke categorie geef je een naam en een volgorde op, zodat je de weergave op de frontend kunt bepalen.


Frontend Functionaliteiten

De plugin maakt gebruik van een shortcode [radio_portal]. Voeg deze shortcode toe aan een pagina of bericht om het Radio Portal op je site te tonen.

1. Radiostations weergeven
Weergave per categorie:
Op de frontend worden de radiostations in groepen (categorieën) weergegeven. Elke categorie heeft een kop (in een <h3> met kleinere, vetgedrukte tekst) en daaronder een grid met radiostation-logo’s.
Responsive design:
Het grid heeft 10 kolommen op grote schermen, maar past zich automatisch aan (bijvoorbeeld 5 kolommen op tablets en 2 kolommen op mobiele telefoons).
Visuele aanpassingen:
De radiostation logo’s worden getoond in vierkante blokken met afgeronde hoeken (via CSS border-radius: 10px;).
2. Audio Player
Functionaliteit:
Wanneer een bezoeker op een radiostation klikt, start de stream en verschijnt een audio player onderaan de pagina.
Instelbare kleuren:
De achtergrondkleur en de tekstkleur van de audio player worden toegepast zoals ingesteld in de backend.
Luister Statistieken:
Elke klik op een radiostation wordt gelogd via een AJAX-call, zodat de luister statistieken worden bijgehouden.
3. Zoekfunctionaliteit
Zoekbalk:
Bovenaan de frontend vind je een zoekbalk binnen een container.
Directe zoekresultaten:
Terwijl bezoekers typen (met een korte debounce van 300 ms), worden via AJAX radiostations opgehaald waarvan de naam overeenkomt met de ingevoerde zoekterm.
Weergave van resultaten:
De zoekresultaten worden direct onder de zoekbalk getoond. Elk resultaat toont het radiostation logo en de naam.
Wis-knop:
In de zoekbalk is een “wis” (clear) knopje aanwezig. Bij een klik wordt het zoekveld leeggemaakt en verdwijnen de zoekresultaten.
Resultaat klik:
Als een bezoeker op een zoekresultaat klikt, wordt de stream gestart, net zoals bij een klik op een station in de grid.


Bij aankoop van de plugin ontvang je de plugin die je kant en klaar kunt uploaden, activeren en gebruiken. Je krijgt er ook een handleiding bij.

Prijs:
€ 59 (Eenmalig)

Licentie:
volledige rechten / GEEN doorverkoop rechten

Heb je vragen? Neem contact op. Dit kan hier op SD, of per mail info@davegerrits.nl