Wie ambrabyte die Uptime von Uptime Kuma in WordPress anzeigt: Eine Schritt-für-Schritt-Anleitung

Bei ambrabyte nutzen wir innovative Techniken, um die Verfügbarkeit unserer Dienste nahtlos in unsere WordPress-Website zu integrieren. In diesem Artikel zeigen wir Ihnen, wie Sie das WPCode Plugin verwenden können, um die Uptime Badges von Uptime Kuma auf Ihrer Website anzuzeigen. Folgen Sie diesen einfachen Schritten, um Ihre Dienste effizient zu überwachen und sichtbar zu machen.

Was Sie benötigen

1. WordPress: Ein leistungsstarkes Content-Management-System, das Ihnen die Erstellung und Verwaltung Ihrer Website erleichtert.
2. WPCode Plugin: Ein vielseitiges WordPress-Plugin, das es Ihnen ermöglicht, benutzerdefinierten Code einfach hinzuzufügen.
3. Uptime Kuma: Ein modernes Monitoring-Tool, das Uptime-Status-Badges bereitstellt und die Verfügbarkeit Ihrer Dienste überwacht.

Code zum Anzeigen der Uptime Badges

Hier ist der PHP-Code, den ambrabyte verwendet, um die Verfügbarkeit unserer Dienste direkt auf unserer WordPress-Seite anzuzeigen:

<?php
// Array mit Monitor IDs und Namen
$monitors = [
    ['id' => '1', 'name' => 'Service 1'],
    ['id' => '4', 'name' => 'Service 2'],
    ['id' => '2', 'name' => 'Service 3'],
];

// Array mit den anzuzeigenden Zeiträumen (in Stunden)
$timePeriods = [
    ['hours' => 720, 'label' => '30d'],  // 30 Tage = 720 Stunden
    ['hours' => 336, 'label' => '14d'],  // 14 Tage = 336 Stunden
    ['hours' => 168, 'label' => '7d'],   // 7 Tage = 168 Stunden
    ['hours' => 24,  'label' => '24h']   // 24 Stunden
];

// Funktion zum Laden der Badge-Bilder und Ausgabe als Base64
function getBadgeBase64($monitorId, $period, $label, $status) {
    // API-URL von Uptime Kuma für den Badge
    if ($status) {
        $badgeUrl = "https://<uptimekuma>/api/badge/$monitorId/status";
    } else {
        $badgeUrl = "https://<uptimekuma>/api/badge/$monitorId/uptime/$period?label=$label";
    }
    
    // Badge-Bild mit file_get_contents abrufen
    $badgeImage = file_get_contents($badgeUrl);

    // Bilddaten als base64 kodieren
    $base64Image = base64_encode($badgeImage);

    // Rückgabe des Bildes in Base64-Format
    return 'data:image/svg+xml;base64,' . $base64Image;
}

// Loop durch alle Monitore und Ausgabe der Badges
foreach ($monitors as $monitor) {
    $monitorId = $monitor['id'];
    $monitorName = $monitor['name'];
    
    // Status-Badge für den Monitor
    $badgeBase64 = getBadgeBase64($monitorId, '', '', true);

    echo '<div><br><br>';
    echo '<h3>' . htmlspecialchars($monitorName) . ' <img src="' . $badgeBase64 . '" alt="' . htmlspecialchars($monitorName) . ' Uptime Badge"> </h3>';

    // Badges für alle Zeitperioden anzeigen
    foreach ($timePeriods as $timePeriod) {
        $hours = $timePeriod['hours'];
        $label = $timePeriod['label'];

        // Lade das Badge für die spezifische Zeitperiode
        $badgeBase64 = getBadgeBase64($monitorId, $hours, $label, false);
        echo '<img src="' . $badgeBase64 . '" alt="' . htmlspecialchars($monitorName) . ' Uptime Badge"> &nbsp;';
    }

    echo '</div>';
}
?>

Wie der Code funktioniert

• Monitore und Zeitperioden definieren: Wir definieren die Monitor-IDs und Namen sowie die Zeiträume für die Badges.
• getBadgeBase64 Funktion: Diese Funktion lädt das Badge-Bild von Uptime Kuma, kodiert es in Base64 und gibt es als Daten-URL zurück. Dies verschleiert die tatsächliche URL und verbessert die Sicherheit und Ladezeiten.
• Schleife für die Monitore: Für jeden Monitor wird das Status-Badge und die Badges für die verschiedenen Zeitperioden angezeigt.

Warum Base64 verwenden?

Base64-Kodierung ermöglicht es uns, das Bild direkt in HTML einzubetten. Dies hat mehrere Vorteile:

• Sichtbarkeit der URL verhindern: Die tatsächliche API-URL wird nicht offengelegt.
• Schnellere Ladezeiten: Direktes Einbetten von Bildern kann die Ladezeiten verbessern.
• Erhöhte Sicherheit: Die URL zur Uptime Kuma API bleibt verborgen.

Mit diesen Schritten können Sie die Verfügbarkeit Ihrer Dienste direkt und sicher auf Ihrer Website anzeigen, wobei die Details der API verborgen bleiben. Nutzen Sie die Möglichkeiten von ambrabyte, um Ihre Dienste effektiv zu überwachen und transparent zu präsentieren.